hugo 0.20

Let's Start from the Basics: Part 2

Where to Start and How

I think it goes without saying, but a good place to start is the official documentation. The documentation is easy to follow and you can find everything you need to get you started. And when you run into problems, you have the forum.

Installation

Hugo is available on Windows, Linux, FreeBSD and OS X. Installation is not complicated, you only need to follow the steps they tell you on their guide depending on your Operative System.

Once you finished the installation you need to create a new site:


$ hugo new site my-new-site

When you have your new site built, you need to add a theme. Hugo doesn’t come with a default theme so you’ll need to install one or create your own.

As a start, we’ll install a theme. You can see available themes from their theme overview page.

Once you picked one, you just need to clone the git repository to your themes folder. For example, if you want to install the “Beautiful Hugo” theme you need to write the following code on your terminal (while on your themes folder):


$ git clone https://github.com/halogenica/beautifulhugo.git beautifulhugo
Before you use a theme, remove the .git folder in that theme’s root folder. Otherwise, this will cause problem if you deploy using Git.

Read the theme documentation to get all the extras the theme includes (Syntax highlighting, Disqus support, Google Analytics...).

Now that we have a site and a theme we can serve the site (from the root file of the site):

$ hugo server --theme=beautifulhugo --buildDrafts

This will make our new site available on http://localhost:1313 and as the flag –buildDrafts was included, this will show all the posts with draft = true. This is handy when you are testing.

If you don’t want to include –theme=beautifulhugo every time you work on your site, you can add the theme to your configuration file (config.toml).


baseURL = “http://localhost:1313/"
languageCode = “en-GB”
title = “My new site”
theme = “beautifulhugo”

Content

Now that we have our new site and our new theme, we need content.

Let’s assume you are building a blog and we want to save all our posts under a post content type. Here is how we would create a post (from the root folder):


$ hugo new post/our-introduction-post.md

This will create a new directory post inside the /content directory and create our-introduction-post.md file inside it. Hugo uses Markdown (hence the .md) and this is what you’ll see on the created file.


+++
date = “2017-05-15T16:11:58+05:30”
subtitle = “”
tags = []
title = “our introduction post”
+++
As said on the documentation: The content inside +++ is the TOML configuration for the post. This configuration is called front matter. It enables you to define post configuration along with its content.

What you see on the front matter might vary on the theme you’ve chosen.

Your content goes after the last +++

New to Markdown? Here is a good Cheat Sheet

Avatar author

Web developer. Always learning.

Let's share this!