What is the Trigo Theme?

Trigo is a simple, modern, fast, feature-packed and flexible Hugo theme to build static websites for documentation, blogs, portfolios and more.

Hugo is a one of the most popular static site generator. Hugo is a single binary, making it easy to install and run on various platforms. Extremely fast and reliable, it renders a site with thousands of pages in milliseconds.

Trigo is a custom made theme focused on efficiency, flexibility and with a minimal footprint. No extra dependencies are required. A single YAML configuration file and Markdown content is all what is needed. Focus on writing quality content and tweak the theme style if desired.

Features

• Responsive Layout and Dark Mode - Works on all devices: mobile, tablet to desktop. Dark mode is also supported to accommodate various lighting conditions.
• Fast and Lightweight - Powered by Hugo, a lightning-fast static-site generator housed in a single binary file, its footprint is minimal. Additional JavaScript features to progressively enhance the user experience are optional and can be disabled easily.
• Features - Markdown, syntax highlighting, LaTeX math formulae, diagrams and Shortcodes elements to enrich the content. Table of contents, breadcrumbs, pagination, sidebar navigation and more are all automatically generated if enabled.
• Multi-language and SEO Ready - Multi-language sites are made easy with Hugo’s multilingual mode. Out-of-the-box support is included for SEO tags, Open Graph, sharing to social media and much more.

Start as New Project

There are two main ways to add the Trigo Theme to your Hugo project:

1. Hugo Modules (Recommended): The simplest and recommended method. Hugo modules let you pull in the theme directly from its online source. Theme is downloaded automatically and managed by Hugo.

2. Git Submodule: Alternatively, add Trigo as a Git Submodule. The theme is downloaded by Git and stored in your project’s themes folder.

Setup Trigo as Hugo module

Prerequisites

Before starting, you need to have the following software installed:

• Hugo (extended version)
• Git
• Go

hugo new site my-site --format=yaml

# initialize hugo module
cd my-site
hugo mod init github.com/username/my-site

# add Trigo theme
hugo mod get github.com/FreeCAD/website

module:
  imports:
    - path: github.com/FreeCAD/website

hugo new content/_index.md
hugo new content/docs/_index.md

hugo server --buildDrafts --disableFastRender

hugo mod get -u

hugo mod get -u github.com/FreeCAD/website

hugo mod get -u github.com/FreeCAD/website@main

Setup Trigo as Git submodule

Prerequisites

Before starting, you need to have the following software installed:

• Hugo (extended version)
• Git

hugo new site my-site --format=yaml

cd my-site
git init

git submodule add https://github.com/FreeCAD/website.git themes/Trigo

theme: Trigo

hugo new content/_index.md
hugo new content/docs/_index.md

hugo server --buildDrafts --disableFastRender

When using CI/CD for Hugo website deployment, it’s essential to ensure that the following command is executed before running the hugo command.

git submodule update --init

Failure to run this command results in the theme folder not being populated with Trigo theme files, leading to a build failure.

git submodule update --remote

git submodule update --remote themes/Trigo

Intro

• We’ll be using yml/yaml format for all examples down below, I recommend using yml over toml as it is easier to read.
• You can find any YML to TOML converters if necessary.

Guide

Follow Quick Start guide to setup hugo and create a new site.

Make sure you install latest version of hugo.

After you have created a new site, at Step 3 follow the steps:

Method 1

Inside the folder of your Hugo site, run:

git clone https://github.com/FreeCAD/website PATH_TO_YOUR_LOCAL_GIT_DIRECTORY --depth=1

Method 2

Or you can Download as Zip from Github Page and extract in your themes directory

Finally …

Add in config.yml:

theme: Trigo

Method 4

• Install Go programming language in your operating system.

• Intialize your own hugo mod

hugo mod init PATH_TO_YOUR_LOCAL_GIT_DIRECTORY

• Add Trigo Theme in your config.yml file

module:
  imports:
  - path: github.com/FreeCAD/website/tree/main/themes/Trigo

• Update theme

hugo mod get -u

Sample config.yml

Use appropriately

baseURL: https://examplesite.com/
title: "ExampleSite"

theme: Trigo

enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false
pygmentsUseClasses: true

googleAnalytics: UA-123-45

minify:
  disableXML: true
  minifyOutput: true

params:
  env: production # to enable google analytics, opengraph and schema.
  title: "ExampleSite"
  description: "ExampleSite description"
  keywords: [Blog, Portfolio]
  authors: [Me, You, Tom Sawyer]
  images: [<link or path of image for opengraph>]
  DateFormat: January 2, 2006
  defaultChroma: auto # dark, light

  showReadingTime: true
  showShareButtons: true
  showPagination: true
  showCopy: false

  label:
    text: Home
    icon: /apple-touch-icon.webp
    iconHeight: 35

  analytics:
    google:
      SiteVerificationTag: XYZabc

Sample Page.md

---
title: "My first post"
date: 2020-09-15T11:30:03+00:00
# weight: 1
# aliases: [/first]
tags: [first]
authors: [Me, You, Tom Sawyer]

draft: false
description: "Desc Text."
disableShare: false
showReadingTime: true
showPagination: true
cover:
  image: <image path/url> # image path/url
  alt: <alt text> # alt text
  caption: <text> # display caption under cover
---

You can use it by creating archetypes/post.md

hugo new --kind post <name>