Getting Started With Hugo: How to Create a Simple Website

Hugo is a Static Site Generator that allows you to create a website with little to no coding experience. You can use pre-built themes as a base for your website design. This allows you to focus more on populating the site with your content.

Because Hugo is mostly used for static websites, it’s perfect for creating blogs, portfolios, or documentation sites.

You can easily set up and create a Hugo website using a pre-built Hugo theme. With just a few short steps, you can then add content and pages to your website using Markdown.

How to Install Hugo

You need to install the Hugo static site generator to create, run, and test a Hugo website. According to the Hugo documentation, there are many ways you can install it. Below are some of the options.

Mac

You can install Hugo using Homebrew.

Open your macOS terminal.

Install the Homebrew package manager.

        /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install Hugo.
```
        brew install hugo
    
```

Windows

You will need an equivalent package manager for Windows. For example, you can use the Scoop package manager.

Open Windows PowerShell, which should already be a part of your Windows Operating System.
If you are installing Scoop for the first time, you may need to set your Execution Policy.
```
        Set-ExecutionPolicy RemoteSigned -scope CurrentUser
    
```

Install Scoop:

        iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

Install Hugo:
```
        scoop install hugo
    
```

How to Create a Hugo Project

To create a new Hugo project, you will need to use the built-in hugo new site command.

Open your terminal or command prompt. Navigate to the folder where you would like to create your project.

Execute the hugo new site command:

        hugo new site new-hugo-website

Navigate to the location of your Hugo project in your file explorer.
Open the project folder. You will see that your new Hugo website has the file and folder structure required for your website to work.

How to Add a Theme

At the moment, your project only contains the main base folders for the Hugo project. Running your website locally at this point would only show an empty screen. Since you do not have any HTML, CSS, or UI designs set up for your website yet, you will need to add them.

Hugo already provides a library of in-built Hugo Themes created by developers.

Select a theme that you like. Each theme may have slightly different set-up instructions, shown on their respective preview page. This tutorial will use the Tale theme as an example.
Navigate to the root folder of your project in a terminal or command line.
```
        cd new-hugo-website
    
```
Run the command to add the Tale theme. You can add the theme as a submodule, which will create a new folder called tale inside the theme folder.
```
        git init
git submodule add https://github.com/EmielH/tale-hugo.git themes/tale
    
```
Alternatively, you can clone the GitHub tale repository into the themes folder of your project.
```
        git clone https://github.com/EmielH/tale-hugo.git themes/tale
    
```
Navigate to your project folder. Click on the themes folder to open it. Regardless of which command you used, there will be a new tale folder that stores the newly downloaded theme.
In the config.toml file, add the tale theme as part of the configuration. This will tell Hugo to use the HTML, CSS, and other styles that the Tale theme includes.
```
        theme = "tale"
    
```

How to Add Pages to Your Website

You can write your content in any format that Hugo accepts. Hugo will then automatically convert your files into HTML files when serving them to the user. This makes it fast to both build and deploy. This example will use Markdown, a simple plain-text language, as the format for your content.

You can write Markdown mostly in plain English with a few added symbols to specify any formatting. This includes adding symbols to represent headings, which words are bold, or any other basic formatting that you may need.

To add a new sub-page or post to your website, you will need to add a new Markdown file into the content folder. Each post or page will have its own Markdown file associated with it.

Open the content folder inside your Hugo project. Create a new Markdown file called myFirstPost.md.
Open the file in any text editor such as Notepad++ or Visual Studio Code.
At the top of the file, add some metadata. This will include important information about the post. The theme you are using will format this information a certain way on the page.
```
        ---
author: "Your Name"
title: "My First Post"
date: "2022-05-17"
---
    
```

After you have added the metadata, you can start adding your content using Markdown.

        This is my very first post on my Hugo website!
The Hugo theme being used for this site is called Tale.
It is very simple to install and configure.
# Subheading
This is some content.
# Another Subheading
This is more content.

Feel free to add more markdown files to add more pages to your website.

How to Run and Test Your Hugo Website Locally

To run your website, use the hugo serve command.

Open a terminal or command line.
Navigate to the root folder of your Hugo project.
Run the hugo serve command:
```
        hugo serve
    
```
Wait for the website to complete the startup process. Once that is complete, the terminal will print a message saying which local address you can access the website from. Usually, this is http://localhost:1313/.
Open a web browser and enter http://localhost:1313/, or whichever address the terminal gave you. You will see the main page of your Hugo website.
On the page will be a list of posts for each markdown file you have. In this case, there are two markdown files populated with content. This includes the myFirstPost.md page which you made earlier. It also includes a new post called bananaCakeRecipe.md.
Click on the heading link on one of the previews. It will take you to the full page for that particular post.

Hosting Your Hugo Website

Getting a static website up and running is simple and fast with Hugo. You can use and configure pre-built themes and run your Hugo website locally for testing. You can also add content pages to your website using Markdown.

Once you have created your Hugo website, you can start learning more about how to host it. There are many free website hosting options for you to choose from such as Dropbox, Google Drive, or OneDrive.