Featured image of post Build a Crazy Fast Website with Go and the Hugo Framework

Build a Crazy Fast Website with Go and the Hugo Framework

Dive into building a very fast Website in Go with a static backend

Hugo

Go

A Brief History of Go and Hugo

Go, often referred to as Golang (because, you know, adding “lang” makes it fancy), was designed at Google in 2007 to improve programming productivity in an era of multicore, networked machines and large codebases. The designers wanted to address criticisms of other languages in use at Google, but keep their useful characteristics. Go was publicly announced in November 2009, and version 1.0 was released in March 2012. Go is widely used in production at Google and in many other organizations and open-source projects. Source

Hugo is a static site generator written in Go. Steve Francia originally created Hugo as an open source project in 2013. Since v0.14 in 2015, Hugo has continued development under the lead of Bjørn Erik Pedersen with other contributors. Hugo is licensed under the Apache License 2.0. Source

Why Hugo? Because Speed Matters!

Hugo is a static site generator, which means it builds your website as a collection of static files—no server-side processing needed. This approach offers several advantages:

  • Speed: Static sites load faster than you can say “supercalifragilisticexpialidocious.”
  • Scalability: Easily deploy your site on a Content Delivery Network (CDN) for global reach.
  • Simplicity: Host your site on platforms like GitHub Pages for free. Yes, you heard that right—free hosting!

Getting Up and Running with Hugo

So, you want to build a crazy fast website with Hugo? Let’s get started!

Step 1: Install Hugo

  • Windows: Download and install Hugo from Hugo Releases
  • Mac: Install via Homebrew:
    1
    
    brew install hugo
    
  • Linux: Install via Snap:
    1
    
    snap install hugo
    

More installation options can be found in the official Hugo installation guide.

Step 2: Create a New Hugo Site

1
2
hugo new site my-awesome-site
cd my-awesome-site

Step 3: Start a Local Development Server

1
hugo server -D

This will start a local server at http://localhost:1313/ so you can preview your site.

Step 4: Add Content

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

Edit the content/posts/my-first-post.md file and add some Markdown magic.

Step 5: Build the Site

1
hugo

This generates your static files in the public/ directory.

Step 6: Deploy the Site

You can deploy your Hugo site to GitHub Pages for free! Here’s how:

1
2
3
4
5
git init
git add .
git commit -m "Initial commit"
git remote add origin <your-github-repo-url>
git push -u origin main

For more deployment options, check out Hugo Deployment.


Hugo Concepts: Wrangling Content Like a Pro

Content Formats

Hugo supports multiple content formats:

  • Markdown (default)
  • HTML
  • AsciiDoc (Docs)
  • reStructuredText (Docs)

Example: Markdown

1
2
# My First Blog Post
This is a paragraph in Markdown.

Example: AsciiDoc

1
2
= My First Blog Post
This is a paragraph in AsciiDoc.

Example: reStructuredText

1
2
3
My First Blog Post
==================
This is a paragraph in reStructuredText.

Front Matter

Front matter is metadata at the start of a content file. Example:

YAML

1
2
3
4
5
6
---
title: "My First Post"
date: 2024-12-15
tags: ["Hugo", "Static Site"]
draft: false
---

TOML

1
2
3
4
5
6
+++
title = "My First Post"
date = "2024-12-15"
tags = ["Hugo", "Static Site"]
draft = false
+++

JSON

1
2
3
4
5
6
{
  "title": "My First Post",
  "date": "2024-12-15",
  "tags": ["Hugo", "Static Site"],
  "draft": false
}

Build Options

You can customize build options in config.toml:

1
2
[build]
  writeStats = true

Page Resources

Example of using page resources:

1

My Image

Image Processing

1
2
3
{{ $image := resources.Get "image.jpg" }}
{{ $resized := $image.Resize "300x" }}
<img src="{{ $resized.RelPermalink }}" alt="Resized Image">

Shortcodes

Example shortcode:

To display a YouTube video with this URL:
https://www.youtube.com/watch?v=0RKpf3rK57I

Include this in your Markdown:

1

Hugo renders this to:


Extending Your Hugo Website with Themes

To install a theme:

1
git submodule add https://github.com/some/hugo-theme themes/mytheme

Update config.toml:

1
theme = "mytheme"

Extending Your Hugo Website with Go Plugins

Create a new Go plugin:

1
2
3
4
5
6
7
8
9
package main

import (
    "fmt"
)

func main() {
    fmt.Println("Hello, Hugo Plugin!")
}

Compile and use the plugin:

1
2
go build -o myplugin main.go
./myplugin

Framework Comparison: Go vs. Other Frameworks

FrameworkProsCons
Go (Hugo)Fast, efficient, minimalistic, great for static sitesLimited dynamic functionality
ASP.NET CoreRobust, enterprise-ready, great for APIsHigher learning curve, heavier than Go
ReactRich ecosystem, component-based UIRequires client-side rendering, can be heavy
Blazor.NET-based, allows full-stack C#Larger bundle size, requires WebAssembly

Key Ideas

ConceptDescription
Go LanguageA fast, statically typed language by Google.
Hugo FrameworkA blazing-fast static site generator.
Content FormatsMarkdown, HTML, AsciiDoc, and reStructuredText.
Front MatterMetadata for your pages.
Build OptionsCustom settings for site generation.
Page ResourcesAssets tied to specific pages.
Image ProcessingResize, crop, and filter images within Hugo.
ShortcodesDynamic content snippets in Markdown.
ThemesPre-built styles for easy customization.
Go PluginsExtend Hugo’s capabilities with custom Go code.