darling docs

Building a static site I

Documenting my experiences building a static site using Hugo: part 1

Buying a domain

I chose to begin my SSG journey by purchasing and registering a domain. I did so through Namecheap, which was quick and convenient.

Begin with Hugo

I built my SSG on using Windows 10, PowerShell, and chocolaty. The Hugo website details different installation procedures depending on your setup. Here was my process:

  1. Follow the instruction documents on Hugo’s install page, open PowerShell terminal and enter: choco install hugo -y
  • Note: Hugo docs state choco install hugo -confirm, but you can override -y for automatic yes.
  1. Return to Quick Start, Step 2: hugo new site quickstart.
  • Hugo generates a new site in the folder: user\<user-name>\quickstart.
  1. Add a theme to the site’s themes directory:
cd quickstart
git init
git sumbodule add https://github.com/<name-of-repo>.git themes/<name-of-theme>
  1. Add the theme to the site configuration: echo 'theme = "<name-of-theme>"' >> config.toml.
  2. Add content! Create files manually or use the command line.
  • Manual: content/<category>/<file>.md
  • Command line: hugo new posts/<file>.md

Create content

Files require a Hugo-specific header:

title: "Title-here"
date: <date>
draft: <true>

Hugo allows you to set your posts to: draft, publishdate, and expirydate in the front matter header. This allows you to control when your content will be published.

Depending on your theme, there may be additional notes for the header. For example, my headers also include:

image = "img/portfolio/<image>"
showonlyimage = false
weight = ##

This establishes the home page design.

Render draft content

A wonderful benefit to Hugo is the real-time rendering of your website. While updating content and pages, I can monitor how the changes will be displayed.

To start the Hugo server with drafts active:

  1. Launch terminal.
  2. cd quickstart.
  3. hugo server -D.
  4. To render: enter http://localhost:1313 information into Chrome.

This render will update as you make local changes.

When finished, in the terminal, press ctrl+c to stop the render.

Additional notes

  • Header page weight is the position of the post in the cascade.
  • The header date is the date of the GitHub repo (changing the date will create a 404 error).
  • Static folder houses the images for posts and pages; you can add additional folders within this space (for example, I have a works folder and an img folder).