=================
== Claus' Blog ==
=================
Made with Hugo and ❤️

A new beginning with Hugo

#hugo #linux #development #howto #markdown

Table of Content

While installing and building a site with Hugo is not rocket science, I wanted to share some notes on my first steps. Maybe this will become a series.

You need 5 things before you can run Hugo. In my trials, brew.sh was the easiest way to install the prerequisites on Linux.

Installation

The installation steps are mostly taken from the officially Hugo documentation at gohugo.io.

git

Use the package manager for your distribution:

1sudo apt install git

go

Go is an open-source programming language developed by Google. It is designed to be efficient, simple, and reliable, making it suitable for a wide range of applications. You need go for hugo.

For linux there a pre-built binaries:

1cd ~
2mkdir tmp
3cd tmp
4wget https://go.dev/dl/go1.22.2.linux-amd64.tar.gz
5tar xzf go1.22.2.linux-amd64.tar.gz ~/go
6echo 'export PATH=$PATH:~/go/bin' >> ~/.profile
7source ~/.profile

brew.sh

brew.sh is a package manager for macOS and Linux operating systems. It allows you to easily install and manage various software packages and libraries on your system.

Brew provides a installation script:

1/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Pay attention to the instructions after the installation has finished! There is a command to add the new binaries to your PATH variable and other hints. You may need to install a necessary package (including gcc) for the next steps (in Debian/Ubuntu).

1sudo apt install build-essential

Dart Sass

Dart Sass is a popular implementation of the Sass (Syntactically Awesome Style Sheets) language. It is a CSS preprocessor that extends the capabilities of CSS, allowing you to write more maintainable and modular stylesheets.

To install Dart Sass, you can use the following command:

1brew install sass/sass/sass

Finally Hugo

1brew install hugo

Create a site

Creating a site is easy as well. The hard part - at least for me - comes later, when you try to adapt a theme to your needs and create a site structure. But first things first:

1hugo new site quickstart
2cd quickstart
3git init
4git submodule add \
5 https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
6echo "theme = 'ananke'" >> hugo.toml
7hugo server -D

You can visit your newly created site at http://localhost:1313/. You can use vscode or ssh to tunnel your browser to this port. Changing the site will automatically refresh your browser, which makes it very convenient to develop a Hugo site.

Create new content / page with:

1hugo new content content/posts/my-first-post.md

You can edit the newly created file and see the updates directly in your browser. Note the -D switch when running hugo server. It means that drafts will also be displayed. While Hugo uses Markdown out of the box, there is a part at the top of the new page called Front Matter. Here you can configure some parts - depending on your theme - of your newly created page. Also the draft = true value.

What’s coming next?

Next time i will add some notes regarding the following topics:

  • Things I wish I’d known before I started using Hugo
  • Adding and customising a theme
  • Deploying a Hugo site
  • Using github pages to host the site and automatically build the site using github actions.

Closing words

For more information on Hugo and its usage, you can refer to the official Hugo documentation.