HUGO

Recently I learnt about the existance of HUGO, a general-purpose website framework that will help you build static website.

A static website is composed of: html, css and js components. Making it easy to create your first site.

Getting Started: How to install HUGO

In Windows

Simply download the latest version from their repository:

In ubuntu

You can use the version available in snap (it might no be the very latest):

snap install hugo --channel=extended

Alternatively, you can download a specific version like we did for windows with:

apt-get update -y

#https://github.com/gohugoio/hugo/releases 
#choose and adapt the link below to the desired version
wget https://github.com/gohugoio/hugo/releases/download/v0.87.0/hugo_0.87.0_Linux-64bit.deb

sudo dpkg -i hugo_0.87.0_Linux-64bit.deb #extract and install
#apt-get install -f #if dependency errors

Remember that the themes required some minimal version of HUGO to function properly.

Check HUGO version with:

hugo version

Choose a Theme for your Project

You are ready to create your HUGO site, but how to start? First things first. Make sure that you like some of the available templates:

A great start point is:

You can check that the theme that you like is responsive:

How to Create a new HUGO site

In a folder where HUGO application has acces to, simple execute:

hugo new site <your project name>
#hugo new site your_project_name

To generate the initial files that we will configure. This depends slightly from theme to theme, so for starters make sure to choose one with a good documentation.

I can recommend PaperMod with its great Wiki it helped me a lot to discover more about HUGO and actually made this post possible.

Downloading a HUGO Theme

Once you have decided on your theme, you have to clone the repository, don’t be afraid, this is just to download to the HUGO folder the files that its creator shared with the world:

git clone https://github.com/adityatelange/hugo-PaperMod ./your_project_name/themes/PaperMod --depth=1

Now, it is time to see HUGO in action, we have to tell it that we are interested to use the theme that we just downloaded. For that, we have to modify the theme config file.

There are two flavours of config files: .yaml and .toml, basically we are providing inputs parameters to HUGO about our site.

If you are more conformatable with .yml files, rather than .toml:

.\hugo new site <your project name> -f yml

For PaperMod, the very basic config file in yaml version looks like:

baseURL= "/" #important, you will change that
ageCode = "en-us"
title = "Your Hugo Site Title"
theme= "PaperMod" #the name of your desired theme, you have just downloaded it

Another way to download your desired theme is by:

cd <project name>
git init
git submodule add https://github.com/kaiiiz/hugo-theme-monochrome.git themes/hugo-theme-monochrome

HUGO Sample Sites

Try the sample site (if there is one in the repository). From personal experience, I would recommend to start by choosing a theme that has one of these sample sites, as you can start by adapting the initial look of the site that caught your attention in its demo.

cd ./your_project_name/themes/your_desired_theme/exampleSite
.\hugo server --themesDir ../..

Modify the HUGO Theme

Have you been tinkering already with the demo site? Add your own content!

Start by creating a post:

./hugo new posts/first.md

As you can see, HUGO supports markdown to write your site.

Make sure to read your theme documentation and set proper configuration for each post. In PaperMod theme, you can start by using:

title: ""
date: 2022-04-03T23:20:21+01:00
draft: false
tags: ["tag1","tag2"]  
description: ''
summary: ''
url: ''

Check that everything works locally. HUGO can open a development server that compiles modifies in real time the changes as you save them:

.\hugo server

You will see the changes getting applied on the go in: http://127.0.0.1:1313/

Generate your HUGO Site

Finally, generate the public files that you will deploy to your server

.\hugo

You will be able to check that the /public folder contains all the static files that form your website.

Got my HUGO site locally - What now?

At this point we have an awsome HUGO site. It would be a shame that the rest of the world cant enjoy what you have created.

For that matter, I will be writting how to deploy a HUGO site in the upcoming posts. I can tell you already that there are many ways to publish your site:

  • Totally Free: using Github Pages - you will get a subdomain and space
  • Free to some point: using Google Firebase, you get a subdomain and a free tier quota for usage and space
  • Self-Hosting: using hardware you already own

With any of this options, you can add your own domain to have your site, your way.