Build and Deploy Hugo Generated Web Site with GitHub Actions and GitHub Pages

Build and Deploy Hugo Generated Web Site with GitHub Actions and GitHub Pages

okuzawats
okuzawats

Here I note how to build and deploy hugo generated web site with GitHub actions and GitHub pages. As a prerequisite, I’m GitHub Pro user and have some flexibility of GitHub pages feature.

Define Workflow

Here is my workflow of GitHub actions to build and deploy Hugo generated web site. I used actions-hugo to deploy. I changed the published directory from default to docs, so I specified it as publish_dir: ./docs. Also, I need CNAME file so generate it between building and deploying.

name: github pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "0.78.2"

      - name: Build
        run: hugo --minify

      - name: Cname
        run: echo 'your cname here' > docs/CNAME

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./docs

After pushing to main branch, this workflow runs and deploy starts. The generated files are commited to gh-pages by default. Or you can specify it by adding publish_branch: your-awesome-branch-name. Also, you have to define source branch as gh-pages (or your awesome branch name) and source directroy as root in repository setting page.