How to Build Your Personal website with Hugo

Introduction

Building a personal website in an era where dynamic websites were the norm, used to demand a lot of professional skills (such as writing back-end programs, designing front-end user interfaces,, and database management, etc.) .

Various expert technical requirements have increased the barrier to entry for users who want to develop a website.

Static site technology, a substitute approach, is therefore receiving more and more attention. It has less technical requirements(no more back-end or databases stuff), and renders far faster than dynamic websites.

The difficulty of creating websites has further decreased with the introduction of static website generators. With them, website builders only need to focus on creating the website’s content and don’t have to worry about front-end technologies (such as HTML, CSS, and JavaScript).

I’ll use Hugo as our static site generator in the following tutorials, and show you how to develop a simple site with Hugo. The sample site will be deployed to GitHub Pages for public access.

Build Your Site

Prerequisites

This tutorial assumes that you already have：

• an account on GitHub
• installed Git on your system
• installed any editors that support Markdown format(optional)

You can check whether you have git installed by typing git --version. If your terminal returns a Git version as an output, that confirms you have Git installed on your system.

1
2

$ git --version
git version 2.30.1 

Install Hugo

If you are on macOS and using Homebrew, you can install Hugo with the following one-liner; Or download the appropriate version for your platform from Hugo Releases.

1

brew install hugo

If you are on a Windows machine, you can download the appropriate version for your platform from Hugo Releases.

Type hugo version to verify whether hugo runs correctly

1
2

$ hugo version
hugo v0.95.0+extended darwin/arm64 BuildDate=unknown

Create a New Site with Hugo

Firstly, Decide on the location and create a site namedmy-first-website.

1
2

$ hugo new site my-first-website
Congratulations! Your new Hugo site is created in ......

Now, Hugo’s CLI scaffolds created a directory my-first-website with the following elements:

1
2
3
4
5
6
7
8

my-first-website
├── archetypes  //where you can customerize preconfigured front matter fields
├── config.toml //hugo config file
├── content     //All content for your website will live inside this directory
├── data        //This directory is used to store configuration files that can be used by Hugo when generating your website
├── layouts     //Stores templates in the form of .html files that specify how views of your content will be rendered into a static website
├── static      //Stores all the static content: images, CSS, JavaScript, etc.
└── themes      //Stores your site's themes

Add Some Content

Use hugo new to create a new content file

1
2

$ hugo new posts/my-first-post.md
Content ".../my-first-website/content/posts/my-first-post.md" created

Then we add some content to this file

1
2
3
4
5
6
7
8

$ vim content/posts/my-first-post.md
---
title: "My First Post"
date: 2022-06-07T08:25:08+08:00
draft: false
---
## My First Post
> Hello everyone, this is my first post

Choose a Theme

Once finishing adding content，we need to choose a theme to tell Hugo how to render our Markdown files to web pages we can see from a browser. This tutorial uses the Ananke Theme.

First, download the theme from GitHub and add it to your site’s themes directory:

1
2
3

$ git config --global init.defaultBranch main
$ git init
$ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Then, add the theme to the site configuration:

1

$ echo theme = \"ananke\" >> config.toml

Start the Hugo server

Now, start the Hugo server to see your website.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

$ hugo server

Start building sites … 
hugo v0.95.0+extended darwin/arm64 BuildDate=unknown

                   | EN  
-------------------+-----
  Pages            | 10  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  1  
  Processed images |  0  
  Aliases          |  1  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 34 ms
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

Access to your new site at http://localhost:1313/.

Set the BaseURL

Before deploying our site on GitHub pages, we update the baseURL in config.toml.

1
2
3
4

baseURL = 'https://username.github.io/my-first-website/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = "ananke"

Generate static pages

Output pages will be in ./public/ directory by default. We set the publishDir to ./docs to change the output directory.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

$ echo publishDir = \"docs\" >> config.toml
$ hugo

Start building sites … 
hugo v0.95.0+extended darwin/arm64 BuildDate=unknown

                   | EN  
-------------------+-----
  Pages            | 10  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  1  
  Processed images |  0  
  Aliases          |  1  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 48 ms

Deploy Your Site on GitHub Pages

Create a GitHub Repository

First，click + to create a new repository

Name the repository my-first-website without creating a README file.

Now, we copy the URL (Starting with git@).

Push Your Site to the New Created Repository

1
2
3
4
5

$ git add .
$ git commit -m "init the site and push a new post"
// replace $(YOUR_GIT_URL) with the URL you copied above.
$ git remote add origin $(YOUR_GIT_URL)
$ git push --set-upstream origin main

Your repository should look like this, if you pushed your site successfully.

Configure GitHub Pages

Click Settings->Pages to configure your site on GitHub pages.

Then, choose branch main and docs as sources. Save the configuration to automatically deploy your site.

Access Your Site on GitHub Pages

Finally, we can access the site at https://username.github.io/my-first-website/.