Why building a website with Hugo?
In short, it’s a really fast and simple way to have a static website to yourself, through which you can display your recent projects, share your thoughts, and have fun with it.
Before we officially start…
The tutorial is based on macOS and I’m using GitHub Pages for deployment.
Tools you’ll need
- Terminal
- A text editor like
VSCode - A GitHub account
hugo
Setting up
- Open your terminal - easy!
⭐️ tip: command + space and search terminal in your Spotlight
- Install
hugo
brew install hugo
To check that hugo is properly installed,
hugo version
Your terminal should look something like
hugo v0.101.0+extended darwin/arm64 BuildDate=unknown
- Install
git
git --version
If you already have git installed, it will look something like
git version 2.35.0
If not, the command will automatically prompt installation.
Now… How do we actually make the website?
Build it locally first
- Locate a Directory and Create a New Site!
You may want to cd into a specific directory for your new website, such as your Documents or Desktop. For this tutorial, I will create a new directory
cd Desktop
hugo new site yourPreferredFolderName
I will use personalWebsite as my folder name.
- Add a Theme and Edit the Config File
While you can certainly create your own theme, there are many themes premade for you. For simplicity, I will choose a theme called PaperMod (because I like its minimalist design). There are many different ways to install a theme, and I would recommend you to check out the Installation page for your theme of choice. For PaperMod,
cd personalWebsite
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
Once that’s done, you should see a folder named PaperMod being created in your themes folder. Now, head to your config file. Based on how the author of your theme decided to implement the config file, it may be in toml or yml or json. Just follow the format you see and add theme = "the same as theme name (exactly the folder name) in your themes folder". In my case, since it’s in yml, I would add a line that says theme: "PaperMod" in my config file.
Themes usually also provide sample config.yml files, of which you can definitely take advantage.
- Add some content
This step isn’t completely necessary, but it provides you a base for visualizing the website. Following the quick start guide provided by Hugo, we will add a post under the posts folder. After the following command,
hugo new posts/my-first-post.md
you should be able to find a new file in the content/posts folder named my-first-post.md. Open your text editor, and you should find a markdown file with a front matter that looks something like this
---
title: "My First Post"
date: 2019-03-26T08:47:11+01:00
draft: true
---
You can add any text, pictures, links, etc. that you like underneath the front matter. Make sure to save the file in your text editor before moving on to the next step.
- Check it out in Your Browser!
hugo server -D
The -D stands for drafts, so it will render posts even if draft: true is being included. Copy the link http://localhost:1313/ into your browser and you’ll be able to check it out!
- Get Ready for Publication
hugo
In your root directory, type the command, then a public folder will appear with all of your static information. Say you want to showcase your website on GitHub pages, you can then cd public and push the folder to your GitHub repo.
There are many ways to host your website, such as using services like netlify.