How to Maintain a Blog with Hugo and GitHub

GitHub Pages is an excellent platform for hosting blogs. It allows you to maintain your blog using Git, making it particularly suitable for programmers, as most of us are familiar with Git.

Hugo is a great static site generator that lets you create static websites using Markdown files. This method is ideal for programmers since most of us are comfortable with Markdown.

This article will teach you how to maintain your blog using Hugo and GitHub.

Install Hugo and Git

First, you need to install Hugo and Git. You can install them using the following commands:

# Install Hugo
brew install hugo
# Install Git
brew install git

Create Two Repositories on GitHub

You need to create two repositories on GitHub: one to store the source files of Hugo, and another to store the static website generated by Hugo.

The repository for storing the generated static website should be named <yourname.github.io>. This repository is public and is used to store your Hugo source files.

Initialize the Website Project Locally

# Initialize the Hugo project
hugo new site <site-name>
# Initialize the Git project
git init
# Add the remote repository
git remote add origin <your-site-source-repo>

Create, Preview, and Edit Posts

# Create a post
hugo new posts/my-first-post.md
# Preview the site
hugo server -D

Change Themes

# Download the theme
git submodule add <theme-url> themes/<theme-name>
# Copy the configuration file
cp themes/<theme-name>/exampleSite/config.toml .

Configuration changes vary by theme, so refer to the theme’s documentation. For example, if you’re using the ‘hello-friend-ng’ theme, it is recommended to:

Place all posts in the content/posts directory.

Configure the config.toml file to modify the menu:

[[menu.main]]
  identifier = "about"
  name = "About"
  url = "posts/about"
  weight = 1
[[menu.main]]
  identifier = "site-building"
  name = "Site-building"
  url = "categories/hugo-site-building/"
  weight = 5

Publish the Website to GitHub.io

# Generate the static website
hugo
# Commit to GitHub
cd public
git add .
git commit -m "add new post"
git push origin master

You can then visit https://<yourname>.github.io to see your blog.

Reference Links:

Tutorial

How to Maintain the Site