Create a Static Site in Hugo

How to create a static site in Hugo

Hugo is among the most popular static site generators. It is open source and fun to build sites with. There are several more static sites generators including jekyll and Gatsby.js as well as other js based web development frameworks. However, working with Hugo is more fun because it generates websites faster. With hugo, you can generate a site with hundreds of pages in less than a second. That’s how fast it works. Currently, the most popular use of Hugo is for making blog sites and portfolio sites.

In Hugo, posts are written in markdown language. You can easily create posts in markdown and in various regards it is easier to write posts in markdown compared to writing in html. The front matter in hugo makes it easy to set configurations for individual articles. Launching a blog in Hugo is even easier and with just two or three commands, you will have a Hugo blog running locally.

Hugo is fast and apart from generating websites very fast, it loads faster compared to most content management systems. Hugo also offers a vast theme repository and you can use any theme of your choice. There are several attractive themes with which you can launch an attractive blog in seconds.

Hugo also offers in-built templates to help you with various things like SEO. You can also create your own templates. You can also generate a sitemap automatically with Hugo. Its inbuilt templates help create canonical urls as well as social open graph data. You do not have to worry about SEO when using HUgo for blogging. Hugo themes are lightweight and fast and it is easy to customize them to give them the desired look. You can also easily deploy HUgo websites on Netlify, Github pages or cloudflare pages. There are several more options for deploying Hugo sites.

Create a blog in hugo

To create a blog in HUgo, you will need to first install Hugo on your operating system. If you are using Windows, you can easily install it using Chocolatey, Scoop or Winget. If you do not have chocolatey installed on your local machine, you can install it by going to https://chocolatey.org/install Otherwise, you can install Hugo easily with Winget.

To install Hugo using Chocolatey, open command prompt and run the following command:

choco install hugo-extended

To install using scoop:

scoop install hugo-extended

To install using Winget:

winget install Hugo.Hugo.Extended

Once you have installed Hugo on your local machine, you can start creating with Hugo. You will need to run the ‘hugo new site’ command to create a new site with Hugo followed by what you want to name the site folder. First change directory to the folder where you want to create the Hugo blog.

If you want to create it inside downloads directory, then change directory to downloads:

cd downloads

Now, create your new site with the hugo new site command:

hugo new site my-hugo-blog

I am calling it my-hugo-blog. You can name the base folder whatever you like or even give it the domain name for easy recall. After running the command, you will receive an output like the following:

C:\Users\ABHIJEET\Downloads>hugo new site my-hugo-blog
Congratulations! Your new Hugo site is created in C:\Users\ABHIJEET\Downloads\my-hugo-blog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Now, you will need to download a theme for your blog. We can git clone the theme easily into the root folder of the website. Change directory to the website folder you just created:

cd my-hugo-blog

Now, git clone the theme. We are going to use the mainroad theme for our blog:

git clone https://github.com/vimux/mainroad.git themes/mainroad

This command will download the theme into the themes folder inside the root folder of your website. We will only need to specify the theme inside our config.toml file which includes website configurations to make sure that Hogo uses the specified theme. For additional configurations using the mainroad theme or any other theme you selected, you must visit the theme website.

Now, we will first make a few changes inside the config.toml file inside our root folder. Open the file using an editor of your choice like Visual Studio Code. You will see the following content inside your config,toml file.

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

Change the base url to the url of your website and the title to the title of your blog. Additionally, specify the theme you are going to use for your blog like the following:

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Blog'
theme = “mainroad”

Now, we need to add a little content to our blog before we can launch it. So, we will add our first post to hugo and title it ‘hello world’. Posts are written in markdown in HUgo with the extension .md. To create new posts, we will use ‘hugo new posts’ command. The post will be added to the posts folder inside the content folder in the root folder of your website.

hugo new posts/hello-world.md

You will receive a notification that the ‘hello-world.md’ post has been created inside the root folder of the website. Now, just change the front matter inside the newly created post and add some content to it before taking a preview. Go to the posts folder inside the content folder. If you want, you can also rename the posts folder as blog or something else of your choice. Open the posts folder and then open the newly created post in an editor of your choice. You will see some front matter added already to the post:

---
title: "Hello World"
date: 2024-05-12T14:41:44+05:30
draft: true
---

Add a few lines of content to the post like the following:

## My first Hello World Post

This is my first post in Hugo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

After having added the content, change the status of the post from draft to published. Change from draft : true to draft: false, which will change the post status to published.

Now, run the command hugo to build the website and then run hugo server to check out the site locally.

hugo 
hugo server 

Check out your website locally at http://localhost:1313/.