Introduction

This is a guide to create a blog site using Hugo and Github Pages. Hugo is a static site generator written in Go. It is very fast and easy to use. Github Pages is a static site hosting service provided by Github. It is free and easy to use. You can use your own domain name with Github Pages.

Prerequisites

  • Hugo
  • Git
  • Github account
  • homebrew (for macOS)

The theme I am using is ananke

I am also using VS Code as my code editor.

Tutorials

The tutorials I am following are:

While I am typing the process, I have GitHub Copilot running in the background. It is a very interesting experience. I am simply following the prompts and see what it generates. I am not sure if I will use the generated code, but it is a good way to learn.

This is also based on macOS. If you are using other operating systems, please refer to the official documentations.

Initial setup process

install Hugo

brew install hugo

Create a new site

Create the directory structure for my project in the my-hugo-site directory.

hugo new site my-hugo-site

Initialize git repository

cd my-hugo-site
git init

Add a theme

Clone the Ananke theme into the themes directory, adding it to my project as a Git submodule.

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke

The theme I am using is ananke which is a very simple theme. I don’t know much Hugo themes, so I am using this one for now. Once I get more familiar with Hugo, I will try other themes.

Add theme to config.toml

echo 'theme = "ananke"' >> config.toml

run Hugo server

hugo server -D

View your site at the URL displayed in your terminal. Press Ctrl + C to stop Hugo’s development server.

Create a new post

Creating my first post.

hugo new posts/my-first-post.md

Setup Github Repository

Create a new repository

create a new repo in Github. I am naming it my-hugo-site.

run the following commands

git commit -m "my first commit"
git branch -M main
git remote add origin git@github.com:dandange8005/my-hugo-site.git
git push -u origin main

Adding new files to git

git add .
git commit -m "my second commit"
git push -u origin main

Adding .gitignore file

Go to gitignore.io and create a .gitignore file for Hugo.

Deploy to Github Pages

How to deploy to Github Pages is documented in Host on Github.

I am using Github actions to deploy to github pages.

Custom domain

How to apply custom domain is documented in Custom Domains.

Working with Hugo themes

  • How to change to a new theme
  • Choosing a theme
  • applying a theme
  • making changes to a theme
  • working with the theme’s config.toml

Changing to a new theme

git submodule deinit themes/ananke
git rm themes/ananke
git submodule add

Choosing a theme

Themes I am considering:

What else can I do?

  • Changing to a new theme
  • Adding a menu
  • Adding a page
  • Adding tags to my posts
  • Learn Hugo shortcodes to insert multimedia content