Use Hugo to Create a Free Blog

I started reading recently about a static site generator (SSG) called Hugo. The Hugo website made it sound almost too easy to use Hugo to create a blog for free that would be easy to maintain so I had my doubts. However, to my surprise it was very simple to setup this blog using Hugo.

In this post I will do the following:

• Provide a short introduction to static site generators (SSGs) and Hugo
• List some of the benefits of using a Static Site Generator (SSG) like Hugo
• Describe the benefits of a Version Control System (VCS) when used with Hugo
• Explain how you can use Hugo to create a website for your blog

There is Nothing New Under the Sun

Many moons ago, I updated the website for the church I was attending in Astoria, NY to use a simple static site generator called CityDesk developed by Joel Spolsky.

The CityDesk start up dialog

In a 2016 post, Joel had this to say about CityDesk:

CityDesk kept your entire website in a SQL database. . . and had a frontend like a word processor. Every time you needed to publish, it generated the entire site as a set of html pages, which it then uploaded to an ftp server for you.

Back when I used CityDesk to set up the website for the church, I had two goals:

1. Make updates easy for the associate pastor who was very busy and non-technical
2. Keep costs low

In order to use CityDesk, you would start by creating templates to control the format of the HTML. After you created the templates, all you had to do to update the site was add or update content using the WYSIWYG editor on your computer and then click a button to publish it to the web server; ongoing updates were easy even for a non-technical person.

Fortunately, another church member eventually took over the design and administration of the site so it does not use CityDesk any more. However, I still have fond memories of CityDesk.

The Hugo Static Site Generator (SSG)

So much for that trip down memory lane. When I started looking at Hugo, it surprised me how similar it was in principle to CityDesk.

The following tagline is on the front page of the Hugo website:

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

Static site generators like Hugo are programs which combine content and templates to generate a website. Let’s break this down a little more:

• Content - a set of files formatted with Markdown, an easy to understand mark-up language
• Templates - a set of files that describe how to display and format the content as HTML files for the website
• Hugo - combines the templates and the content to generate a website

Hugo combines content and templates to generate a website

The Benefits of Using an SSG Like Hugo

There are several benefits to using an SSG like Hugo to create and manage a website or blog:

• Security - because SSGs generate websites that are pure HTML and Javascript and do not depend on databases like MySQL and server-side code written in programming languages like PHP in order to function they are inherently more secure.
• Speed - web servers are designed to serve up static content fast. Therefore, a site generated by Hugo will load fast and can be cached by a content delivery network (CDN) because it is only static content.
• Lower ongoing operating cost - because they do not require databases or server-side code, SSGs require less hardware to run on a server which translates to lower ongoing operational cost. There are several companies that offer free hosting plans capable of supporting sites generated by SSGs like Hugo.
• Ease of content creation - Writing content using Markdown reduces friction because it does not burden you with complex formatting like writing HTML and CSS does. Most of the formatting is handled by the template.
• Rapid updates - after initial setup, content updates are fast due to Hugo’s astonishing site generation speed and the integration with version control systems (VCSs) like Git and GitHub which streamlines the publishing process (more on this below).

While SSGs are not ideal for every kind of website, their advantages are unmistakable if you want to create your own blog that is free and easy to update.

The Benefits of Version Control Systems (VCSs) When Used with Hugo

More than 20 years ago, Joel Spolsky, the same chap who wrote CityDesk, published The Joel Test: 12 Steps to Better Code on his blog. While all of the items on the list are still considered best practice for software development teams today, the first item on the list Do you use source control? is the one I want to focus on. Back when Joel wrote that post, free source control or version control systems (VCSs) like GitHub and GitLab didn’t exist. Now VCSs are so widely adopted by developers that it would be challenging to find a team not using one to track their source code.

With respect to Hugo, there are two main benefits of using a VCS:

1. A VCS enables you to track the changes you make to source code on your computer and then push those changes to a remote server so that if anything happens to your computer you will not lose your work, and if you discover you made a mistake you can roll back to an older version of your source code.
2. After you push the content and templates for your Hugo site up to a VCS you can either configure the VCS to automatically run Hugo to generate the site and host it for you, or you can connect the source code repository with a hosting provider that will monitor the VCS for changes, automatically pull your source code, run Hugo on your behalf to generate the website files, and then update your website for you in a matter of seconds.

GitLab and GitHub both have generous free plans. There are also several companies that offer free hosting for sites created with static site generators like Hugo. Therefore, if you want to host a blog online there is no up front cost to set it up unless you want to purchase a domain name. You can even apply a free TLS/SSL certificate from Let’s Encrypt to your site so that all of the traffic is encrypted.

How to Create Your Blog Using Hugo

Before you can start using Hugo, you need to install Git, an Integrated Development Environment (IDE), and the Hugo executable on your computer. I have linked out to directions for each one of these steps which cover Windows, Mac, and Linux.

After you get these programs installed on your computer, you will need to create a free account with either GitHub or GitLab if you don’t have one yet, go through the Hugo Quick Start guide to create a site for your blog using Hugo, and then setup hosting for your blog. After you get your blog setup, you can also setup your own domain name if you choose.

The following sections provide additional detail on each step of this process. However, I did not provide detailed guidance on each step because if I did then this post would have gotten way too long.

Install Git on your Computer

Both GitHub and GitLab use the Git Distributed Version Control system to track changes to files. Therefore, in order to work with either one of these services, you will need to first install Git on your computer. Follow the installation directions on the Git website to get started. If you haven’t ever used Git before, the git-scm.com site has a lot of great documentation to get you going in the right direction including the following sections of the Pro Git book:

• First-Time-Git-Setup
• Getting Help with Git Commands
• Git Basics

Install an Integrated Development Environment (IDE) on Your Computer

While it isn’t strictly necessary, I recommend that you install an IDE to edit the content of your blog because it will make working with Git easier. Some options to consider are the following:

• Microsoft Visual Studio Code – a free IDE from Microsoft (this is what I use)
• JetBrains Pycharm Community Edition – a free IDE from JetBrains

If you are looking for a great tool designed specifically for writing Markdown then take a look at Typhora. They offer a free trial.

Install Hugo on Your Computer

Before you can start using Hugo, you will need to install it on your computer. Follow the installation directions on the Hugo website to install Hugo.

Create a Free Account on GitLab or GitHub

If you don’t have an account on GitHub or GitLab yet then your next step is to create a free account with one of these services. I chose to create my account on GitLab because I’m more familiar with it. However, they are roughly equivalent. Here are some links to get you started:

• Getting started with your GitHub account – all you will need is a GitHub Free account
• Get started with GitLab – On the login page, click the Register now link to create your account

Go Through the Hugo Quick Start Guide

Follow the steps in the Hugo Quick Start Guide on the Hugo website to get started creating your first Hugo site on your computer.

Check Out the Themes on the Hugo Themes Site

The theme you apply to your Hugo site will determine what it looks like and how the navigation works. There are over 200 free themes on the Hugo Themes site to choose from. If you want to change the look of your site then you can either download one of these themes and make changes to it or create your own from scratch.

When you find a theme you are interested in, select the Download button to go to the Git repository for the theme. Typically, the theme author will provide instructions on how to setup the theme, etc. Each theme has many different options so you will want to review the instructions before you attempt to use the theme with your site. I selected a theme called Bilberry Hugo Theme for this blog.

Test Your Site Locally

As indicated in the Quick Start Guide, You can run the hugo serve command to start a temporary web server on your computer to test your Hugo site while you are working on it. While the Hugo web server is running, changes you make to the files in your site folder will be automatically reflected in your browser.

Commit and Push Your Changes Frequently to Git

As you develop your site, get in the habit of committing your changes frequently to Git on your computer and then pushing those changes to GitHub / GitLab. Take a look at the links I shared above about how to get started with Git for details.

Setup Hosting for Your Blog

The Hugo website has a whole section about Hosting and Deployment which details several different hosting options for sites created with Hugo. I’ll highlight a few of the free options:

• Host on GitHub - If you setup an account on GitHub then using GitHub pages to host your blog is an option.
• Host on GitLab - If you setup an account on GitLab then using GitLab pages to host your blog is also an option. I tried this on my GitLab account, and it worked well. One thing you should be aware of is that GitLab requires you to provide a credit card to prove that you are a real person before they will let you use their servers to generate your Hugo site automatically each time you check in your changes to the source code repository. While they do ask you for a credit card, they do not charge you to generate a site using the automated build process.
• Host on Netlify - I didn’t try this one, but apparently it is a popular option.

Even though it was not listed on the Hugo site, I decided to try hosting this blog on Vercel. I followed their directions to link my source code repository in GitLab to their system and had a provisioned site in moments. It was extremely simple. Pointing my own domain name to the site running in Vercel was also straightforward. After I got my site setup on Vercel, I wanted some clarification regarding how to configure the site to use my domain name so I contacted Vercel support. I received a helpful response from them very quickly which was a welcome surprise.

Register a Domain Name for Your Blog

If you want to use your own domain name for your blog (e.g, YOURNAME.dev) then you will need to purchase a domain name from a company that handles domain name registration or make use of the domain registration services of the company hosting your blog. I registered my domain name with Name.com. However, new domain names may also be purchased through Vercel if you host your blog on their platform.

If you choose to setup your own domain, you should also setup an SSL/TLS certificate. As mentioned above, Let’s Encrypt provides free TLS/SSL certificates, and some hosting providers like Vercel will automatically configure the certificate on your site for you.

What are You Waiting For?

Getting my blog setup the way I wanted required some effort up front; there are certainly other ways to create a blog that are both faster and easier. However, I am pleased with how the blog turned out and with what I learned along the way. Hopefully the ease of creating new posts will keep me motivated to continue learning by blogging.