Ben Strawbridge DOT COM CONSULTING

Hugo

A Theme Meets a Stranger

I clicked the “Latest release” badge in Ryder’s README and landed on v0.0.1-alpha, dated January 2024. That would have been unremarkable if it were the latest release. It wasn’t. Ryder had shipped v0.1.0 through v0.2.4, but the release workflow marked every automated release as a prerelease. GitHub excludes prereleases from that badge, so two years of releases were present, downloadable, and effectively invisible from the project’s front door.

Building OCR-Powered Search for a Family Photo Gallery

The technical journey of adding search to 3,400+ scanned photo album pages. View the live search

Deploying Hugo Websites to AWS CloudFront and S3 for Faster Content Delivery

A new way to deploy my hugo websites A simple and cost-effective approach to deploying Hugo projects to AWS CloudFront. I have and still do use services like AWS Amplify and Netlify to automate my CI/CD pipeline for many of my projects, triggered by a GitHub check-in and running in GitHub Actions. However, for a recent photography project that involved deploying a large number of files, storing everything in GitHub wasn’t feasible. I needed a solution that was simple, affordable, and delivered high performance. That’s when I decided to use AWS CloudFront with an S3 bucket, integrated with an SSL certificate generated through CloudFront. Why AWS CloudFront?

A 2023 blog post on deploying a Hugo site with AWS CloudFront and S3, covering CloudFront cache-control headers and using Hugo's built-in deploy command with GitHub Actions and AWS OIDC authentication.

A blog post walking through deploying a Hugo static site to AWS S3 and CloudFront using GitHub Actions, based on the official Hugo GitHub Actions workflow template.

Flickity is a touch-enabled, responsive JavaScript library for building physics-based carousels, galleries, and sliders. It is available as a standalone script, jQuery plugin, or npm package, under a commercial or GPLv3 license.

Split Gallery is a Hugo theme pairing a photo gallery with a map on each page, built on Fancybox for its lightbox. It is GPLv3 licensed, though Fancybox itself requires a separate commercial license for commercial use.

Home Feed Filtering and Colorization

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.

Federal Disaster Emergency Preparedness Kit Digitized

Federal Emergency Management Agency logo
Digital Federal Financial First Aid Kit (EFFAK) Digital Federal Financial First Aid Kit Be prepared for the worst case scenario with an encrypted grab and go device the size of bic lighter.

Ingredients Section

Check out the new Ingredients Taxonomy pages Using Taxonomy effectively As part of the recipe template configuration being developed for The Ryder Theme for Hugo websites, a new taxonomy is created for ingredients. Ingredients are not the same as recipeIngredients; they are defined as an array in the front matter. I didn’t want a taxonomy page generated for every single recipe ingredient, so I created a separate variable. The recipeIngredients are used to display the ingredients on the page and for the recipe schema, ensuring the pages are properly displayed as recipe rich results in Google and other search engines.

Tag Cloud

Cloudy days a hoy-hoy I found this partial to create a tag cloud on Mert Bakir’s personal website and I have been adapting the code to suit my needs for this project, for now I’m just leaving it under this project page until I can decide what to do with it.

Recipe Template for Ryder Theme

Google Rich Results Test showing valid recipe structured data
Optimize Recipe Content with the Schema The recipe templates for The Ryder Theme for Hugo websites are progressing well. Today I released an update that creates the schema.org json-ld specification tags for a recipe. This allows your recipe content to show up as “rich content” in search engines and social media platforms.

Joe Mooring's technical articles about Hugo, covering topics such as internal link validation, math and diagram rendering, and syntax highlighting for GitHub files. Mooring also maintains several open-source Hugo modules on GitHub.

Book Store Sample Data

A sample bookstore page generated with a Hugo content adapter
Example I just followed the example here on the hugo docs to set up the simple books demo, but I intend to use this new feature to build out some great new dynamic content for content marketing purposes, such as lists of top products.

A Hugo Discourse forum thread describing a client-side full-text search implementation for Hugo sites. It uses a JSON index generated by Hugo and a JavaScript function to search page content without a server.

Documentation for the Pictures module, part of a set of Hugo modules from David's Neighbour (Patrick Kollitsch) that add responsive image partials and shortcodes to a Hugo site — now hosted on GitHub rather than kollitsch.dev.

The personal site of Patrick Kollitsch (David's Neighbour), who publishes a large collection of open-source Hugo modules and writes about Hugo development.

The 'About' page for YummyRecipes.uk, a nut-free recipe blog by chef Celina, built with Hugo and covering British, Polish, Chinese, and other cuisines.

Adding Leaflet to Ryder Theme

A Ryder theme page displaying an interactive Leaflet map
I made this quick and easy shortcode to get started using leaflet.js in the Ryder Theme for Hugo Websites, as I add more features supported by leaflet to the shortcode I might update this page.

Pines Image Gallery With Hugo

A super simple alpinjs image gallery The first place I used this is on the recipe page about my mom’s family recipe cookbook

A Hugo theme for documentation sites, based on the Grav Learn theme, with search, multilingual support, and Mermaid diagram rendering. The project is marked deprecated by its maintainer, who suggests migrating to the Relearn theme instead.

The Ryder Theme for Hugo

The Ryder Hugo theme wordmark with a portrait of Ryder
In honor of this old guy Introducing the Ryder theme, a theme for the hugo static website generator. This is an open-source Hugo theme boasting Tailwind CSS, FontAwesome integration, and customizable features. Perfect for beginners and seasoned developers alike, kickstart your website with this versatile theme.

Styling a RSS feed With XSL

A styled RSS feed makes your site more usable When you put a link to your rss / atom feed on your website it is a link to a raw xml file designed for feed readers such as feedly to import them and provide the reader with all their internet in one place.

The Manning liveBook page for 'Hugo in Action' by Atishay Jain, a book on building static sites and Jamstack applications with Hugo, with a foreword by Steve Francia.