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.
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.
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
$ 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
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
|-- 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.
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.
$ 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.
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 email@example.com:figroll/hugo-theme.git
Make sure you go back up to your sites root folder
$ cd ../
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
We can change our
config.toml to bind the site to the theme
so we don’t have to use the
$ 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.
baseurl = "http://replace-this-with-your-hugo-site.com/" languageCode = "en-us" title = "My New Hugo Site" theme = "hugo-theme"
change the baseurl from
baseurl = "/" languageCode = "en-us" title = "My New Hugo Site" theme = "hugo-theme"
This will build a
public folder in our site root, this public folder is
our dist path.
Upload to Figroll using Figroll CLI
If you haven’t installed NPM you can use Homebrew to install by running:
$ brew install node
figroll-cli using npm:
$ npm install figroll-cli -g
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
When we are ready to deploy our site, we can simply connect to that site, making sure we pass in your built site folder (
$ figroll connect cinnamon-102.figroll.it public
$ figroll deploy
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.