Getting Started with Hugo on Ubuntu 14.04

Hugo is a static website generator which is written using golang. It is extremely fast and lightweight. You can use it to create a blog or full blown away corporate website. In this post I will show you how you can deploy a blog made with Hugo to GitHub pages. Let’s start!

1.Download the binary

The first step is to download the Hugo binary for your platform from GitHub. I will be downloading binaries for 64bit linux as that is what I am using right now. Your system might be 32 bit so kindly keep that in mind. The download link is this.

2.Extract it in dev folder

I like to save all of my development related stuff in a separate dev folder in my home. You can easily create this dev folder using the following command:

mkdir ~/dev

Go ahead and extract the hugo files in this folder. If you are done with this step then move on.

3.Setting up an alias

Now it’s time to setup and alias for hugo. Currently we can call hugo from any folder by running the following command:

$ ~/dev/hugo_0.15_linux_amd64/hugo_0.15_linux_amd64

As you can see the above command is not very user friendly. We are going to change it. Open up your .bashrc file using your editor of choice:

$ nano ~/.bashrc

Add the following text at the end of this file:

alias hugo='~/dev/hugo_0.15_linux_amd64/hugo_0.15_linux_amd64'

After saving the file type the following command in your terminal:

source ~/.bashrc

This updates your terminal session according to your .bashrc file so that you don’t have to restart the terminal for the changes to take effect.

4.Actually creating the new blog

Now hop over to your Desktop and create a new site/blog using the following commands:

$ cd ~/Desktop
$ hugo new site new_site
$ cd new_site

The above command creates a new website in a new_site folder in your Desktop and cds you into that folder. Now it’s time to create a new page for our website.

5.Creating about.md

Type the following command in your terminal to create a new about.md file.

$ hugo new about.md

Now you can edit the file using your editor of choice. The above file will be created inside the content folder. Just add valid markdown after the +++ in the about.md file.

6.Create a new post

A blog is not complete with a blogpost. You can easily create one by typing the following command in your terminal:

hugo new post/first.md

Now you can edit the post in your editor of choice. The post will be created in the content -> post folder. After you have edited the file, save it and continue with the next step.

7.Getting the themes

Currently we don’t have any fancy themes. We can change that by cloning the themes repo. It can easily be done by keying in the following command in your terminal:

$ git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes

Now you can test various themes by typing the following command:

$ hugo server --theme=hyde --buildDrafts

This will generate your blog and you can view it on localhost:1313. Just change the –theme flag to test various themes.

Now we are ready to actually push our blog to GitHub.

8.Building the blog

First of all we need to edit the config.toml file. Add the following information in it:

baseurl = "http://yasoob.github.io/"
languageCode = "en-us"
title = "Yasoob Khalid"
author = "yasoob"
theme = "hugo-zen"

[params]
  logo      = "/images/logo.jpg"
  copyright = "Yasoob. All rights reserved."
  twitter   = "https://twitter.com/yasoobkhalid"
  facebook  = "https://www.facebook.com/m.yasoob"
  github    = "https://github.com/yasoob/"
  email     = "yasoob.khld@gmail.com"

Replace the above variables with your own info. Now type this command:

$ hugo

This will generate your blog inside a public directory.

9.Setup a new repo on GitHub

Make a git repository in the public folder and commit all the changes. You can easily do this:

$ cd public
$ git init .
$ git add .
$ git commit -m "created my awesome hugo blog"

Now goto GitHub and create a new repo. We will name it yasoob.github.io for the sake of this tutorial. After that we will add a remote in our repository.

$ git remote add origin git@github.com:yasoob/yasoob.github.io.git
$ git push -u origin master

10.Test it out!

Now you can browse to the newly published blog. You can find it at the following url <github_username>.github.io/

Cheers!