Hugo - as a static page blog
Andrรฉ Hatlo-Johansen
Posted on March 28, 2022
After the setup of my Jekyll site I came across Hugo.
Hugo is a static site generator, on the same line as Jekyll as it uses Markdown
to create blog posts.
The main difference i noticed after testing Jekyll against Hugo is that it's fast. It seems like it has Go under the hood.
Let me do a quick tutorial to setup Hugo, its very easy and almost only done in the commandline:
Hugo quicksetup tutorial:
Step 1: Install hugo
I use mac, so for those other operating systems out there:
Windows:
Get the Chocolatey package managment, then you can install Hugo with:
choco install hugo -confirm
Linux
Get Brew and follow the directions there.
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Run the brew
commend to install hugo
brew install hugo
MAC (command above)
Step 2: Create a new site:
Go to the directory where you want to create your Hugo
{:ruby} repo, then run this command:
hugo new site <name-of-site-dir>
Will create a new Hugo site in a folder named name-of-site-dir
.
Step 3: Add a Theme
Requirement:
git
is installed
See themes.gohugo.io to browse themes.
I will use the Ananke theme
Step into the site folder and run the folloing commands:
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
Now edit the config.toml
configuration file and add the Ananke theme:
Either echo it in from commandline:
echo 'theme = "ananke"' >> config.toml
Or edit it from your text editor:
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"
Step 4: Add content
hugo new posts/my-first-post.md
Edit the file if you like, you can use both Markdown
or Html
, your choice.
Step 5: Start the server
hugo server -D
Then navigate to http://localhost:1313/.
Step 6: Customize the Theme
You can tweak your site to personalise it before you release it to the public.
Site config
Open config.toml
in your favourite text editor.
Then replace title
with something personal and baseUrl
(if you have a domain already), like i did:
baseURL = "http://andrehatlo.org/"
languageCode = "en-us"
title = "Hello! I'm Andrรฉ :)"
theme = "ananke"
Tip:
Making changes to files in your new Hugo site
while the server is running will automatically update
the site and you will see the changes right away.
Now your site is up and running you can find more to do by reading the Hugo docs here
Note that i stayed with Jekyll even though Hugo was an awesome choice for a personal blog with the same features > but fast. This is mostly because i found that Jekyll was more intuitive when coming to posting and doing simple > customization. What ever you pick if you choose to start a blog/portfolio you cant go wrong either way!
Posted on March 28, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.