DEV Community

Cover image for Hugo - as a static page blog
André Hatlo-Johansen
André Hatlo-Johansen

Posted on

Hugo - as a static page blog

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
Enter fullscreen mode Exit fullscreen mode

Linux

Get Brew and follow the directions there.

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Enter fullscreen mode Exit fullscreen mode

Run the brew commend to install hugo

brew install hugo
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Now edit the config.toml configuration file and add the Ananke theme:

Either echo it in from commandline:

echo 'theme = "ananke"' >> config.toml
Enter fullscreen mode Exit fullscreen mode

Or edit it from your text editor:

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"
Enter fullscreen mode Exit fullscreen mode

Step 4: Add content

hugo new posts/my-first-post.md
Enter fullscreen mode Exit fullscreen mode

Edit the file if you like, you can use both Markdown or Html, your choice.

Step 5: Start the server

hugo server -D
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)