Simply create your new blog in a few minutes using static generators like Hugo

Would you like to start blogging quickly, but do not want to install cms systems such as Wordpress, setup everything, install database, and edit other settings? The solution is to use a static page generator, such as Hugo. What is a static generator? According to wikipedia, static generators are defined as follows:

A static web page (sometimes called a flat page/stationary page) is a web page that is delivered to the user exactly as stored, in contrast to dynamic web pages which are generated by a web application.

Ok and what does it mean? Unlike classic blogs based on cms or other technologies, static pages are once generated and do not change until you re-generate them. It may seems strange, but on a simple example we can show that it is actually powerful. As I mentioned at the beginning of this article, you do not need to install any cms system or solve the permissions and security databases, just generate a couple of static page commands and upload them to the server.

There are many static generators and the most favourite are Jekyll, Next, Hakyll or Hugo. I just selected Hugo as a static generator for my blog. Let’s see how it works with Hugo.

For the demonstrations below, the macOs platform was used

Install Hugo

If you use Homebrew (I hope you do), type the following commands:

update & install
  • bash
1
2
3
 
brew update
brew install hugo
hugo version

If everything went well, you will see something like this:

Hugo Static Site Generator v0.42.2 darwin / amd64

You can also use other installation procedures such as installing from tarball and more. But we will not deal with them here.

Create new post with Hugo

Now we will create the first page using the static generator of Hugo pages through a simple command. First, however, we select a folder where we want to generate static pages. Selecting of folder is up to you, in the console, go to the folder with the cd coomand and then type the following command:

create new blog
  • bash
1
2
 
cd ~/static-sites
hugo new site blog

This command generates data for the static page into the blog folder.

- blog
  - .git
  - archetypes
  - config.toml
  - content
  - data
  - layouts
  - static
  - themes

Now just do the cd command to the blog folder where we will see the different files that the previous command generated. One of the important file is a configuration file named config.toml. Through this file it is possible to configure different properties and behaviors of static pages. We’ll show you how to configure the template.

The basic config.toml looks like this:

baseURL = "http://example.org/" # base web url
languageCode = "en-us" # language
title = "My New Hugo Site" # site title

The advantage of the static pages generated through Hugo is a relatively large number of templates available on this pagethemes.gohugo.io. You can choose any template and use it for your blog. As a part of our example, we will show the configuration of a basic template that is named Ananke theme.


  1. Change into the themes directory: cd themes
  2. Clone your selected theme: git clone https://github.com/budparr/gohugo-theme-ananke.git or download from GitHub and copy to themes directory
  3. Change the directory to the blog: cd .. from themes folder
  4. Activate selected theme (Anake) by changing the config file config.toml echo 'theme = "gohugo-theme-ananke"' >> config.toml
  5. You can start server to verify the theme is activated: hugo server -D and enter http://localhost:1313 address into the browser


Implementation of the template Implementation of the template

Next, we will create the first post in a new blog. To create the first post, use this commands in the blog folder:

create new post
  • bash
1
2
 
mkdir content/posts
hugo new post/my-first-post.md

Now you can open my-first-post.md where you will see that it consists two parts:

---
title = "First Post"
date = 2018-03-03T13:23:10+01:00
draft = false
tags = ["Getting started"]
categories = []
---

Hello Hugo world! No more excuses for having no blog or documentation now!

The first part is separated by — and contains metadata about your post. Here you can define the post title, date, tags, and more. This section begins with the content of the post itself, which you can format by using markup markdown. All you need to do is to start the server:

 hugo server -D

and enter http://localhost:1313 address into the browser.


The first post on the blog The first post on the blog

Create new site and personalize blog

You can set a lot of things in the config.toml file, for example, we can simply create a menu by copying the code below:

[[menu.main]]
    name = "Homepage"
    weight = 1
    url = "/"
[[menu.main]]
    name = "Posts"
    weight = 2
    url = "/posts/"

The individual weights in this case affect the order of items in the menu, the higher the weight of the item, the item in the order is below in the menu. Just as we’ve created the first blog post, we can also create separate pages again with a simple command. Separate pages are not generated in the public folder but directly into the content folder.

create new page
  • bash
1
 
hugo new about.md

For complete information of all the settings, please refer to the documentation on the official Hugo site, where everything is clearly explained and where are some examples that I came from.

Ok, this is how I would end this blog post by showing how to install the static generator of Hugo pages and at the same time I went through the basic commands and created a very simple blog with the first post and site about me. Everything took a few minutes and the blog is done. In the next articles about Hugo we will go deeper and I will show you more examples, such as the deployment the block. I hope you like my first article and if there is something missing I will appreciate your feedback in the form of comments.