Hugo Cheatsheet

January 1, 2024

Table Of Contents

Start work on Hugo

hugo new site my-site
cd to my-site (change directory to that folder)
add a theme - direct download, unzip and copy to themes directory under my-site (“etch” is a simple theme)
Start server with drafts visible: hugo server -D& (& to put the command in the background so we can still use that terminal)

Content creation and editing

Create new post: hugo new posts/posttitle.md.
Create new page: hugo new newpage.md. Update config.toml file with a new identifier to add the new page menu.
Edit using vim. Path will be content/posts/<posttitle.md> for posts. Menu path will be content/<menu.md>

Push to Git - one time only commands

git init
git remote add origin https://github.com/<your-gh-username>/<repo-name>
git branch -M main
git submodule add https://github.com/LukasJoswiak/etch.git themes/etch (for adding the etch theme, you can choose your own theme and its git url)

Push to Git - each time the website needs to be updated.

git add .
git commit -m “Some Comment”
git push -u origin main

Your password is your PAT and NOT your GitHub password.

Pushing to git with username nad PAT is tedious. Use command once:

git config –global credential.helper store
to type your username and PAT once and your creds will be saved after you enter correctly the first time.

Themes

Themes can be changed on the fly by editing config.toml or hugo.toml. (Note the server might not update immediately, restart a few times if not.)

Here’s a simple hugo.toml for etch theme.


baseURL = 'https://sanjayregmi.com'
languageCode = 'en-us'
title = 'Sanjay Regmi'
theme = ’etch’

enableRobotsTXT = true
googleAnalytics = “Your G Tag”
[markup.goldmark.renderer]

unsafe = true
[menu]

[[menu.main]]

identifier =‘our-projects’

name = ‘our-projects’

title = ‘Our Projects’

url = ‘/our-projects’
    [[menu.main]]
    identifier ='posts'
    name = 'posts'
    title ='Posts'
    url = '/posts'

Emoji Support

Add the following in config.toml enableEmoji = true

Google Analytics

Hugo comes with built-in support for Google Analytics. All you need to do is to add googleAnalytics = “Your Google Tag” in hugo.toml (Newer versions of Hugo suggest using hugo.toml instead of config.toml). However, as of April 2024, some themes are not working with the above instructions. So here’s an alternative approach that works. The instructions are for the “Etch” theme and you should be able to adjust it for yours.

Copy all folders and files from /themes/etch/layout/ and paste them to /layout.
Create a file called analytics.html under layout/partials/ and paste the contents of the script from google analytics, manual install instructions. Save it.
Edit head.html and add {{ partial “analytics” . }} before </head>. Save it.
Now run hugo server (confirm there are no errors. Then load the website locally –> inspect –> network and note gtag appears in one of the requests sent out.
Note you do not need to add anything to hugo.toml as we’ve hardcoded our Google Tag IDs.

Old method - does not work for many themes anymore as of April, 2024

Add the following in config.toml

googleAnalytics = “X-XX” where X-XX is the google analytics code for your website.

Grab the /layouts/partials/header.html file from your theme. Copy it to /layouts/partials. If the partial folder doesn’t exist, create it. (For some themes like hugo-coder, its the head.html file instead that needs to be edited)

Add the following ad the top of /layouts/partials/header.html

  <head>
  {{ template "_internal/google_analytics.html" . }}
  </head>

Save header.html

Insert Table of Content

create a file called `table_of_contents.html’ in layouts/shortcodes. Add the following code:
```
  <div class="toc">
      {{ .Page.TableOfContents }}
  </div>
```
Insert {{< table_of_contents >}} anywhere in your post or page to generate a Table of Contents.

Insert an image

Use this format: ![](/images/img1.jpg) where “images” is a folder under “static” and img1.jpg is the image file under “images” folder. Inside the squre brackets, you can add caption but is optional.

Insert youtube Video

Use this anywhere you want, change the id and title. {{< youtube id=“7qvg5EdL3fQ” title=“W” >}}

Add last modified date to posts

Add the following to config.toml
enableGitInfo = true [frontmatter] lastmod = [“lastmod”, “:git”, “date”, “publishDate”]
This way, the last modified date is taken from git commit dates.

Add categories and tags to your posts

Edit file archetypes/default.md and add the following descriptors:
categories = [’’]
tags = [’’, ‘’]
Save default.md
Note values for both category and tag should be inside single quotes. More values can be added when separated by a comma.
The two descriptors should now appear when you create a new post.

🍄

Looking for humanized IT Support? We at Prasna IT are ready to assist! Call us at 778 775 9350 or book a free consultation.

Follow me on Twitter or LinkedIn. Read about what else I do.