Hugo¶
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'))
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.
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.
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”)
References (useful links)¶
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