How To Create A Blog With Hugo

Introduction

Hugo is a static site generator with lightning fast rendering speed and excellent ease of use. Thanks to all of its content-oriented features, you can always focus on creating content rather than building the environment:

• With Hugo, you can build a running-anywhere static site in several minutes without concerning tedious dependencies or databases.
• You can compose your content in Markdown, the most convenient writing style, and instantaneously see the changes you've made on the web.
• Furthermore, you can make the most of Hugo's affluent theme repository and fast-growing community.

In this tutorial, I will show you how to install and use Hugo to build a static blog site on a CentOS-based Vultr LEMP server instance.

Prerequisites

Login to your instance as a non-root user with sudo permissions. See how to create such a user in this article.

Step 1: Install the Hugo program

Hugo can be installed on almost all of the mainstream platforms. For CentOS, you just need to download the latest program file in a .tar.gz archive and unzip it to a convenient location. At the time of writing, the latest version is 0.15.

sudo yum update -y
sudo yum install git -y
cd ~
wget https://github.com/spf13/hugo/releases/download/v0.15/hugo_0.15_linux_amd64.tar.gz
tar -zxvf hugo_0.15_linux_amd64.tar.gz
sudo mv hugo_0.15_linux_amd64/hugo_0.15_linux_amd64 /usr/local/bin/hugo

Test your installation with the following command:

 hugo version

Step 2: Build your site

With Hugo, you can build your site from within any folder on your server. Here, I built a site in the directory mysite/ under my home directory.

cd ~
hugo new site ~/mysite

Run the following commands to see the site's architecture:

cd mysite
ls -lF

As you see, the site's current architecture resembles:

archetypes/

config.toml

content/

data/

layouts/

static/

With another two to-be-created directories, themes/ and public/, the whole architecture of a Hugo site is compact yet comprehensive.

As a starter, know that your content should be stored in the directory content/.

Step 3: Install themes from the Hugo repository

To install all themes from the Hugo repository, run the following commands. These will create a directory named themes/ in your site directory and download all of the themes from the Hugo theme repo.

cd ~/mysite/
git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes

If you just want to install a single theme, visit the Hugo theme repo to determine your favorite theme. Copy its URL and paste it into the git clone command below.

cd ~/mysite/
mkdir themes
cd themes
git clone https://github.com/jaden/twentyfourteen

Step 4: Make some basic configuration changes

The file named config.toml in your site directory contains the global configuration for your Hugo site. Edit the file with a text editor to make some basic configuration changes as listed below. Remember to replace the values according to your specific conditions.

baseurl = "http://[YourSiteIP]/"
languageCode = "en-us"
title = "Your Site Name"
theme = "twentyfourteen"

Step 5: Compose your content

In your site directory, input the following command to create a content page in the directory ~/mysite/content/post/.

cd ~/mysite/
hugo new post/about.md

Open the file in a text editor, the format of the file should resemble the following.

+++
date = "2015-12-25T03:21:23Z"
draft = true
title = "about"
 
+++

Between the two lines of +++ lies the meta information about your content page. Here, you can remove the line draft = true and modify the title line as you wish.

Under the second +++ line, add the content that you want to display on the web page. Remember to write your content in the Markdown language.

## This is an H2 headline

Text goes here.

After finishing this edit, keep the text editor open for later use.

Step 6: Adjust your content with the Hugo server

You can use Hugo's built-in web server to deploy your site, which can instantaneously display your changes on the web page as soon as you modify your content in a text editor.

Open another terminal, configure the iptables rules to allow your access to your site on Hugo server's default port 1313:

sudo iptables -I INPUT -p tcp --dport 1313 -j ACCEPT

Launch the Hugo server:

hugo server --bind="[YourServerIP]"

Visit your site from a browser:

http://[YourServerIP]:1313

Now, you can try to edit the content of the page file in the previous terminal or add/remove a page file. You will find that any modifications in the content/ directory will be reflected simultaneously on your browser screen. This is a great feature for a busy blogger because you can always immediately see your modifications for better composing experiences.

After you finish your edit, press Ctrl+C to stop the Hugo server.

Step 7: Publish your site

Now it is time to publish your site on the web. Run the following commands and Hugo will generate all of the static content suitable for publishing within the public/ directory.

cd ~/mysite
hugo

Note: Hugo will not delete old files which were generated previously when you run the commands above. In order to avoid unexpected results, you can always delete the public/ directory before you run the hugo command or specify a new output destination as shown in the following command.

hugo --destination=public2

Since the Nginx web server has already been running on the server, all you need to do is copy the content of the ~/mysite/public/ directory or other custom destination directories to your web directory /usr/share/nginx/html/.

Delete the original files:

cd /usr/share/nginx/html/
sudo rm -rf background.jpg index.php logo.png

Copy your static site files to the web directory:

cd ~/mysite/public
sudo cp -R ~/mysite/public/. /usr/share/nginx/html/

That's it. Now you can visit your super fast static site from your browser: http://[YourServerIP].

To see more details, use the command hugo help or visit the Hugo official website.