How This Website Was Built 2 -- Hugo Framework for Personal Blog Website

This website is running on my personal computer. Here is how this website was built.

Motivations

After purchasing a domain name, I was considering to build a personal website using the domain name. At first I tried using Hexo as a static website generator. I would like to build a bilingual website (Chinese and English). However, Hexo does support multi-lingual natively. I have to use some extensions such as hexo-generator-i18n, etc. And I met tons of issues when building the bilingual website. Therefore I gave up and turned to Hugo.

Hugo is a static website generator developed in Go language. It is famous for its amazing speed. But I chose it because of its native support for multiple languages. For more details about Hugo’s feature, you can visit its official website https://gohugo.io. There is also a brief introduction to Hugo in the “About” page in this website.

Prerequisite

A Linux computer (as private server)
nginx (as HTTP server)
Go language runtime environment
Hugo (a static blog framework)
A personal domain (refer to the 1st post of this series “How This Website Was Built 1 – Purchase and Configure a Personal Domain Name” for details)

Website Server Configurations

This website uses nginx as HTTP server. The serving computer uses deepin OS and the blog framework uses Hugo。

Install and Configuring nginx

Install nginx
1

sudo apt install nginx
Enable nginx Service
1

sudo systemctl enable nginx

Install and Configure Hugo

After using apt or snap to install Hugo, an error “port 1313 already in use” occurred. So I turned to use “deb” package to install it directly. First, download the latest “deb” package that applicable for Debian-based OS on the Release page of Hugo’s GitHub repo. It’s better to download the “extended” version. For example, I downloaded hugo_extended_0.92.2_Linux-64bit.deb. Then install it using dpkg package manager:
1

sudo dpkg -i hugo_extended_0.92.2_Linux-64bit.deb
Using following command in the terminal to check the installation
1

hugo version
Initialize the website. Create a directory in your local serving computer to store your website. For example, the path to the directory can be ~/Documents/www/
1

mkdir -p ~/Documents/www
Then new a site with Hugo. Say it’s called website1:
1 2

cd ~/Documents/www hugo new site website1
With above command, Hugo will create a website template under directory ~/Documents/www/website1.
Local browser test. Run following command in terminal:
1

hugo server
Then open a browser on you local computer. Enter the default url http://localhost:1313. If the default website displays in your browser, it means the configurations are correct.

Binding the Website with a Domain Name

So far, your website can only be reached through http://localhost:1313 on your local computer. If you want it to be reached by anyone in the world, you need to assign it a domain name.

Create a configuration file for nginx to bind the local files of the website to a domain name. To avoid contaminating nginx’s original configurations, you can create a new configuration file:
1 2 3

cd /etc/nginx sudo mkdir vhost sudo touch blog.conf
Above commands will create a configuration file blog.conf for our website in /etc/nginx/vhost directory. Then enter following content in blog.conf (Note that you need sudo privilege to edit this file):

server{
listen 80;
root /home/YourUserName/Documents/www/website1/public;
server_name www.your.domain.name;
location /{
}
}

Note that above configurations will point your domain name to the public folder in directory ~/Documents/www/website1, instead of the whole website1 directory. It’s because that you would not like to expose some private files.

If you would like to assign a domain name to your other websites, you can do it in a similar way.
To assure that nginx can find the configuration file /etc/nginx/vhost/blog.conf you created, you need to include it in nginx’s default configuration file /etc/nginx/nginx.conf. Find the block for http settings in /etc/nginx/nginx.conf. And insert the following line in the block:

include /etc/nginx/vhost/*.conf

This will let nginx read the configuration file in /etc/nginx/vhost automatically. After the nginx service is reloaded, your domain name will be pointed to the website directory.
Reload nginx service and deploy the website using Hugo:
1 2 3

sudo nginx -s reload cd ~/Documents/www/website1 hugo -D
Thus, you can use your domain name (for example, http://www.your.domain.name) to visit your website!

Configuring the SSL Certificate

After above configurations, your website can be accessed via HTTP protocol by the users from worldwide. HTTP is an abbreviation of Hyper Text Transfer Protocol. The content transferred via HTTP is in plaintext, which causes some security issues. Currently most websites are using the safer HTTPS protocol. And the website using HTTP might be restricted by many browsers. When a user visits your website, he/she might receive some safety warnings from the browser. And the ranking of your website will be lowered by the search engines. Therefore, it’s necessary to upgrade your website to HTTPS.

HTTPS protocol depends on SSL encryption, which requires an SSL certifiacte. Many SSL certificate application are not free. But there’re still some ways to get free SSL certificate. For example, ZeroSSL can provide free SSL certificate.

Create a ZeroSSL Account

Go to ZeroSSL’s official websitehttps://zerossl.com and create a personal account.

Use acme.sh Generate and Periodically Update SSL Certificate

The SSL certificate generated directly on ZeroSSL usually expires in 60 to 90 days. Therefore, if you generate an SSL certificate on their website, you need to regenerate after some time. The good news is that some developers have developed some tools to apply and update SSL certificate automatically from ZeroSSL. The tool is acme.sh. Referring to the instructions, you can install an SSL certificate for your local server.

Please refer to the instructions of acme.sh for detailed instructions. Here we only show what we need for this website.

Install acme.sh

1

curl  https://get.acme.sh | sh -s email=[email protected]

Since we are using Alibaba Cloud’s domain name, we choose to generate SSL certificate through Aliyun domain API. The detailed instruction can be found in the wiki of acme.sh. To be short, we need to use the API provided by Alibaba Cloud (i.e., the Access Key we mentioned in the 1st post of this series “How This Website Was Built 1 – Purchase and Configure a Personal Domain Name”). You can login to Alibaba Cloud and get a new Access Key, or you can use the one you obtained previously.
Export the Access key as the system variable Ali_Key and Ali_Secret using following command (Again, note that do NOT leak the information to others):
1 2

export Ali_Key="sdfsdfsdfljlbjkljlkjsdfoiwje" export Ali_Secret="jlsdflanljkljlfdsaklkjflsa"
Then use following command to generate the SSL certificate:
1

acme.sh --issue --dns dns_ali -d your.domain.com -d www.your.domain.com

Copy/Install the SSL certificate to where you need to use it. By default, the certificates generated by acme.sh are located at ~/.acme.sh/. But usually you need to copy them to a another destination directory. For example, you can copy them to the private folder of your website:

1
2
3
4


acme.sh --install-cert -d your.domain.com -d www.your.domain.com \
--key-file /home/YourUserName/Documents/www/website1/private/key.pem \
--fullchain-file /home/YourUserName/Documents/www/website1/private/cert.pem \
--reloadcmd "sudo service nginx force-reload"

After copying the certificate using above command, the nginx service will be reloaded to make HTTPS valid. It requires your sudo password.

Modify the configuration file of nginx to support HTTPS protocol. You can add following content in the nginx configuration file /etc/nginx/vhost/blog.conf (note that you need sudo privilege to edit the file):

server{
listen 443;
ssl on;
ssl_certificate /home/YourUserName/Documents/www/website1/private/cert.pem;
ssl_certificate_key /home/YourUserName/Documents/www/website1/private/key.pem;
root /home/YourUserName/Documents/www/website1/public;
server_name www.your.domain.name;
location /{
}
}
Reload nginx Service
1

sudo nginx -s reload
Then you will be able to use HTTPS protocol to visit your website. You can try to enter your domain name starting with https to visit your website on other computers (For example, https://www.your.domain.name)!