Hugo Templating Explained With Archetypes

Hugo Archetypes

I think of Hugo as a powerful template system. Archetypes is another example of templates improving workflow.

The base directory of any hugo site will contain a folder by the name of archetypes. I use the folder to build starting templates for my “sections” ([maintenance, modifications, products, services, tech, trips]). As you can imagine the trips page/template should be different then the tech page(s)/templates(s). The way I use archetypes is to build a template for each “section”.

The tech section example

Filename: ~/archetypes/tech/index.md

---
layout: single2
title: '{{ replace .File.ContentBaseName "-" " " | title }}'
date: {{ .Date }}
hide_site_title: true
keywords: ["airestream", "airstream", "tech"]
tags: ["technology"]
description: ""
draft: true
---
If you would like email or rss feed updates. [Visit the Subscribe page](https://airestreaming.com/subscribe/ "No Tracking")

Dissecting the above code

“layout” defines the page template. Hugo Lookup-order for details
“title” define how to automatically title the page
“date” Populates the data automatically with the time the new content command was called

The other front matter components [keywords, tags, description, draft] are defaults that I want included in the file creation

Using the Archetype

(cd ~/site-name && hugo new content tech/hugo-archetypes) will create a markdown file ready for editing with the above(“tech”) template.

The “hugo new content tech/$article-path” creates the below markup file. Which will then have the defaults I have applied in the ~/archetypes/tech/ “template”. Everything in the folder will be created at the $article-path. If you want to have empty folders for videos or images, I usually put a .dot-file in the folder allowing the folder to be created automatically.
Filename: ~/content/tech/hugo-archetypes/index.md

---
layout: single2
title: 'Hugo Archetypes'
date: 2024-08-15T22:12:08Z
hide_site_title: true
keywords: ["airestream", "airstream", "tech", "hugo archetypes"]
tags: ["technology", "hugo"]
description: "How I use Hugo's archetypes"
draft: true

If you would like email or rss feed updates. [Visit the Subscribe page](https://airestreaming.com/subscribe/ "No Tracking")
---

The above template file “hugo-archetypes/index.md” was created by the hugo new command. I would then use the index.md to craft the page I want created.

If you would like email or rss feed updates. Visit the Subscribe page