Hugo is a powerful static site generator. It’s written in Go language and is super fast to build. It’s a great alternative to Jekyll. We are going to be making a simple HTML site using the Figroll Hugo theme from scratch, here’s the demo site.


Installing Hugo

Installing Hugo is very simple and if you are using Mac OS X you can use Homebrew to install it, in a few simple command on the terminal.

Using Windows? - If you are using a windows please see these installation docs Installing on Windows.

New to the command line? - Checkout this helpful blog post on Intro to the command line.

Installing Homebrew

Copy and paste this command below into the command line and hit enter

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Installing Hugo with Homebrew

Once Homebrew has downloaded and install we can then install Hugo by running:

$ brew install hugo
==> Downloading https://homebrew.bintray.com/bottles/hugo-0.13_1.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring hugo-0.13_1.yosemite.bottle.tar.gz
🍺  /usr/local/Cellar/hugo/0.13_1: 4 files,  14M

Great! Now we have Hugo installed.


Add a new Hugo site

Figroll Hugo Theme

In the command line we need to change directory to where we keep all of our sites. For me this is in my Projects directory in home folder ``~/Projects`

For this example we are going to call this project our-new-site but you could call it whatever you would like. Once we’re decided we need to create our Hugo site:

$ hugo new site our-new-site

Change directory to $ cd our-new-site and use $ ls to see the current directory layout.

|-- archetypes   
|-- config.toml
|-- content
|-- data
|-- layouts
`-- static

5 directories, 1 file
  • archetypes: Archetype allows you to define your own configuration properties that will be added to the post front matter whenever hugo new command is used.

  • config.toml: Every website should have a configuration file at the root. By default, the configuration file uses TOML format but you can also use YAML or JSON formats as well. TOML is minimal configuration file format that’s easy to read due to obvious semantics. The configuration settings mentioned in the config.toml are applied to the full site. These configuration settings include baseurl and title of the website.

  • content: This is where you will store content of the website. Inside content, you will create sub-directories for different sections. Let’s suppose your website has three actions – blog, article, and tutorial then you will have three different directories for each of them inside the content directory. The name of the section i.e. blog, article, or tutorial will be used by Hugo to apply a specific layout applicable to that section.

  • data: This directory is used to store configuration files that can be used by Hugo when generating your website. You can write these files in YAML, JSON,or TOML format.

  • layouts: The content inside this directory is used to specify how your content will be converted into the static website.

  • static: This directory is used to store all the static content that your website will need like images, CSS, JavaScript or other static content.


Add content

You can create new content files in Hugo using the hugo new command. When you run that command, it adds few configuration properties to the post like date and title.

New post

$ hugo new post/welcome.md

Open your new site folder in a text editor and edit the welcome post. We can add a little intro and then change draft = true to draft = false when we are finished.

Editing draft post


Recap…

So we’ve installed Homebrew to add any extra applications on to our computer. We then installed Hugo, made a new site and added a welcome blog post.


Add a theme

It’s just content at the moment on our site, we need to add some scaffolding, so we are going to add our simple Figroll Hugo theme.

We need to add a themes folder:

$ mkdir themes && cd themes

And copy our Figroll Hugo theme into it:

$ git clone git@github.com:figroll/hugo-theme.git

Make sure you go back up to your sites root folder $ cd ../


Local development

Now that we have added a theme and are ready to serve our site. We can use the command below. The --theme=hugo-theme simply binds the theme to our site.

$ hugo server --theme=hugo-theme

Once the Web Server is up and running we can take a look on http://localhost:1313/

Note:

We can change our config.toml to bind the site to the theme so we don’t have to use the --theme=hugo-theme.

Editing draft post

$ hugo server

To stop serving at anytime you can press ctrl + c in our terminal.


Build site for production

First we need to build our site for production.

In our config.toml

baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hugo-theme"

change the baseurl from http://replace-this-with-your-hugo-site.com/ to /

baseurl = "/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hugo-theme"

Then type

$ hugo

This will build a public folder in our site root, this public folder is our dist path.


Upload to Figroll using Figroll CLI

We can install the Figroll-cli or checkout the docs on our Figroll Github. We first install it globally using NPM.

If you haven’t installed NPM you can use Homebrew to install by running:

$ brew install node

Then install figroll-cli using npm:

$ npm install figroll-cli -g

Logging In

You need to login to your existing Figroll account. If you don’t have one you can register on our website here: Register.

$ figroll login

Email: <your email>
Password: <your password>

Creating a new site

Creating a new free site is super simple with:

$ figroll create

You created site:
    site: cinnamon-102.figroll.it

Connecting

When we are ready to deploy our site, we can simply connect to that site, making sure we pass in your built site folder (public folder)

$ figroll connect cinnamon-102.figroll.it public

Deploying

With figroll deploy it pushes your site straight up to your staging environment. You can checkout my staging url at: our-new-site-staging

$ figroll deploy

Activate

Once you’re happy you can activate your site on production environment. This also activates HTTPS on your site.

$ figroll activate

Now you’re all done!

Hope you found this helpful, any questions or comments please send us a tweet at @figrollhosting.


Figroll dashboard upload

If you would prefer to upload your site via the website, you can follow along to the short video below.