2024 New Blog Theme

This blog is managed in a private git repository. Posts are created in markdown format and a program called Hugo takes those files and generates a set of HTML and CSS files necessary to run a website on a web server. Instead of using a Hugo theme made by someone else, I have created my own theme that is more lightweight and I will be able to maintain.

Previous theme

The previous theme used:

There is an a previous post that walks through configuring this blog with that old theme.

New theme

The content for this blog is all in markdown files. After a few changes to config files, the new theme applies to the existing blog and retains the content from before. Below I can walk through creating a blog themed site with Hugo and the theme used by this site.

ajsTheme

I have created a theme using bootstrap and it is available on GitHub

Example blog

I have uploaded an example hugo blog on my personal gitlab profile. Check that out for the theme configuration.

Prerequisites: Hugo and git

• Hugo: Installing documentation
• Git: Getting started installing git

Both of these programs are available for macOS, Linux, and Windows.

Optional: Create a new site

Once hugo is installed, create a new site by typing the following command into your shell:

1

hugo new site example_blog

This will create some new directories for use with hugo.

Alternative

Alternatively, you can download the example blog from my GitLab. If you do that do not run the command above to create a new site.

Add a theme to the site

Now that the skeleton structure of the site has been created, here is how to add the same theme that is used by this blog:

1
2
3

cd example_blog
git init
git submodule add $giturl themes/$themename

Replace $giturl with the git url of the theme you want to use. The theme I created can be used.

Replace $themename with the name of the theme you have chosen. Usually this would be the name of the git repo for the theme.

In powershell the commands should be the same but always press TAB when entering the name of a file or directory for the shell to auto-complete you command.

Configure the site

The default config file config.toml can be deleted. Next create a directory called config and then _default within.

1
2

rm config.toml
mkdir -p config/_default

In powershell:

1
2
3

Remove-Item '.\config.toml'
New-Item -Path '.\config'
New-Item -Path '.\config\_default'

Within this new directory, create files to configure the hugo theme:

• config.toml : This is the main hugo configuration.
• menus.toml : This is the config for toolbar menu on the site.

config.toml

Basic example that is included in the git repo:

1
2
3
4

baseURL = "http://blog.example/"
languageCode = "en-us"
title = "Example Blog"
theme = "ajsTheme"

Add content

In this example, new pages in English are added to the directory content. The first file added should be _index.md.

1
2
3
4
5

---
title: "Posts"
date: 2020-10-20
description: All posts
---

Create a new post:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

---
title: Hello world!
author: aj
date: 2021-04-10T22:43:20+00:00
categories:
  - Homelab

---
This is my first post.
This blog will be focused on hybrid cloud technologies.
Stay tuned for more.

Updating theme

A theme for Hugo sites can be a git submodule that is updated with the following command:

1

git submodule update --remote --merge

Test the site

Run the following command to test the site on your local machine. The web server will be available at localhost port 1313.

1

hugo server -D

You can view the site in your browser:

http://127.0.0.1:1313

Dark theme:

Conclusion

I plan to continue developing the theme. Some features that I am looking to add:

1. Search function
2. Refine style of metadata like tags and categories.
3. Eventually move away from bootstrap framework to something more lightweight.
4. Post view should show an image from the post