How I Made This Webpage (Part 2)

Creating Your Website in Hugo

Posted by Mohd Shah on Sunday, July 24, 2022

Welcome back

In Part 2 of this guide we will be looking at how to build your website using Hugo.

The only pre-requisite that you’re going to need before we get started on Part 2 will be to have a GitLab account.

Of course, you can do this with GitHub but this guide will be focused on using GitLab Pages to host our repository and our static site.

Building Your Website

Begin by checking if your Hugo installation was successful.

hugo version

Then, create your new Hugo webpage directory. You can name the folder whatever you like, we will be changing it later in GitLab in order to host it using GitLab pages.

hugo new site my_new_site

Move into your new Hugo webpage directory and initialise it as a git repository.

cd my_new_site
git init

From here we can begin to create our new webpage, however, it is a little barebones but thankfully Hugo has a wonderful curated list of themes that you can use.

Visit to find one that speaks to you or if you don’t mind paying a little extra, you can visit the poorly named to purchase professionally built themes.

To install your theme of choice, use the command below to store a git repo of it within a themes folder in your directory.

git submodule add themes/hugo-tranquilpeak-theme

The theme that we will be using for this guide is the Trainquilpeak theme by Thibaud Leprêtre and Louis Barranqueiro (LouisBarranqueiro) because it is well documented and has various improved CSS features that makes the UX much nicer.

However, if you’re interested in the same theme that I’m currently using, it’s called Clean White and it was built by the wonderful Zhao Hua Bing.

For more information on building your first Hugo site please visit the official Hugo Quickstart page for a quick guide on how to get started.

Now you should have the file nested like so,

Themes folder
Themes folder

Copy the sample webpage content stored within the examplesite folder and paste it in the root directory, when prompted to replace click yes.

Copy to root the sample content and config.toml
Copy to root the sample content and config.toml

If you’ve done it right, your root content folder will be populated with some sample posts.

Sample post within root content folder
Sample post within root content folder

These posts are written in Markdown, a language that most programmers should be familiar with, and if you’re not, you can always go through the sample posts to understand how the Markdown syntaxes gets translated into the content of your webpage.

Now let’s view our new site using the server command, which will locally host the Hugo site at http://localhost:1313/ so that we can work on it.

hugo server
Changes made to config.toml will be reflected here
Changes made to config.toml will be reflected here

Any changes made to the config.toml or the .md file within the content folder will immediately be reflected on here, making it a great playground for you configure your website before it goes live.

To better understand the structure of the Hugo framework I recommend watching this awesome tutorial by Adi Purdila from Envato Tuts so that you can better personalise your website.

The key changes on your site are usually done through the config.toml file, here the baseURL parameter is something you should keep note of as we will be coming back to this later.

Get comfortable  with the config.toml file
Get comfortable with the config.toml file

The Tranquilpeak theme has its setting to display your information under the Author subheading in the config.toml file shown in the image below.

Change user information here
Change user information here

Changing it here will automagically change it on your locally hosted site as well.

Customise and explore the settings
Customise and explore the settings

Next lets looks at how the .md Markdown files are structured.

Change tags and cover picture for your post
Change tags and cover picture for your post

Each post is decorated with meta information between two --- at the top of the post.

Information such as tags, title, date, categories, thumbnails, cover image and etc. can be define here and be reflected on the hosted webpage.

Any new post that you create should include these decorators in order for Hugo to organise and curate your post.

Visit the GitHub page of the theme that you’re using, such as the one for Trainquilpeak theme and you will find useful information on how to add a comment section to each post or a search bar on your landing page.

Once you have customised your webpage to your liking, we can begin to push the repo to a GitLab or GitHub account and host the website there.

Which we will cover in Part 3…

comments powered by Disqus