Introduction

This article shows how I built a personal site on GitHub Pages using Hugo and GitHub Actions.

Prerequisites

1. GitHub account
2. SSH key pair for pushing code

Basic familiarity with Git is assumed.

Choose a Theme

Hugo’s community offers many themes. I picked Stack by Jimmy Cai.

Initialize the Project

1
2
3

hugo new site my-blog
cd my-blog
git init

Add the theme as a submodule and copy example content if needed.

Writing Posts

Create new articles with:

1

hugo new posts/first-post.md

Write markdown content under content/ and store images in assets/ or static/.

Automating Deployment

Set up a GitHub Actions workflow that builds the site and pushes the public/ folder to gh-pages:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

name: Deploy
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: latest
      - run: hugo --minify
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

Conclusion

With Hugo and GitHub Actions you can quickly create and deploy a static site for notes or blogging.