Hugo theme

Getting started

Hugo, GNU Make

• Windows: scoop install make yq hugo-extended
• Debian: sudo apt install make yq hugo
• Arch: yay -S make yq hugo
• MacOS: brew install make yq hugo

Or install Hugo from Tarbal

Development

# Run the linters
make lint

# Download ionicons
make svg

# Launch the debug server
make run

# Build the site for production
make build

Theme

Use Material Theme Builder to generate CSS in assets/scss/vendors/material-theme

How it works?

sequenceDiagram
  Writer ->>+ Strapi: CRUD
  Strapi ->>+ Webhook: Send webhooks
  Webhook ->>+ Site: Write or delete YAML/MD files
  Webhook ->>+ Site: Build site
  Webhook ->>+ Git: git push

Loading

What is Hugo

Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again. ¹

Why Hugo? ²

• Static site, extremely fast & secure
• Can be hosted anywhere
• Run without the need for a database or dependencies runtimes
• Extremely fast build times (< 1 ms per page)
• Fun

Directory structure ³

├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

layouts: stores templates in the form of .html files.

├── layouts
    ├── partials
    ├── shortcodes
    ├── index.html
    ├── 404.html

• layouts/index.html — the index page template
• layouts/404.html — the 404 page template

Partials are smaller, context-aware components in your list and page templates that can be used economically to keep your templating DRY. ⁴

• layouts/partials/[article | document | ...]/*.html — components are used for a the specific section.
• layouts/partials/shared/*.html — components are used in many sections
• layouts/partials/*.html — components are used in the global templates

Config file

The site use the config.yaml as the Hugo config file. ⁵

Content organization

Hugo uses the content directory for building pages, each directory is a section.

Seperate SCSS/JS for a section

• assets/scss/main.scss — used for all pages
• assets/scss/<section>.scss — load for that section only if it exists
• assets/js/main.js — used for all pages
• assets/js/<section>.js — used for that section only if it exists

For example, for overwrite the home page:

• Write your SCSS in assets/scss/sections/home/*.scss
• Import them into assets/scss/home.scss
• Write your JS code in assets/js/sections/home/*.js
• Import them into assets/js/home.js

Templates

Hugo uses Go’s html/template and text/template libraries as the basis for the templating. ⁶

{{ printf "%#v" . }}
{{ printf "%#v" $.Site }}
{{ printf "%#v" .Permalink }}

{{ range .Pages }}
 {{/* The context, ".", is now each one of the pages as it goes through the loop */}}
 {{ printf "%#v" . }}
{{ end }}

Template Debugging

You can use Go templates’ printf function to debug your Hugo templates. These snippets provide a quick and easy visualization of the variables available to you in different contexts. ⁷

Refrences

Footnotes

1. https://gohugo.io/about/what-is-hugo/ ↩

2. Hugo Features ↩

3. Directory Structure ↩

4. Partial Templates ↩

5. Configure Hugo ↩

6. Templates ↩

7. Template Debugging ↩