Getting Started with Hugo

Let’s explore how I got this blog started with Hugo, including both the GIT setup, as well as the deployment to Netlify.

What’s Hugo? It’s a static website generator. It’s written in Go, it’s light weight, doesn’t require a server, processing or database. It simply generates all the content into static HTML files, for really fast browser rendering, and fast transmission across the internet.

Why Hugo? I’ve done a lot of Wordpress, and very familiar with all the ins and outs of getting that setup. For personal use, I was wanting something lightweight, and more in line with my personal and professional projects, which all rely on storing what you do in a git repo. This allows me to put my blog into files, take them with me, and simply commit a change when I’m ready.

So how does it work? Well, when you want to use Hugo, you basically write a bunch of files using Markdown, which is one of the lightest weight methods of annotating the format of the files. (And if I really want to, I could extend Hugo to support more).

hugo deployment

After I make any (1) changes to a blog post, it is simply a matter of (2) commiting the change, and pushing the change to GitHub. Netlify then picks up on the change, executes a Hugo build process. This process builds that static files (think index.html, etc) and then Netlify deploys this.

How hard is it to get going?

On a mac, simply run brew install hugo
Go to a directory where you want to create your website
Run hugo new site and a new directory will be created.
Switch to the directory, and create a config.yml file (see below)
Create a new post hugo new blog/first-post.md (and you’ll want to edit content/blog/first-post.md)
Now you’ll need to do a git init, push this repo into GitHub, and have complete version control.

To get this site live, the next step would be to leverage Netlify to push this to production automatically.

To install the papermod them I used, just run
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/papermod

config.yaml:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
baseURL: "https://menno.vanderlist.ca/"
languageCode: "en-us"
title: "menno."
theme: "papermod"

buildDrafts: true
outputs:
  home:
    - HTML
    - JSON
    - RSS

enableGitInfo: true
enableRobotsTXT: true
params:
  env: production
  title: "Menno Vanderlist"
  description: "personal opinions and amusing thoughts (and maybe some ramblings.)"
  author: "Menno Vanderlist"
  ShowReadingTime: true
  ShowShareButtons: false
  ShowPostNavLinks: false
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: false
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: false
  hidemeta: false
  hideSummary: tru
  #showtoc: true
  #tocopen: true
  defaultTheme: light

  profileMode:
    enabled: true
    title: "Menno Vanderlist"
    subtitle: "Just my personal ramblings..."
    buttons:
      - name: Blog
        url: "/blog"
      - name: Lacework
        url: "https://lacework.com/"

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

  cover:
    hidden: false # hide everywhere but not in structured data
    hiddenInList: false # hide on list pages and home
    hiddenInSingle: false

  editPost:
    URL: "https://github.com/mr-menno/site_menno.vanderlist.ca/tree/main/site/content"
    Text: "Suggest Changes" # edit text
    appendFilePath: true 

  socialIcons:
    - name: "linkedin"
      url: "https://www.linkedin.com/in/mennovanderlist"

pygmentsUseClasses: true
markup:
  highlight:
    # anchorLineNos: true
    codeFences: true
    guessSyntax: true
    lineNos: true
    style: monokai

menu:
  main:
    - identifier: search
      name: Search
      url: /search
      weight: 6

netlify.toml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.83.1"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.83.1"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.83.1"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.83.1"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"