About

This guide assumes that you’re already familiar with GitHub Pages.

The setup Zine action

Zine has an official GitHub action to obtain Zine in a GitHub Actions runner which can be found here.

In the example below we will use it to have the GitHub Actions runner build your Zine website before deploying to GitHub Pages.

GitHub Actions Workflow

To make this work you will need to enable GitHub Pages and set it to deploy from GitHub Actions.

1. Navigate to the Settings page of your website’s repo
2. Select the “Pages” tab from the vertical menu on the left of the page.
3. In the GitHub Pages settings page select as source of deployment “GitHub Actions”.

After you select the right dropdown menu entry, GitHub will immediately save your changes.

Once that’s done, you can now add a new GitHub Actions Workflow file in your repository:

.github/workflows/gh-pages.yml

name: Deploy the website to Github Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0  # Change if you need git info

      - name: Setup Zine
        uses: kristoff-it/setup-zine@v1
        with:
          version: v0.10.1

      - name: Build
        run: zine release

      - name: Setup Pages
        uses: actions/configure-pages@v5

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: 'public'

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Once you commit and push this new file, you should be able to see in the “Actions” tab of your repository a new job being run.

On success, your website will have been deployed to GitHub Pages.

If you encounter any issue, or to learn how to setup a custom domain, please refer the official GitHub Pages documentation.