Docs

A list of all your content under docs will go here on this paginated section. If you only want to show the docs, just have no content on the _index.md file, or remove it completely if you don’t need to set any front matter variables.

Why use a table of contents

The built-in TOC is useful on pages with real hierarchy. It works best when the content has more than a flat list of ## headings and gives the reader a clear path through the page.

Ryder supports pluggable analytics providers in production. Configure the provider in your site params and the theme will load the matching partial.

What it is for

Ryder ships with a hidden-home layout for times when you want to put a simple maintenance or coming-soon screen in front of your site without building a separate template. It gives you:

  • a full-screen background image
  • the Ryder logo
  • your page content in a centered translucent panel
  • social links in the footer area

The example page for this layout now lives at /maintenance-page/.

Ryder ships with a full-stack SEO and GEO implementation out of the box — no plugins, no extra config required. Every page gets the right structured data automatically.

Easily add a call to action

C.T.A. buttons now take on the characteristic of the category style

CTA Buttons Take you places!

Control the header image, footer background, card colors, and border accents — all from your hugo.toml without touching theme files.

The Ryder theme supports two logo styles: a text mark (the default) and a custom image. Both are configured entirely in hugo.toml — no template edits required.

Limit your home page feed by Section, Category or Tag

You can now set params in your hugo.toml file to keep any pesky pages off your homepage that you may not wish to promote for whatever reason.

Two shortcodes for Amazon affiliate links: a single-product buy button and an interactive ASIN link builder.

Embed YouTube, Vimeo, and SoundCloud with shortcodes. Video and iframe embeds require one CSP config line — SoundCloud loads via Hugo’s asset pipeline and needs no extra config.

How icons work in this theme

The theme uses Font Awesome with tree-shaking — only the icons explicitly imported in assets/js/main.js are included in the JavaScript bundle. If you use an icon class in front matter or a template and it hasn’t been imported, Font Awesome renders a warning placeholder icon instead.

If you put a lot of code sample in your projects this will simplify things by using the new content-adaptors feature to display code directly from github.

Maps on a Hugo website made easy!

Latitude
39° 54' 20.52"
Longitude
-76° 50' 00.60"

Adding a map to your hugo website becomes easy with the leaflet shortcode. You can add a box to display the lat and long as well through the use of the lat-long-box shortcode.

Overview

The ingredient and step data lives entirely in front matter. The shortcodes read it and render it — no repeated data in the body. This keeps your content clean and makes the structured data for search engines automatic.

Lead with a wide feature

If you want to have wide features, they will get stacked at the top and will take 2 columns. This is done by setting a front matter param homeFeatureWide to enable it, and adding an order-first class and col-span-2 class to the outer div.

Background

Written in Go, Hugo is an open source static site generator available under the Apache Licence 2.0. Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.

This is one way to add a menu

I modified the default menu.html partial sample code from the hugo docs to use the tailwindcss group-hover syntax. I made the children menu inside a container div so it is a sibling to the main anchor and on hover it appears. Still needs style work.

Create alerts as shortcode or partial or in hugo.toml for global announcements.

Make your content stand out

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

👋 🥶 🤖

Emoji can be enabled in a Hugo project in a number of ways.