Using the Template

The easiest way to create a gallery-ready theme is to start from our template repository.

What’s Included

The template provides:

  • Sample Antora content - Documentation that showcases all UI elements

  • Pre-configured GitHub Action - Automatically builds and deploys your preview

  • Screenshot generation - Creates preview.png on every push

  • Standard structure - Everything in the right place

Creating Your Theme

Step 1: Use the Template

  1. Go to the-dev-center/antora-theme-template

  2. Click btn:[Use this template] → btn:[Create a new repository]

  3. Name your repository (e.g., my-antora-theme)

  4. Make it Public

  5. Click btn:[Create repository]

Step 2: Enable GitHub Pages

  1. Go to your new repository’s Settings

  2. Navigate to Pages in the sidebar

  3. Under "Build and deployment":

    • Source: GitHub Actions

  4. Save

Step 3: Customize Your Theme

Clone your repository and modify the UI source files:

git clone https://github.com/yourusername/my-antora-theme.git
cd my-antora-theme
npm install

Key files to customize:

Directory Purpose

src/css/

Stylesheets - colors, typography, layout

src/layouts/

Page templates (default.hbs, 404.hbs)

src/partials/

Reusable components (header, footer, nav, toc)

src/js/

Client-side JavaScript

src/helpers/

Handlebars helpers

Step 4: Preview Locally

# Build the UI bundle
npx gulp bundle

# Build the preview site
npx antora antora-playbook.yml

# Open build/site/index.html in your browser

Step 5: Push Changes

git add .
git commit -m "Customize theme"
git push

The GitHub Action will automatically:

  1. Build your UI bundle

  2. Generate the preview site

  3. Deploy to GitHub Pages

  4. Create preview.png

Your preview will be available at: https://{username}.github.io/{repo-name}/

Next Steps

Once your theme is ready:

  1. Verify your preview site is working

  2. Check that preview.png exists in your repo

  3. Submit your theme to the gallery