How to Create a Website with Hugo: Part 1: Setup

Table of Contents

Getting started with Hugo - This article is part of a series.

Part 1: This Article

Part 3: Create Content on Hugo Website: Part 3

Part 4: How to deploy or host Hugo Website for free: Part 4

Introduction to this series #

A website is important to showcase your work, and to reach a wider audience. And if you are a business just going online, it is great to establish an online presence.

However, creating a website from scratch can be a daunting task, especially if you’re not familiar with the ways and means to actually create a website.

Thankfully, there are powerful tools available that simplify the process. For example, most of the websites on the internet today run on a framework called Wordpress and a lot of people use tools like Wordpress, a content management system (CMS) to create their websites.

I’ve used Wordpress for over a decade exclusively and I used to love it until I learnt about the JAMStack and a static site generator called Hugo. Here’s why I chose Hugo over Wordpress to build this website.

In this series, I’m going to go over all the steps on how I built this website. I know HTML and CSS and I assume that you have some working knowledge of both.

And guess what, I’ll also show you how you can host your website for free!

Understanding Hugo #

If like me, you’re coming from a self-hosted Wordpress too, a fundamental difference is that Hugo is just a static site generator and not a content management system like Wordpress.

It doesn’t have a backend like Wordpress does that allows us to go to posts, pages, media files or plugins.

Wordpress needs a database to store all this info, however Hugo doesn’t use a database or server-side scripting for anything. Instead of using a visual editor, we’ll be using a text-editor to edit or create files written in the Markdown syntax.

Hugo essentially builds these pages written in Markdown as static HTML pages which can then be served from any server or website hosting provider. There are a lot of great themes that we can choose to change the look of our site.

Functionalities like forms and other stuff are handled via APIs which we will get into in later parts of this series.

So, if you like getting your hands dirty and learning through doing, you’re in the right place.

I don’t want to go into any more technical details about what Hugo is, you can read all about it on Hugo’s website if you’re keen to know more. If you’re ready to get started, let’s begin!

Preparing Your Environment #

Installing Hugo #

Before you can start using Hugo, you need to install it on your computer. IMPORTANT: We need the extended version.

Hugo provides pre-built binaries for various operating systems, making the installation process straightforward. Visit the Hugo installation page and download the appropriate version for your system depending on your operating system, and follow the installation instructions.

To check if Hugo has been installed correctly, you can use

hugo version and it will show you something like this

sansubr@Santoshs-MacBook-Air dsq % hugo version
hugo v0.113.0+extended darwin/arm64 BuildDate=unknown

I have Hugo v0.113.0 running on my system.

Setting Up Your Project #

Once Hugo is installed, you can create a new project by running a simple command in your terminal or command prompt.

If you’re on Windows, be sure to use PowerShell which is different from Windows Powershell or Command Prompt.

Now, navigate to the desired directory on your computer where you want to store files for your website, and execute the following command:

hugo new site my-website

This will create a new Hugo project named my-website in a directory with the same name.

Install Git #

We will be using Git to manage versions of our website and using GitHub to store a repository of all these files. This step is important since the hosting service we will be using will look at your GitHub repository and serve files from there.

Installing Git on Linux #

Git should be pre-installed on most distros. You can check this by running this on terminal.

git --version
git version 2.40

If it shows you a version like above, you’re all set.

If you don’t have git on your system, see below.

If you’re on a Debian/Ubuntu-based Linux distro, simply run

sudo apt update
sudo apt install git

The first command updates your system. The second one installs it. You can check if it has been installed correctly by using git --version to get a version number.

If you’re using any other Linux distro, please refer to these steps to install Git.

Installing Git on Mac OS #

I’m on Mac OS and I believe my OS came pre-installed with Git. Open your Terminal and use git --version to see if Git is already installed. It should output a version number like above.

If it isn’t, it will prompt you to install it. Simply follow the instructions to get it installed. For more info, please refer to this.

Installing Git on Windows #

There are two options to install Git on Windows. By downloading the installer or using the winget command. See how to do it here.

Install a code editor #

Since we will be working with Markdown content, config files in TOML or YAML formats, HTML or CSS at some point, it is great to have a code editor that can do it all. Code editors highlight syntax and text in ways that will help us identify if we’re getting our code right.

I personally prefer Microsoft Visual Studio Code. It has everything one would need for the above. If you don’t like Microsoft’s telemetry, you can also check out VS Codium. It is basically VS Code minus all the data collection.

There are other alternatives too like Atom which is free to use. A simple Google search should give you more options.