Introduction
During the last few years, I have started several blogs (not much success, it must be said). A technology one, my photography web, and a blog with personal matters, which I decided to close. All of them were made with the same CMS platform: WordPress.
WordPress has some advantages, such as its ease of use or the great community behind it. However, I was tired of the huge amount of resources I needed to deploy the CMS and give a good experience to the readers of my blog. It is needed to install a MySQL database, deploy PHP on the server, and install several plugins on WordPress to optimize the experience.
Then I looked for alternatives to WordPress and I found Hugo.
What is Hugo?
As mentioned on the official reference site, Hugo is a static site generator written in Go, and designed to make website creation fun again.
What I love of Hugo is the performance it gives to the web. The speed at which the web loads is amazing… and in this world in which we want everything the faster the better, I believe this is something quite important.
Besides is easy to configure and start writing a blog… I love writing my blog using a terminal and a SSH connection; it’s so simple!
Prerequisites
A machine with a Linux system, which will be the web server. You could use a Raspberry Pi, however, for a web server, I recommend a VPS because of its stability. With DigitalOcean, you can have a VPS for $4/month. It’s worth.
A domain. It’s necessary to have a domain to run a website. There are several domain registration companies that offer name services, such as Namecheap or GoDaddy.
Install and Configure NGINX
Firstly, we have to install the web server, in our case we are going to use NGINX. As I have Ubuntu in my server, I will use apt to install NGINX, but you could find on pretty much every default repository.
sudo apt install nginx
Then we are going to create the configuration file (please, note I have used mysite and mysite.com as an example).
cd /etc/nginx/sites-available
cp default mysite
vi mysite
The configuration will have more lines, but it should look like this:
server {
listen 80;
listen [::]:80;
server_name mysite.com www.mysite.com;
root /var/www/mysite/public;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
Once the configuration is done, we have to enable it by creating a simbolic link into sites-enabled.
sudo ln -s /etc/nginx/sites-available/mysite /etc/nginx/sites-enabled/mysite
To check the config, we can do it by executing this command:
sudo service nginx configtest
If the config is OK, then we can start and enable NGINX.
sudo systemctl start nginx
sudo systemctl enable nginx
Adding SSL
SSL encryption nowadays is a basic in any website. If a website doesn’t support SSL encryption, current browsers will mark the web as insecure, and it will lose most of its traffic. In order to add SSL to the website, we are going to use Let’s Encrypt.
Let’s Encrypt is a free, automated, and open certificate authority: it lets you create and install free TLS certificates in your web server with a few command-line arguments. With Let’s Encrypt, you can provide HTTPS on your website for every user without spending money or worrying about renewal dates.
Certbot
First step is to install certbot, and the NGINX pluggin.
sudo apt install certbot python3-certbot-nginx
And now you can generate the certificate for your site:
sudo certbot --nginx -d mysite.com
The file /etc/nginx/sites-enabled/mysite should have been modified by certbot.
How to install Hugo
In the official Hugo reference site you can find the installation guide and enough documentation. In my case, I will use my Ubuntu apt repository to install Hugo.
sudo apt install hugo
We can check the success of the installation checking the version installed.
hugo version
If the output is the version, Hugo is installed right.
Starting a quick web
Before starting our Hugo project, we need to go to the path where we want to generate the files. In our case, /var/www as we have previously configure in NGINX .
cd /var/www
Now we are ready to start the Hugo project. For this, you have to execute:
hugo new site mysite
Where mysiteis the name of the web, and a new folder /var/www/mysite should be created with all the files of the project. Inside the folder, you should have the following structure:
Output
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
and the file config.toml, which is the most important file, as it is the configuration file.
Adding a theme
Once we have the Hugo folder structure created, we can add the theme for the web. There are a lot of themes in the Hugo Theme Repository. Browse the list until you find one you like it, find it in GitHub, and clone into your theme directory.
Here I chose the m10c theme:
git clone https://github.com/vaga/hugo-theme-m10c themes/m10c
Then add the following line:
theme = "m10c"
in your config.toml file in the website’s root folder:
vi /var/www/mysite/config.toml
Adding a post
To create a new post (in this case, the first one), it’s just needed to execute:
cd /var/www/mysite
hugo new posts/first-post.md
Then it will be created a new file first-post.md in the folder /var/www/mysite/posts/. Now we can edit this file to add the content of the post. The language to write the post is Markdown. It is a lightweight markup language for creating formatted text using a plain-text editor.
If you don’t know this language, I recommend you to check the Markdown Guide.
Running the developer mode
Hugo has a mode to view in realtime the edition of the web with its own web server. It’s very useful to create new posts and check how it is going before publishing the posts (Development Mode).
Change the directory to the root site folder:
cd /var/www/mysite
and run:
hugo server -b http://mysite.com -D --bind=X.X.X.X
Where http://mysite.com is your URL (defined in the DNS) and X.X.X.X is your IP address.
Now, you could open a web browser (Firefox is my favorite), and view the result of the render of the web in the server with port 1313 (http://mysite.com:1313).
Building the site
Once you have written the posts and you want to publish or update the web, go to the root site folder:
cd /var/www/mysite
and just run:
hugo
The site is built as a static web in the public folder (/var/www/mysite/public). As NGINX was before configured to use this folder as the root to the web, you can visit the URL https://mysite.com to see the result.
Conclusion
Now you have all the tools to develop a static web with Hugo. I love the speed Hugo websites gives us, I hope you love it too.