Static Site Generation with Hugo

Hugo is a fast and modern static site generator written in Golang. Hugo is the world’s fastest static site generator, wondering what a static site generator is? will explain it in the Third paragraph, till then let’s discuss Hugo. Hugo is primarily written in Golang, But you don’t need to know Golang to work in Hugo. Website generation in Hugo is very simple and straightforward, only prerequisites are HTML and CSS. It was created by Bjørn Erik Pedersen, also known as “bep,” its first release was on July 17, 2013.

Getting Started with Hugo

Hugo is a very trending technology for creating static websites. It is being used by both companies and Individuals for creating fast and responsive Static Websites. Companies have been increasingly using Hugo because it can create the fastest static websites, while individuals have been using Hugo because of the built-in templates and support of a large open-source community behind it. In this article we will be learning about Hugo, its file structure and will be creating a basic Hugo Website.

What is a Static Site?

A website that has fixed content (content that does not change) unless manually added, removed, or updated by someone, is considered a static site. In most of the cases, websites related to blogs and documentation are static sites.

Example:

We must have watched YouTube’s website. what do you think, is it a static site or not? it is not a static site since the content can be changed by uploading your video. These websites like YouTube, Twitter, and LinkedIn, are called Dynamic sites. Have you heard of Bootstrap, if you are a web developer, chances are that you might have heard about it. The Bootstrap’s blog website is written in Hugo and it’s a static website.

static site is a type of website that consists of web pages with fixed content that does not change unless manually edited and updated by a developer or content creator. In a static site, the content is pre-generated and stored as HTML, CSS, and possibly JavaScript files, which are served directly to users’ web browsers when they visit the site.

Hugo builds pages when a developer or content writer creates, removes, or updates the content unlike technologies like React which dynamically builds a page with each visitor request. Therefore, Hugo is called a static site generator.

Advantages/features of Hugo

Hugo comes with a lot of advantages:

1. Speed: Hugo is insanely fast, it builds a page in less than a millisecond. This makes Hugo “the fastest static site generator in the world”. a major credit of this goes to Go in which Hugo is written.

2. Open-source and community support: Hugo has a large community of professionals using it and since it’s open-sourced, it has a large community of programmers contributing to the code base helping to make it better day by day.

3. Easy to use themes: Hugo comes with a lot of free and open-source themes for absolute beginners to create their first Hugo site easily. Their are some paid Hugo themes for professionals as well.

4. Content: Hugo allows to display content in multiple file formats like (yaml, toml, and json) which makes the journey of content creation with Hugo really smooth. It is very simple and straight-forward in Hugo to create content, since Hugo can directly fetch content data from a markdown file.

These are some of the major advantages of Hugo, to learn more you can checkout the official Hugo features page.

Steps to Create a Hugo Site

Step 1. “hugo new site [path]” creates a skeleton site directory structure. Navigate to the directory where you would like to keep your hugo website.

Step 2. In this folder, create a folder called “getting-started”

Step 3. Open this folder with VS Code.

Step 4. Run the command “hugo new site ./” . You will see the following files in the getting-started folder.

Getting Started folder

Now before continuing the steps we need to understand structure of a Hugo site first. We will be continuing the steps after understanding the structure of a Hugo site.

Structure of a Hugo site

Archetypes:

• Holds templates for the creation of markdown files.
• The default format for front matter is using YAML.
• Some people prefer to use TOML. We will be using YAML as its simpler to work with.
• Each website page is generated from a markdown file.
• The page content (markdown) is placed below the front matter closing tag (—)

Archetypes folder has a file called default.md. This file specifies the template that will be used in markdown files of the entire project. The format we specify here will be used in the entire project.

default.md

We have set draft to true. You can set it to false so that the markdown files will be ready to publish by default.

Content:

• The content directory is where markdown files for each website page are stored.
• You can create new markdown files with the command “hugo new [path]”
• Example – “hugo new about /index.md” . This creates a markdown file in /content/about/index.md
• The page will be available at / about/index.html or /about/

Data:

• The data directory is for storing data which is shared between pages.
• It supports data in format of YAML, TOML and JSON.
• You can insert the data into pages for that you need to have to have a markdown (.md) file for each page.

(Note: you can’t generate pages directly from data files, This is a limitation of Hugo as of now (13th Aug 2023)

Layouts:

• Layouts define blocks which are included in baseof.html
• Markdown files (.md) will not be rendered if you layouts directory is empty.

Static:

• Stores all the static content. This content includes images, CSS and JavaScript.

Themes:

• Themes Directory includes the themes of the project.
• We can create our own theme in Hugo or simply clone someone else’s theme
• Hugo has a support of a lot of free open-source themes that can be used.

hugo.toml:

• This is where website configurations are done.
• you can also convert it to JSON, YAML formats.

Continuing the Coding part:

Step 5. Create a new home page with the command

“hugo new _index.md”

This will generate a _index.md file in content folder. You can add content to the file or simple jump to Step 6

Step 6. Add content to the index.md file from layouts folder

index.html

Step 5. Use this command to check you website

“hugo server”

Step 6. Go to http://localhost:1313/ and check you Hugo website out

Hugo Website

Let us see a code snippet of a more complex Hugo site:

Code Snippet

Here is a code snippet of a portfolio website that was made by me in Hugo:

hugo.yaml (yaml is a file format similar to .toml)

Note: this code is not written in Go, consider this code as a .yaml code file.

Go

baseURL: "https://1shubham7.netlify.app"
languageCode: en-us
title: Shubham Singh
theme: PaperMod

menu:
  main:
    - identifier: home
      name: Home
      url: /
      weight: 10
    - identifier: experience
      name: Experience
      url: /experience
      weight: 20
    - identifier: blog
      name: Blog
      url: /blog
      weight: 30
    - identifier: projects
      name: Projects
      url: /projects
      weight: 40
    - identifier: search
      name: Search
      url: /search
      weight: 50

params:
  # theme
  showToc: true
  TocOpen: false
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  hideMeta: false

  # for enchanced SEO
  env: production

  # Home Page
  profileMode:
    enabled: true
    title: "Shubham Singh"
    subtitle: Hi there ????! This is Shubham. I am First year undergrad (Computer Science Engineering), I am an open-source enthusiast. I am a web developer, Android developer, and right now I am learning DevOps. When not coding, you will find me reading books and listening podcasts around history, geopolitics, tech and entrepreneurship.
    imageUrl: "home/me.jpg"
    imageWidth: 250
    imageHeight: 250

  # List View
  hideDescriptionInList: false

  # cover image for posts
  cover:
    hiddenInList: false # hide on list pages and home
    hiddenInSingle: false # hide on single page

  socialIcons:
    - name: "github"
      url: "https://github.com/1shubham7"
    - name: "email"
      url: "mailto:shubhammahar1306@gmail.com"
    - name: "linkedin"
      url: "https://www.linkedin.com/in/shubham-singh-5a002b20b/"
    - name: "twitter"
      url: "https://www.twitter.com/1shubham7"
    - name: "cv"
      url: "https://drive.google.com/file/d/1PJBOAeSZjNYeE1da-ICYh3Nll_l1Zaw0/view?usp=sharing"

  # text search
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    keys: ["title", "permalink", "summary", "content"]

# for search using Fuse.js
outputs:
  home:
    - HTML
    - RSS
    - JSON

# allow HTML in MarkDown
markup:
  goldmark:
    renderer:
      unsafe: true

This hugo.yaml file along with other content and layouts file results in this website. See, It is that easy to create your own website on Hugo. Hugo is based on Golang therefore the website we created here is one of the fastest website on the planet. It’s then Hugo’s job to convert the markdown file into HTML content so that it can be displayed on the browser.