Today I decided to FINALLY create my personal page (the page you are reading right now) with a static page creation tool. I picked Hugo after some research. I liked the facts that it is fast, written in Go (I like Go!), it offers full customization and you don’t need to install anything apart from the application itself which is available in all platforms.

In the rest of the post, I want to share with you some of the instructions I have followed while creating the site.

Installation and initial setup

In my case, I had to execute:

sudo pacman -S hugo

Hugo has excellent documentation with all the details that you need to create and customize your page. Definitely read the Getting started section to get started with Hugo.

To create the hugo site you execute:

hugo new site <hame>

Congratulations! Your new Hugo site was created in /data/ubuntu/dimitris/git/hugo/testing.

Just a few more steps...

1. Change the current directory to ............./<name>.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

You already get some useful feedback from Hugo about the next steps. That’s nice!

cd <name>

What took me most of the time was to decide which theme to use. Picking one out of hundreds of themes at Hugo Themes was not easy. I would have liked some kind of better filtering there… but anyway. Once I realized that the order was according to GitHub Stars I visited the PaperMod theme. I wanted a theme offering Dark, Blog, and Minimal and this fitted my requirements. Its documentation seemed quite detailed so I took the decision to use it.

Following the documentation I executed:

git init

to initialize a git repository and then

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

to add the theme as a submodule inside the themes folder.

The site configuration can be either in a hugo.toml or hugo.yaml file. Hugo comes with a toml file. I decided to change the file to yaml syntax since I am more familiar with it. I deleted the hugo.toml file and created a hugo.yaml file with the following content:

baseURL: ""
languageCode: en-us
title: Dimitris Dranidis
theme: PaperMod

And now you have an empty site that you can test with:

hugo server -D

The -D is for draft pages to appear (more on this later). Keep this server running since hugo offers hot reload on all changes.

Notice the title of the site and the theme being used.

Content creation

Content creation is very easy. Just execute:

hugo new content posts/my-first-post.md

and Hugo will create a my-first-post.md file in the posts folder under the content folder. All your content is in markdown files that are organized within your content folder. The new file already has some metadata:

+++
title = 'My First Post'
date = 2023-11-12T22:40:04+02:00
draft = true
+++

which is generated by Hugo using the default.md template at the archetypes folder. As you can see this uses the toml syntax. You can edit the template to make it generate yaml as metadata.

Change the title of the metadata to whatever you wish to appear as title of your post and below the metadata add some markdown content. Save and and you can already preview at the running server.

Adding a menu

If you want a menu add the following to your hugo.yaml file:

menu:
  main:
    - identifier: posts
      name: Posts
      url: /posts/
      weight: 10
    - identifier: tags
      name: Tags
      url: /tags/
      weight: 20
    - identifier: search
      name: Search
      url: /search/
      weight: 30

Add the following metadata to your post: tags = ['tag1', 'tag2'] to display some tags. Visit the tags page.

NOTE

I noticed that sometimes the page might display an error or not reload properly. In these cases I found out that saving the hugo.yaml file resolves the problem.

Adding the Search page

The Search link will display a 404. Execute:

hugo new content search.md

to create it and then change its metadata to:

---
title: "Search" # in any language you want
layout: "search" # is necessary
# description: "Description for Search"
summary: "search"
placeholder: "start typing here ..."
---

Adding some intro

To add some intro to the home page add to the hugo.yaml file:

params:
  homeInfoParams:
    title: Some fancy text ...
    Content: This is my personal blog....
  socialIcons:
    - name: github
      url: "https://github.com/username"
    - name: linkedin
      url: "https://linkedin.com/in/username"

Change the url links to the correct ones.

Conclusion

Already looking good, isn’t it?

I think the developers of Hugo and of the themes have done some excellent work. I really like the fact that everything is a file and all the content is in markdown format.

If however there is something you don’t like, you can change the underlying html, css and js files to whatever you like.

For more customizations of Hugo and its theme read the extended documentation. Everything is explained in good detail.