How to set up a blog with Hugo and GitHub Pages in 10 minutes

Fri, 03 Feb 2023 15:04:11 +0200

So you want to set up a blog. Here is how to do it in 10 minutes or less. For me, it took a little more time, just to make sure for you it would not. And actually, even for me, most of the time was used to write this post.

So here we go, you have 40 for each step.

Create GitHub account if you do not have one yet
Create new GitHub repository named <your GitHub username>.github.io
On your local development environment, create a folder to work in, run npm install hugo-bin --save-dev to install Hugo CLI
Clone your GitHub repository under the same directory git clone https://github.com/<your username>/<your username>.github.io.git
Run npx hugo new site <your username>.github.io
Navigate to the repository root directory cd <your username>.github.io
Add a theme as Git Submodule: git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
Update config.toml by adding the theme = 'PaperMod' option (and add a name for the site while at it)
Also update config.toml with your own baseUrl, e.g. baseURL = 'https://<your GitHub username>.github.io/'
Run npx hugo new posts/initial-post.md
Edit the initial post and when ready to publish, remove the draft tag

Add the following into .github\workflows\gh-pages.yml file in the repository

name: github pages

on:
push:
    branches:
    - main  # Set a branch that will trigger a deployment
pull_request:

jobs:
    deploy:
        runs-on: ubuntu-22.04
        steps:
        - uses: actions/checkout@v3
            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
            if: github.ref == 'refs/heads/main'
            with:
            github_token: ${{ secrets.GITHUB_TOKEN }}
            publish_dir: ./public

Create a branch named gh-pages in GitHub
Check which branch is used for GitHub pages publishing in your GitHub repository, set it to gh-pages
Set in GitHub Settings > Actions > General: Workflow permissions to Read and write permissions
Push to Git remote using the main branch
Make sure the deployment went smoothly, and enjoy the result in https://<your GitHub username>.github.io

GitHub Pages on Arto's dev time by-products

How to set up a blog with Hugo and GitHub Pages in 10 minutes