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!
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:
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
The site configuration can be either in a
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:
title: Dimitris Dranidis
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.
title of the site and the
theme being used.
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
- identifier: posts
- identifier: tags
- identifier: search
Add the following metadata to your post:
tags = ['tag1', 'tag2'] to display some tags. Visit the tags page.
I noticed that sometimes the page might display an error or not reload properly. In these cases I found out that saving the
hugo.yamlfile resolves the problem.
Adding the Search page
Search link will display a
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"
placeholder: "start typing here ..."
Adding some intro
To add some intro to the home page add to the
title: Some fancy text ...
Content: This is my personal blog....
- name: github
- name: linkedin
url links to the correct ones.
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.