ZeStig's blog
443 words
2 minutes
Setup a simple blog using GitHub Pages and Hugo

Blogs are a great way to share your thoughts, ideas, and experiences with the world. They can be used for personal or professional purposes, and there are blogs on just about every topic imaginable.

Hugo is a popular static site generator that can be used to create blogs, websites, and other types of online content. It is known for its speed, flexibility, and ease of use.

In this blog post, I will walk you through the steps of creating a blog with Hugo. I will assume that you have some basic knowledge of Git and the command line.

Install hugo and git#

I use Arch BTW, and so i can install Hugo and Git from the Arch repositories. Instructions vary depending on OS and GNU/Linux distribution.

sudo pacman -S hugo git

Repo creation#

The next step involves creating public repos on GitHub. I’ll be creating 2 repos, a non-empty repo for GitHub Pages deployment and the other for storing the blog itself. For beginners, I recommend creating these repos from the web interface rather than the commandline, but feel free to do it in any way you please.

After the repos are created, clone them to your local machine:

cd ~/Git/ # an arbitrary directory where all my Git repos live
git clone https://github.com/zstg/blog.git
cd blog

Now it’s time to fire up the website template!

hugo new site zstgblog # choose any name, doesn't have to be zstgblog ;)
cd zstgblog/

I like this particular Hugo theme, so I’m fetching it too…

# Note that I'm still inside the zstgblog directory.
git submodule add https://github.com/panr/hugo-theme-terminal themes/terminal

Next, add/modify zstgblog/hugo.toml{.verbatim} like so: (obviously, replace with the name you’d provided earlier, and modify the details below to your liking)

baseURL = 'https://zstg.github.io/'
languageCode = 'en-us'
paginatePath = "page"
showMenuItems = 0
theme = "terminal"
[params]
  themeColor = "blue"
  # fullWidthTheme = true
  centerTheme = true

[params.logo]
   logoText = "Stig's blog"
   logoHomeLink = "/"

Cool. Now we can start creating and uploading posts as we please! Run this (in the same working directory) to create a MarkDown, HTML or Org file, where your blog will be stored.

hugo new posts/nameOfFile.md

Edit content/posts/nameOfFile.md and add a brief intro to your post.

Next, make the GitHub Page repo (https://github.com/username/username.github.io) a Git submodule of the current repo. This is done to ensure that this repo can be used for GitHub Pages.

# Ensure that you're in the zstgblog directory
git submodule add https://github.com/zstg/zstg.github.io.git public

We can now deploy this repo to GitHub and it will automatically be converted to a proper GitHub page powered by Hugo.

# in zstgblog
# git rm -r --cached public
hugo 
cd public
git add .
git commit -am "Add new content"
git push
cd ..
git add .
git commit -am "Rebuilt website"
git push

References