Posts

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?

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.

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

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.

Extreme Geomagnetic Storm Photography

Pulled to Black

Pulled to Black

On May 10, 2024 solar flares caused extreme G5 conditions to be observed

Adding Leaflet to Ryder Theme

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

Mom's Family Recipes Cookbook

Be Inspired
Be Inspired

Photos of all the pages

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.

Tunnel Localhost Server Through Cloudflare

A tunnel to your desktop

This is something I have done in the past and it usually involved pretty in-depth knowledge of the shell and networking, but now there is a free service that makes it oh-so-easy to spin up a tunnel with a public human readable domain name for temporary viewing of your local network development environment on the internet.

Pick a Squares Game

I created a pick-a-squares game template, aka the Super Bowl squares. It is still a work in progress, but I hope to have it snazzy in time for next year. Take a look at the template.

Project Goals

  • Ability to enter people into squares
  • Generate random score rows with animated flourish
  • Presentation mode for big screen action with controller to enter periodic scores
  • Calculate payouts based on price of a square

Project Timeline

  • Launch in time for SB LIX

Hugo Snippets

Get the first of something in a collection

For example the first jpg image in the current directory starting with the word feature.

Github Action to Create New Content in Hugo

This is what it looks like
This is what it looks like

I use Hugo a lot for my web development work, and I think it is pretty great. The one problem with it for many non-technical people I work with is that there is no CMS feature, they want a website administration page where they can do the usual.

Hugo Helpers

Here are some useful partials I use in this theme.

layouts/_default/_markup/render-image.html

This replaces the default markup template for rendering an image when the markdown code ![Alt Text](/path/to/img.jpg) is used. It calls another partial you have to add to your theme or layout directory in your site called ImageConverter.