This project is forked from Antora Default UI as per their instructions.
To build this project and preview it locally, you need the following software on your computer:
First, make sure you have Git installed.
$ git --version
If not, download and install the Git package for your system.
Next, make sure that you have Node.js installed (which also provides npm).
$ node --version
If this command fails with an error, you don’t have Node.js installed. While you can install Node.js from the official packages, we strongly recommend that you use nvm (Node Version Manager) to manage your Node.js installation(s). Follow the nvm installation instructions to set up nvm on your machine.
Once you’ve installed nvm, open a new terminal and cd into the project folder and install Node.js using the following command:
$ nvm install
This will basically install the Node.js version defined in the .nvmrc file of this project.
You’ll need the Gulp command-line interface (CLI) to run the build.
The Gulp CLI package provides the gulp command.
You can install the Gulp CLI globally using the following command:
$ npm install -g gulp-cli
Verify the Gulp CLI is installed by running:
$ gulp --version
Now that you have the prerequisites installed, you can build the project.
Use npm to install the project’s dependencies inside the project.
In your terminal, cd into the project folder and execute the following command:
$ npm install
This command installs the dependencies listed in package.json into the node_modules/ folder inside the project. This folder does not get included in the UI bundle and should not be committed to the source control repository.
The files in the preview-src/ folder provide the sample content that allow you to see the UI in action. In this folder, you’ll primarily find pages written in AsciiDoc. These pages provide a representative sample and kitchen sink of content from the real site.
To build the UI and preview it in a local web server, run the preview command:
$ gulp preview
You’ll see a URL listed in the output of this command:
[12:00:00] Starting server... [12:00:00] Server started http://localhost:5252 [12:00:00] Running server
Navigate to this URL to preview the site locally.
While this command is running, any changes you make to the source files will be instantly reflected in the browser.
This works by monitoring the project for changes, running the preview:build task if a change is detected, and sending the updates to the browser.
Press kbd:[Ctrl+C] to stop the preview server and end the continuous build.
If you need to package the UI so you can use it to generate the documentation site locally, run the following command:
$ gulp bundle
If any errors are reported by lint, you’ll need to fix them.
When the command completes successfully, the UI bundle will be available at build/ui-bundle.zip.
You can if necessary point Antora at this bundle using the --ui-bundle-url command-line option.
Or in local-antora-playbook.yml for Antora Author Mode, set the ui.bundle.url property to ../microprofile-tutorial-ui/build/ui-bundle.zip.
This is already done automatically by Github Actions.
It will generate an UI bundle tagged latest which is available as Latest UI bundle.
This bundle is in turn already referenced as ui.bundle.url property in antora-playbook.yml configuration file of MicroProfile Tutorial Playbook.
The live site can be found at https://microprofile.github.io/microprofile-tutorial/.
This project can also be built and deployed directly to GitHub Pages, which allows you to host the UI documentation directly from this repository.
To build the UI for GitHub Pages locally, run:
$ gulp github-pages
This will generate the complete site in the public directory, ready for GitHub Pages deployment.
The project includes a GitHub Actions workflow that automatically builds and deploys the site to GitHub Pages whenever changes are pushed to the main branch. The workflow:
-
Checks out the repository
-
Sets up Node.js
-
Installs dependencies
-
Builds the site using the
github-pagestask -
Deploys the built site to GitHub Pages
To enable GitHub Pages for your fork of this repository:
-
Go to your repository’s Settings tab
-
Navigate to Pages in the left sidebar
-
Under "Source", select "GitHub Actions"
Once deployed, your site will be available at https://[username].github.io/microprofile-tutorial-ui/ or at a custom domain if you configure one in the GitHub Pages settings.
This approach allows you to maintain both the UI bundle for Antora and a standalone documentation site from the same repository.
This project includes Dev Container configuration, making it easy to develop using Visual Studio Code Dev Containers or GitHub Codespaces. The development environment comes pre-configured with:
-
Node.js LTS
-
Gulp CLI for build automation
-
GitHub Actions extension for workflow management
-
AsciiDoctor extension for documentation editing