Building Hugo Pages for Absolutely Beginner

Preword

I can’t find any themes that supports my photography needs in Jekyll. Therefore, I am going to build a Hugo site specially for photography.

I tried this 2 months ago, but it doesn’t work. I can’t find decent tutorial to apply the theme that I want, most of Quick Start documentation will assume people know how Go works.

Goal to achieve

In this article, I want to show you how to create a Hugo project for Photography purposes.

Editor

I am using a Mac for this setup. Below is the list of software I use for building the site. Although Hugo is created with Go, it is unnecessary to use GoLand from JetBrains, Visual Studio Code will do the job.

Extensions

No extension is necessary, using Visual Studio Code without Go extension is still fine.

Installation

There are several programs that required to be installed. Begin with the most obvious one.

GVM (Go Version Manager)

Instead of installing Go, I prefer to install GVM, GVM is short of Go Version Manager. This program will allow us to change Go version in our system.

# Linux Only, Mac already have it pre-installed
$ sudo apt-get install bison

# Install GVM
$ bash < <(curl -s -S -L https://raw.githubusercontent.com/moovweb/gvm/master/binscripts/gvm-installer)

# Install Go, from binary, since we do not have Go installed.
$ gvm install go1.22.10 -B

# Check installation
$ go version
# go version go1.22.10 darwin/arm64

Hugo

To install Hugo, we need Homebrew.

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

# Install Hugo
$ brew install hugo

Starting Project

Assume I work in directory /Users/kokowilly/workspace, the folder workspace will be the parent of all project that I have. First, move to workspace folder.

# Navigate to home folder
$ cd /Users/kokowilly

# Create workspace folder
$ mkdir workspace

# Navigate to workspace folder
$ cd workspace

Creating Hugo Project

Starting from this folder, we can create the project.

# Create project with name foto.kokowilly.id
$ hugo new site foto.kokowilly.id

# Move to project directory
$ cd foto.kokowilly.id

From here, you can test the project. However, error is expected:

# Serve Project locally
$ hugo serve

when you open the URL in browser, usually http://localhost:1313/. It will shows like this:

Hugo Error

Don’t worry, that is indication that we are doing just fine.

Installing Galleries Deluxe

My prefered way to install the theme is by using Go Module. Because I don’t have to clone the project, but I still have the ability to override the theme. Here is how:

Link with theme

in hugo.toml file, add these lines in the bottom most.

...

[module]
    [[module.imports]]
        path = "github.com/bep/galleriesdeluxe"

Create go.mod file

In your project folder, run this command:

# change github.com/kokowilly/foto.kokowilly.id to your project ID
$ go mod init github.com/kokowilly/foto.kokowilly.id

Then modify your go.mod file:

module github.com/kokowilly/foto.kokowilly.id

go 1.22.10 

// add lines below
require (
        github.com/bep/galleriesdeluxe v0.4.0 // indirect
        github.com/bep/gallerydeluxe v0.12.0 // indirect
        github.com/bep/hugo-mod-misc/common-partials v0.1.0 // indirect
)

You can adjust the version of galleriesdeluxe, gallerydeluxe, and common-partials. To adjust, you can find it in the galleriesdeluxe’s project release page

With this, you finally get the theme working. Try to run:

$ hugo serve

                   | EN  
-------------------+-----
  Pages            |  7  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  1  
  Processed images |  3  
  Aliases          |  0  
  Cleaned          |  0  

Built in 217 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) 

This is what you will get when you go to the url provided, in this case http://localhost:1313/

Initial

Configuration

There are several config that you might want to set in hugo.toml file. I put comment around them.

baseURL = 'https://foto.kokowilly.id/'
languageCode = 'id-ID'
title = 'Galeri Foto Kokowilly'

[taxonomies]
    category = 'categories'

[caches]
    [caches.images]
        dir    = ':cacheDir/galleriesdeluxe'
        maxAge = "4320h"                     # 6 months.

[params]
    [params.author] # these configuration is for the footer part
        name        = "Willy Ricardo Wijaya"
        email       = "[email protected]"
        description = "Kokowilly's Photo Gallery"

    [params.galleriesdeluxe] # this to set your background and CSS compiler
        # One of dartsass or libsass.
        sass_transpiler = "dartsass"
        [params.galleriesdeluxe.sassvars]
            color_background = "#151805" # set your background

[params.gallerydeluxe] # this configuration for how the photo shown
    shuffle     = true
    reverse     = true
    enable_exif = false

[module]
    [[module.mounts]] # these folders are where we want Hugo to build
        source = "assets"
        target = "assets"
    [[module.mounts]]
        source = "content"
        target = "content"
    
    [[module.imports]] # this is what we put before
        path = "github.com/bep/galleriesdeluxe"

with this configuration, now we could put more configuration for the gallery. Create the file in assets folder: assets/scss/galleriesdeluxe/vars-custom.scss, contains:

/* Override any SCSS variable here. */

/* $color-background is also defined in site config (params.galleriesdeluxe.sassvars), which will win. */
$color-background: #fff !default; // this will be ignored, as comment above mentioned
$color-background-footer: darken($color-background, 1%) !default;

/* Set the primary and secondary color to contrast and fit with that background. */
$color-primary: #ff8888 !default; // color of hyperlinks
$color-secondary: #aa4444 !default; // can be ignored for now

There, the configuration is already complete, now you can test again with hugo serve.

Configured Hugo

Closing

Working with Hugo is a challenging job, to make it works in the first place is little bit harder than working with Jekyll. But, once it configured, it just like walk in a park.

Put your information in in the web.
Creating galleries
Override the theme