My previous portfolio site was built with Gatsby.js. As for Gatsby.js, I think it is easy to use and I personally like it, but I decided to rebuild it with Hugo simply because I wanted to try Hugo.
Requirements of my portfolio website
- Minimal pages such as top, 404 etc
- Markdown blog
- Deployed on Netlify
Comparison between Hugo and Gatsby.js
Hugo is a static site generator written in Go and Gatsby is React-based framework for creating websites and apps.
This page summarizes well the differences between Hugo and Gatsby.js
According to this page, I can say both of them is similar as SSG and you can choose one, depending on your personal preference and experiences. If you have experiences for React, probably it may be easier to start Gatsby.js. They both provide clear documentation and community support.
Using headless CMS
As for Hugo, I have a concern with using it with headless cms such as contentful. Headless CMS is a type of content management system that separates the back-end (content management and storage) from the front-end (display layer). Unlike a regular CMS, a headless CMS can retrieve content through an API and display it using different technologies and frameworks. If implemented in Gatsby, it can be easily done by using the starter template built by contentful.
I was also curious about how to implement it with Hugo, so i looked into it. I found that there is a library contentful-hugo. I found some articles in Google result and all solutions I found is using this library. Checking the number of stars on Github (when I wrote this article, it was 37), probably it is not popular to use headless CMS with Hugo. Probably if I had to implement web sites with headless CMS, I would use Gatsby.js or Next.js.
How to start Hugo
Basically if you follow this quick start, you can create a new static site with Hugo.
Here I will share set up flow on Mac. For installation on other OS, please check Install Hugo.
# install hugo
brew install hugo
# display the version and confirm that the installation was successful.
hugo versionAfter the installation, run these commands to create Hugo site with the Akane theme. If you want to create your unique theme, the installation of Akane theme is not required.
# Create site
hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
# Start local server
hugo serverHow to add content
You can add content to add a new page and Hugo created a new file in the content/posts directory base on archetypes/default.md.
hugo new content posts/my-first-post.mdThis is my archetypes/default.md.
+++
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
date = {{ .Date }}
draft = true
description = ""
+++This is the generated markdown file.
+++
title = 'My First Post'
date = 2024-01-08T11:41:41+01:00
draft = true
description = ""
+++How to add syntax highlighting in Markdown blog.
You can add syntax highlighting to code blocks. Hugo uses Chroma as its code highlighter
Simply you can run this command and you can use code block in markdown file.
hugo gen chromastyles --style=monokai > syntax.cssDeploy on Netlify
I deployed this site on Netlify. If you create your Netlify account, I think it is simple to deploy sites. Here is the summary,
- Create your Netlify account
- Connect repository on Github with Netlify
- Create netlify.toml in the base directory
[build]
command = "hugo"
publish = "public"
[build.environment]
HUGO_VERSION = "0.120.4"
For the deployment, I recommend to create netlify.toml though you can set values in Build Setting on Site Configuration screen.
On netlify.toml, it seems better to set HUGO_VERSION. Without this, the error below occurred during building on Netlify.
https://answers.netlify.com/t/cant-deploy-hugo-on-netlify/99111/2
12:37:54 PM: $ hugo
12:37:54 PM: Error: Unable to locate config file or config directory. Perhaps you need to create a new site.
12:37:54 PM: Run `hugo help new` for details.
12:37:54 PM: Total in 0 ms
12:37:54 PM:
12:37:54 PM: "build.command" failed