How to Create a Workflow for HUGO Website hosted on GitHub Pages

Creating websites should be an easy task that takes a little effort. I used to build my own website from scratch using HTML, CSS, and JS. Though I have learned a lot from that, it was a time-consuming process; so, I was looking for a better approach to save time.

Then I came across HUGO, it's basically a framework to create websites, and it works fantastically. We can just write content on Markdown files and run Hugo command to generate a website automatically. Moreover, there are a great selection of themes available.

Now, I had a website ready to be deployed. Where should I host it? Of course, I did not want to spend a dime and keep paying for hosting. Eventually I decided to use GitHub Pages where you can host your content directly from your repository.

I had a website in a repository ready to go. However, my website was not generated automatically when I commit changes to the repository. That's when GitHub Actions came into play.

My Workflow

My purpose was to re-generate the website every time I commit changes to the repository; by this way, my content will be up-to-date.

Luckily, there is a workflow for it. By implementing peaceiris/actions-hugo@v2 on my GitHub workflow, I was able to achieve what I wanted to do. Simple as that.

This workflow saves me a great deal of time, and helps me focus more on actual development.

Submission Category:

Wacky Wildcards

Yaml File or Link to Code

https://github.com/nat236919/nat236919.github.io

name: github pages

on:
  push:
    branches:
      - main  # Set a branch to deploy

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify

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