I wanted to do something. I had the feeling that I wanted to share my experiences and my ‘life’ with some people. I have so many things to tell.
That’s how I got the idea of creating a blog.

I looked around, created a blog with wordpress and a few other known options you have to create a blog - but I was never really happy with it.
After some days of looking for a new solution I found Hugo .
The second I saw it I was like ‘Yes.. this is what I need.’
Hugo is a fast static site generator written in Go, and you can use it to completely build your website.
I admit - starting to work with it was not easy. But Hugo has really good documentation on how to do things.

The following steps show you how I created this blog using Hugo.

Install Hugo on your PC

The first thing you have to do is to download and install Hugo on your computer.
Hugo natively provides pre-built binaries for the following

  • Linux
  • Windows
  • macOS
  • OpenBSD
  • FreeBSD

I was using Ubuntu 20.04 so for me it was as easy as the following.

sudo apt-get install hugo

Building a base

Initialization of the Hugo project folder.

Initializing the project folder for Hugo is easy.

mkdir ~/Documents/www
cd ~/Documents/www
hugo new site binarymind.io

Hugo automatically created a subfolder called ‘binarymind.io’

Choosing a theme

After installing Hugo i went on their website and looked for some themes .
I tried a lot of themes, but I got stuck with one of them.
I chose the theme hello-friend-ng created by Djordje Atlialp
I used the ‘git clone’ command to clone the whole git repository to my project/themes folder.

cd ~/Documents/www/binarymind.io
git clone https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng

I chose not to add the git submodule because I knew that I wanna make changes to the theme.

Example site

To have a good starting base I decided to copy the content of ‘themes/hello-friend-ng/exampleSite’ over to my project directory

cp -rf ~/Documents/www/binarymind.io/themes/hello-friend-ng/exampleSite/* ~/Documents/www/binarymind.io/

Customizing the theme

I customized a lot on the theme. I added posts with summary to the front page, customized the lists of the categories, added hover animations of the menu, hover animations of the social icons, played around with typewriter effects, deleted them again etc.. I had so many ideas what I wanted to make different from the original theme, so I spent a lot of time customizing the theme and playing around with it.
That is also how I learned working with hugo.

I started the hugo webserver from the project directory.

cd ~/Documents/www/binarymind.io/
hugo server

After starting the webserver I was able to visit the site at http://localhost:1313 .
Now I started playing around with the various .css and .html files of the theme until I liked it and it fit my needs. The cool thing about Hugo is that you actually see live changes you make to the website. As soon as you save a .css oder .html file you instantly see the changes on the local webserver. That made playing around and changing things so easy for me.

Changing variables in config.toml

The theme provided a config.toml file in which I just had to change the variables to fit my needs. This is easy and straight forward. This is also the main config file of the site.

Upload to webserver

I already had a linux-server running nginx up and running. All I had to do was create a new nginx config file and upload the files Hugo provided to my webserver.

To generate the static site with Hugo

cd ~/Documents/www/binarymind.io
hugo

After running this command Hugo exported the site to the ‘public’ subdirectory in the project folder. I connected to my webserver and put a new config file in the ‘sites-available’ folder and linked it to a file in ‘sites-enabled’. Then I had to reload nginx with the new config files.
I already generated an ssl certificate using certbot (letsencrypt) before.

mkdir /var/www/binarymind.io
sudo nano /etc/nginx/sites-available/binarymind.io

/etc/nginx/sites-available/binarymind.io

# Redirect HTTP -> HTTPS
server {
    listen 80;
    server_name www.binarymind.io binarymind.io;

    include snippets/letsencrypt.conf;
    return 301 https://binarymind.io$request_uri;
}

# Redirect WWW -> NON WWW
server {
    listen 443 ssl http2;
    server_name www.binarymind.io;

    ssl_certificate /etc/letsencrypt/live/binarymind.io/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/binarymind.io/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/binarymind.io/chain.pem;
    include snippets/ssl.conf;

    return 301 https://binarymind.io$request_uri;
}

server {
    listen 443 ssl http2;
    server_name binarymind.io;

    root /var/www/binarymind.io;
    index index.html;

    # SSL parameters
    ssl_certificate /etc/letsencrypt/live/binarymind.io/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/binarymind.io/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/binarymind.io/chain.pem;
    include snippets/ssl.conf;
    include snippets/letsencrypt.conf;

    # log files
    access_log /var/log/nginx/binarymind.io.access.log;
    error_log /var/log/nginx/binarymind.io.error.log;

    location = /favicon.ico {
        log_not_found off;
        access_log off;
    }

    location = /robots.txt {
        allow all;
        log_not_found off;
        access_log off;
    }

    location / {
        try_files $uri $uri/ /index.html?$args;
    }

    }
    if ($request_method !~ ^(GET|HEAD|POST)$ )
      {
       return 405;
    }
}

sudo ln -s /etc/nginx/sites-available/binarymind.io /etc/nginx/sites-enabled/binarymind.io
nginx -s reload

After pointing the DNS records of my domain to the webserver the site was reachable via https.

Conclusion

Building a site with Hugo is easy and fun. They also have pretty straight forward documentation on their website and active users in the community.
You have to get used to the variables and the system itself until you really know how it works - but i guess that’s how it is with everything and Hugo made it really easy for me.
Of course you could discuss if it’s worth the effort instead of just using wordpress or something similar. But the fact that Hugo is fully and easy customizable mad it worth for me. Also it needs less ressources than a full blown wordpress blog with a mysql database etc.
If you want to build your own site using Hugo I would recommend their own documentation . This post shows just how I did it. It doesn’t mean you have to do it the same way.

I hope I was able to give you a little insight about how I created this blog.

~ Marcel