Continuously Deploy a Hugo Site with GitLab CI

In case you hadn’t heard it on social media, The Polyglot Developer is part of a continuous integration (CI) and continuous deployment (CD) pipeline. Rather than using Hugo to manually build the site and then manually copying the files to a DigitalOcean VPS or similar, the Hugo changes are pushed to GitLab and GitLab takes care of the building and pushing.

Now you might be wondering why this is important because the process of manually building and pushing wasn’t so strenuous.

Having your web application as part of a CI / CD pipeline can streamline things that you would have otherwise needed to take into consideration. Here are some examples of where a pipeline would be of benefit, at least in the world of static website generation through tools like Hugo:

• Multiple authors and developers can work on the project without knowing sensitive information like SSH keys.
• Scheduled builds and deployments can be configured for content that is scheduled with a future date.
• Docker images can be automatically created and uploaded to a Docker registry.

Those are just some of the examples, more specifically how things are done on The Polyglot Developer. In this tutorial, we’re going to explore how The Polyglot Developer is doing things and how you can adopt them into your static website generation workflow.

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.

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.

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.

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.

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.

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.