Skip to content

Hugo

Themes

Easy to install, fast, no dependencies.

Installing Hugo (Mac)

I installed hugo using home brew using the following command:

brew install hugo 
mkdir TestHugo
hugo new site ~/TestHugo/

Installing Hugo (Windows)

To install on windows, first I needed to install a package manager so that I could install software via command line. I chose to install **Chocolately,** which was recommended by the Hugo install website.

Installing Chocolately Package Manager

To install, I ran the PowerShell as administrator and copied and pasted the following code to install the package manager.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Hugo%20c184c881ad024d10bced81246fa3ebb7/Untitled.png

After this is done, I ran the following code in PowerShell to install Hugo.

choco install hugo -confirm

This installed Hugo on my Windows workstation. Everything worked as expected, and took about 5 minutes to install everything.

Creating a New Hugo Website

To make a new Hugo website, you need to create a directory to install the Hugo skeleton package of files into.

hugo new site ./ # This will install new website into the current directory. 

Hugo Skeleton Structure

Archetypes - not important, more for advanced projects. will not be using, delete.

Content - were all website content is stored. Blog post, etc.

Data - not important, psuedodata base, put data files, etc. will not be using, delete.

Layout - standarize designs components across all website pages, etc. Useful.

Static - really important, things that don’t change, imagine, css, js, etc.

Themes - prebuilt themes

Config.toml - settings page for the website.

Configuration

The configuration file is in the root directory of the Hugo site and is called config.toml. Here is where you can add and edit site variables, such as the title of your website. You can also add custom variables under the params section.

baseURL = "http://jamesdavidrutter.com/"
languageCode = "en-us"
title = "James Rutter"

[params]
description = "This is a new site description" 

Variables

The variables can be referenced from within your HTML or MD pages as you build your website.

<body>
    <header>
      <h1>{{.Site.Title}}</h1>
      <p>{{.Site.Params.Description}}</p>
    </header>
 </body>

Layouts

Layouts are the template HTML files. There are _default, partial, and index.html.

index.html

This is the homepage of the website. You can reference partials and site variables using the {{ }} notation in Hugo.

_default

These are the default page layout templates. So far, I have only created one layout single.html (shown below). Note that there are different site variables to access page specific content.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>{{ .Page.Title }}</title>
  </head>
  <body>
    <header>
      <h1>{{ .Page.Title }}</h1>
      <p>{{ .Page.Params.Description }}</p>
    </header>

    {{ partial "navigation.html" . }}

  </body>
</html>

partials

To create partial, standardized components for your website, you develop HTML files in a directory /layouts/partials. These can then be referenced within layouts for webpages.

Content

Content is where the actual content is to be located for your website and gets pulled into the layouts when Hugo creates the website. These are created using markdown files.

Hugo Server

You can run your website locally though Hugo’s server by using the following command:

hugo # run this to create public directory (builds website?) 
hugo server # run this to begin local server for testing/preview 

Install Themes

To make a Hugo website quickly, you can install a Theme from the Hugo Them library.

Hugo%20c184c881ad024d10bced81246fa3ebb7/Untitled%201.png

I picked Eureka to start with since it looks like a nice simple theme. When you select a theme, you need to download it and install it into your site directory.

Hugo%20c184c881ad024d10bced81246fa3ebb7/Untitled%202.png

I am a little confused how to properly add a theme package into a Hugo site. I should probably read the documentation that comes with the theme, and also keep watching the video.

delete: Archetype, Data, and Theme directories

edit: Config file

create: index.html (“/layout/index.html”)

Fab Web Basics / Day 04 / Using Static Website Generator

Installing & Using Themes | Hugo - Static Site Generator | Tutorial 5

GoLang, developed by Google. Similar to Python


Last update: May 7, 2021