Featured image of post Build a blog with Hugo (gohugo.io)

Build a blog with Hugo (gohugo.io)

a story on how I built this blog


In this post I will show you how I built this blog. I will go through the steps of setting up the blog, adding a theme, writing a post and deploying it to vercel.

Used Technologies

Building the blog

Install Hugo

I am using Ubuntu, so maybe there are commands that won’t fully work on your distro, but you can reference the official documentation anytime here: Hugo Docs.

  1. get the latest version of hugo from here
wget https://github.com/gohugoio/hugo/releases/download/v0.121.2/hugo_extended_0.121.2_linux-amd64.tar.gz 
  1. extract the tar.gz file
tar -xzf hugo_extended_0.121.2_Linux-64bit.tar.gz
  1. move the hugo binary to /usr/local/bin
sudo mv hugo /usr/local/bin
  1. delete unnecessary files
rm hugo_extended_0.121.2_Linux-64bit.tar.gz LICENSE README.md
  1. check if hugo is installed correctly
hugo version
  1. output should look like this:
hugo v0.121.2-6d5b44305eaa9d0a157946492a6f319da38de154+extended linux/amd64 BuildDate=2024-01-05T12:21:15Z VendorInfo=gohugoio

Setup file structure

  1. make a new directory for your blog
mkdir blog
cd blog
  1. initialize hugo
hugo new site .
  1. clone the theme repo into the themes folder
cd themes
git clone https://github.com/CaiJimmy/hugo-theme-stack.git
cd ..
  1. copy the config.yaml file and some example posts from the theme repo into the root folder and remove the hugo.toml file
cp themes/hugo-theme-stack/exampleSite/config.yaml .
cp -r themes/hugo-theme-stack/exampleSite/content/ content/
rm hugo.toml

Running and modifying your blog

  1. now you can change the params of the config file to your liking, for example the title of the blog

  2. run the server to see if everything works

hugo server
  1. open your browser and go to http://localhost:1313 to see your blog

  2. if you want to add a new post, you can just copy a example post and change the content

Deploying to vercel

How to deploy your blog to vercel, so that it is live on the internet

Main steps

  1. create a new project on vercel and connect it to your github repo

create new vercel project

  1. select your github repo where you saved the files of your blog

import git repo

  1. set the framework preset to Hugo
  2. override the following build command and output directory of the vercel project settings, and set the hugo version to the one you installed as an environment variable

build command: amazon-linux-extras install golang1.11 && hugo --gc --minify

output directory: public

env variable: HUGO_VERSION 0.121.2

changes to project settings

also don’t forget to name your project and set the root directory to where your blog files are located in the git repo

  1. now you click Deploy and after a minute or so your blog is published to vercel:

if you click on the link you will see your blog live on the internet

successful deployment

Add custom domain

adding a custom domain to your blog is pretty easy, just go to the project settings and click on Domains and add your domain

just follow the instructions from vercel and add the accoriding CNAME record to your DNS provider (vercel will tell you what to add)

add custom domain

Good to knows

Add robots.txt for SEO

for SEO purposes you should add a robots.txt file to your blog, so that search engines can crawl your site

  1. create a robots.txt file in the layouts folder
touch layouts/robots.txt
  1. add the following content to the file, for more infos on robots.txt check here
User-agent: *
Allow: /

Sitemap: https://yourdomain.com/sitemap.xml
  1. add the following line to the config.yaml file
enableRobotsTXT: true
  1. you can check if it works by going to www.yourdomain.com/robots.txt in your browser
Built with Hugo
Theme Stack designed by Jimmy