How to build a site with Hugo website generator

by Remy Pereira on 01st February 2018

Once you have installed Hugo and verified the installation, you are ready to build your site with Hugo. Refer to our previous article How to install Hugo for installation instructions and verification in various operating systems.

Create a New Site with Hugo

To start your Hugo project, create a new site using the command below:

hugo new site <sitename>

For example to create a new site testsite

hugo new site testsite

Add a theme

Hugo does not come with a default theme. To see the list of available themes visit Hugo Themes

To add a theme you may use git. In this example we are going to add the theme called ananke. Naviagate to your project folder.

cd testsite
git init
git submodule add themes/ananke

All your themes reside in the themes directory of your project. If you navigate to themes folder now, you will find ananke. Adding any other theme is similar. To add "bleak" theme

git submodule add themes/bleak

Activate a theme

The config.toml file holds the configuration of your site. By default it looks like

 baseURL = ""
 languageCode = "en-us"
 title = "My New Hugo Site"

To activate a theme, open the config.toml file in a text editor and add the line

theme = "ananke"

Now you can run the builtin server to see your new site. To run the server run the command:

hugo server

This server listens on port 1313. So you may visit localhost:1313 in your browser to see your site running the new theme.

Customize your theme

The main config file for your site is config.toml. To make configuration changes open this file in text editor and make changes. For example to change the title to "New Title"

title = "New Title"

Hugo server by default uses livereload via JavaScript. A file called livereload.js is included by default between <body> and </body> tags. So whenever you make a change and save it, the page refreshes by itself. This is very useful in development environment because you can see you changes as you make them live in another window. This option can be disabled by running hugo server with --disableLiveReload flag.

Themes usually have theme based customization options. For example ananke theme includes a sample config.toml file that you can copy from themes/ananke/exampleSite to the root of your project. The sample config.toml for ananke theme looks like below:

title = "Notre-Dame de Paris"
baseURL = ""
languageCode = "en-us"
theme = "gohugo-theme-ananke"
themesDir = "../.."
MetaDataFormat = "yaml"
DefaultContentLanguage = "en"
SectionPagesMenu = "main"
Paginate = 3 # this is set low for demonstrating with dummy content. Set to a higher number
googleAnalytics = ""
enableRobotsTXT = true
changefreq = "monthly"
priority = 0.5
filename = "sitemap.xml"
favicon = ""
description = "The last theme you'll ever need. Maybe."
facebook = ""
twitter = ""
instagram = ""
youtube = ""
github = ""
linkedin = ""
# choose a background color from : and preface it with "bg-" 
background_color_class = "bg-black"
featured_image = "/images/gohugo-default-sample-hero-image.jpg"
recent_posts_number = 2

Remove the line themesDir = "../.." and change the line theme = "gohugo-theme-ananke" to theme = "ananke".

In addition to customizing the title, you can change background_color_class, featured_image, recent_posts_number etc.

Add new post

Contents are stored in files, written in simple markdown language. To create a post:

hugo new posts/

This creates a file in with the following default content

  title: "First Post"
  date: 2018-01-29T14:15:22Z
  draft: true

This is just a text file in markdown syntax. Hugo supports markdown, html or both combined. You may save your content as html (.html) or markdown (.md) format. This is now a draft. To see the draft just restart the server with drafts enabled. Press Ctrl + C to stop the server. Start it again with drafts enabled:

hugo server -D

You can now see your first post.

Post a comment


Nothing the first to share wisdom.