Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

TPDP Episode #27: Static Website Generation with Hugo

I am pleased to announce that the latest episode of the Polyglot Developer Podcast has been published and is now available on all of the major podcast networks!

As many of you know, The Polyglot Developer is a static website composed of strictly HTML, JavaScript and CSS. There is no backend technology, no database, nothing dynamic, and as a result it is fast, cheap to operate, and easy to maintain.

This episode, Static Website Generation with Hugo, will shed some light into static site generation and how it differs and is advantageous over the popular alternatives such as WordPress and Drupal.

There are many static site generators available, but the focus of this episode is on Hugo, a popular generator because of its speed and functionality. To talk about Hugo, the core maintainer of the open source project, Bjørn Erik Pedersen, is on the show.

Read More

Service Workers With Workbox In A Hugo Static Generated Site

As you know, The Polyglot Developer is a static generated website that is built with Hugo. Given the nature of static generated websites, they are generally much faster than the CMS alternatives, but just because they’re fast, doesn’t mean they pass all of Google’s tests by default.

In an ongoing effort to try to satisfy Google PageSpeed Insights and Lighthouse when it comes to search engine optimization (SEO) and other best practices, I was lead to the progressive web application (PWA) test. There are many factors that determine if something is a PWA, but one of those resides in the use of service workers. In case you’re unfamiliar, service workers accomplish many things, with the most common of those things being caching.

Implementing service workers in an application is not necessarily the most complicated task, but as your applications evolve, things might become more chaotic. This is where Workbox comes in. With Workbox, you can use very clean APIs to pre-cache your static site resources as well as cache resources at runtime. We’re going to see how to use Workbox to implement service workers for caching Hugo content and other resources such as images, fonts, and scripts.

Read More

Create Custom Shortcodes To Embed Content In Hugo Posts And Pages

I’ve mentioned this numerous times before, but The Polyglot Developer is powered by Hugo which is a static site generator that takes Markdown and converts it to HTML. While Markdown is easy to use and can accomplish quite a bit, the syntax doesn’t accomplish everything that you’d hope to accomplish when it comes to a website. For example audio and video aren’t a thing in Markdown while it is in HTML. So how do you add custom components to a Hugo article?

In Hugo, you can create what is called a shortcode, which is a custom tag that gets processed differently than standard Markdown syntax. We’re going to see how to create shortcodes to take Hugo posts and pages to the next level.

Read More

Convert Amazon Links In A Hugo Site To Affiliate Links With Gulp

As you may already know, The Polyglot Developer is a statically generated website built with Hugo. That means that there are no databases involved, no server side languages, only HTML, CSS, and JavaScript.

In the past I shared the automated Gulp workflow that I use when building my blog to maintain performance and a solid standing with search engine optimization (SEO).

I received a request from a subscriber recently around affiliate link generation on a Hugo website and I figured it would be an interesting topic to tackle. Typically a WordPress plugin or similar would handle the job, but since we’re working with a static website, we have to be inventive with our build scripts.

In this tutorial we’re going to see how to build a Gulp task that will replace all Amazon links with Amazon Associates links, which is another name for their affiliate program.

Read More

Manage Multiple Authors On A Static Blog Created With Hugo

As you may or may not know, The Polyglot Developer is currently using Hugo, which is a static site generator. When getting started with Hugo, the themes and documentation don’t say much when it comes to having more than one possible author producing content.

For example, as mentioned in my previous article, this site is always accepting guest contributions for technical content. There have been several tutorials contributed, but when it comes to credit, I want these tutorials to show under the authors name, not my name just because I’m the owner of the blog.

We’re going to see how to work with data templates in Hugo to create and use different authors for different articles.

Read More

Alias URLS In Hugo Websites Using RewriteRule For Htaccess

As you may remember, I recently released The Polyglot Developer 2.0 which was a migration from WordPress to Hugo. Because my WordPress permalinks matched a similar format to Hugo I didn’t have to make too many changes. However, there was an issue with the category and tag taxonomies. In Hugo these were recommended to be plural, while in WordPress they were singular.

I’m currently using Apache for hosting The Polyglot Developer so I had to figure out how to redirect the previous WordPress traffic to prevent bad links which would hurt the search engine optimization (SEO) of my blog. We’re going to see how I made such redirects happen.

Read More

Use Hugo To Create Awesome Static Websites And Blogs

You might not know this, but I run another blog on a completely different subject material than The Polyglot Developer. This other blog is called Own the Web and it focuses on brand building, searching engine optimization, and boosting your online revenue through the internet. Unlike The Polyglot Developer, Own the Web was actually created using the Hugo Static Website Engine.

I want to share information about Hugo, some of the advantages and disadvantages, and my experience using it.

Read More