Simple Hugo Website

Posted on by Ian Brown

Installing Hugo

Since I am using a Mac, this is as simple as: brew install hugo For others, see the below list: Arch Linux: yay -S hugo Debian Linux: sudo apt install hugo Redhat Linux: yum install hugo

Otherwise, you could always simple pull the latest version from the Hugo GitHub repo here: https://github.com/gohugoio/hugo/releases

Create your site and get a theme

The first thing you will need is to create a site using the hugo cli: hugo new site demosite

Now that this has completed, jump into the newly created demosite directory and let’s get a theme.

This site uses the awesome Minimo theme available from https://themes.gohugo.io/ Simply run the following command to get the theme in your site: git submodule add [url_of_the_theme] themes/[theme_name]

Now you can add the theme to the config.toml like so: echo 'theme = "[theme_name]"' >> config.toml

Make sure you read the documentation on the theme creators site so you don’t miss all the goodies like sidebars, tag clouds, etc.

General Hugo commands Hugo is shipped with some useful commands to get you up and running quickly. You have already used one of them to create your site. A few more are below:

hugo builds the static files in the public directory of the site. hugo server runs the local server so you can see your changes at http://localhost:1313 hugo server -D to enable showing drafts in your local site. hugo new posts/newpost.md to generate a new post based on the default template

Changing the Default template

Jump into the archetypes directory and open the default.md file. This is the file that forms the base of all pages and posts you create for your website.

Mine looks like the below, so feel free to copy it:

---
title: "{{ replace .Name "-" " " | title }}"  
type: post  
date: {{ .Date }}  
url: /{{ .Name }}/  
thumbnail: /images/2020/{{ .Name }}.jpg  
authors: ["authorname"]  
categories:  
  - Linux  
  - Windows  
  - Networking  
  - Development  
tags:  
  - Arch  
  - Ruby  
  - Rails  
draft: true
---

Other changes

Lastly, ensure you set the base_url variable in the config.toml file to your chosen URL. baseURL = "https://www.somesite.com/"

Uploading your new website

Since I am using Google Cloud Platform to host this site, uploading is simply a case of building the site with the hugo command and then using Googles gsutil command to upload the compiled site to the Google Cloud Storage bucket. Like this: gsutil cp -r ./public/* gs://my-bucket-name

Conclusion Gone are the days of complex WordPress or Joomla websites. Building this site has taken me longer to learn the Markdown syntax than it has to actually build the site from scratch and deploy it to Google Cloud Platform!

I hope you have learnt something about Hugo and that you give it a go. It really is amazing!