Creating Personal Website Using Hugo

Mingxuan Yang
Aug 22, 2020 4 min read Github, Hugo, Personal Website

Introduction to Hugo

Hugo is one of the most popular open-source static site generators. With the ability of generating most websites within seconds, it provides the users with the world’s fastest framework for building personal websites.

The installation and deployment of Hugo are simple and efficient. With just 7 simple steps, we can easily use Hugo to build our own personal websites. Before introducing the 7 steps, the reader needs to get a Github account. The following instructions are based on the assumption that the users already have their personal Github accounts. If you don’t have a Github account, please go to the Github website and create one.

Our goal in this blog is to start a personal website on Github Pages using Hugo.

Step 1: Install Homebrew and Go

As a mac user, all of the following instructions will be based on macOS environment.

Before installing Hugo on macOS, Homebrew and Go are needed. Homebrew is an open-source software package manager that makes it easier to install software on macOS and Linux, and Go is an open source programming language that makes it easy to build simple, reliable, and efficient software. These are two important tools to install Hugo. If you already have them on your computer, you can skip to Step 2.

To install Homebrew, just paste the following code in a macOS Terminal.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

After installing Homebrew, we can run the following code in the macOS Terminal to install Go.

brew install go

Step 2: Install Hugo

With the installation of Homebrew and Go, installing Hugo can be a simple task. Just type the following command in the Terminal.

brew install hugo

If you are curious whether you have already installed Hugo, just check with the following code.

hugo version

If something like this appears, the installation is successful.

Hugo Static Site Generator v0.74.3/extended darwin/amd64 BuildDate: unknown

Step 3: Choose a theme

It is exciting to know that Hugo has already prepared for us with plenty of pre-made, open-sourced themes which are quite abundant and can satisfy most of our needs for building a personal website. With all of the themes provided at the official website Hugo themes, what we should do first is selecting one that is appropriate for our usage. As for me, I chose Academic theme for my website.

Step 4: Create my website

Academic theme is an excellent choice due to the detailed instructions provided by the official website. After choosing the Academic theme, we can construct the website frame based on the instruction page. In this project, I have chosen Netlify to deploy my website due to its efficiency and easy manipulations. All of the procedures are detailedly given here. Following it will lead us to a beautiful template website at https://user_name.netlify.app, and the corresponding folers and files are shown on the Github page https://github.com/user_name/starter-academic. Please remember to change the user_name part to your specific Github name. The resulting framework will look basically like this:

~/Desktop/mysite
└───archetypes
│   └───default.md
└───config.toml
└───content
└───data
└───layouts
└───static
└───themes

We can continue to set up configurations or customizations based on the instructions. Most of these changes will happen in content folder and config.toml file. There are numerous choices provided by Academic theme, which is one of its huge advantages.

Step 5: Update website

For more convenient editting, we can clone the Github repository to our personal computer and then make modifications. The cloning process can be obtained by the following code and the resulting folder will be named mysite.

git clone https://github.com/user_name/starter-academic mysite
cd mysite

To see what our website looks like currently, we can test the site locally by running the following commands.

hugo server

The Terminal will show like this

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

Built in 244 ms
Watching for changes in /Users/ymx/Desktop/mysite/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/ymx/Desktop/mysite/config.toml
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)
Press Ctrl+C to stop

According to the instructions, we can go to http://localhost:1313/ through our web browser and our personal website will appear. Based on the result, we can proceed to make some customized changes to the content folders as well as the config.toml file. These changes are expected to appear at http://localhost:1313/ immediately. When we finish testing, just press Ctrl+C to exit.

When the changes are desirable, the following code will make them automatically appear on our website https://user_name.netlify.app after about 10 minuates.

git add .
git commit -m "some changes"
git push --set-upstream origin master

Thanks for reading this tutorial. Now let’s enjoy our fantastic website!

Github Hugo Personal Website
Next