Third version of my website released 🎉

Two months ago, I started one of my blog's biggest refactoring: separating the processing of my Ghost data from the generation of the blog itself. Rest assured, it did not take me two full months as I made the changes in my spare time. 😅

The end goal of this refactoring was to improve the build time of my GitLab CI pipeline. Let's see if it was worth it. 🤔

On average, the pipeline on my default branch main took 8m 30s and now, it completes under 3 m 41 s! So, it is now about 56,6% faster! 🚀

It is a huge improvement, but when we considers the time it takes, we can seriously question its relevance for good reason. Although if I spent more time than I would have liked, I consider that refactoring to be an investment because this project had some positive side effects that I did not initially expect. 🤭

Side effects

Bug fixes

To make sure that I had not introduced any new bugs, I started comparing the HTML output produced . To my surprise, it was exactly the opposite: I unconsciously fixed bugs that I did not know I had! 😮

I hope the fixes will improve my SEO! 🕊️

Dates and time

In the previous version of my website, I noticed that sometimes, some posts published late at night had the next day as their publication date... Sounds like a time zone issue, right? 🌐

Now, all dates are converted to the America/Toronto time zone, which corresponds to my local time, here in Quebec: the Eastern Time Zone (UTC-5). ⚜️

It is quite simple in JavaScript to do this with the native toLocaleDateStringfunction on date objects:

const options = {
  day: 'numeric',
  month: 'short',
  timeZone: 'America/Toronto',
  year: 'numeric',
};
const toLocaleDateString = (dateObject) => dateObject.toLocaleDateString('en-CA', options);

Also, I do not remember how I used to calculate the reading time before, but I noticed that some of my posts saw their reading time value drop drastically, like my Lint PowerShell scripts with PSScriptAnalyzer post which went from 12 minutes to just 3 minutes, which looks more correct. 😂

Greener website

As I use less of the ressources provided by the GitLab infrastructure to build my website, it uses less electricity and therefore, is a bit greener than before. 🌳

Also, I do not know why, but the new version of my website is now 3% more cleaner than the previous version according to the Website Carbon Calculator. 🧮

Maybe it is because I deleted all the code and images related to the Apple iOs splash screens. So sorry to Apple users who are reading this post now, it is not worth it for me to serve 20 images and 4,252 more characters to everyone just to support one device type! 🍎

While we are at it...

I also made some little improvements, but I am not sure if we should consider them as side effects. 🤔

JSON feed

As my data for my Atom file was already in JSON, I took the opportunity to generate also its equivalent in JSON: a JSON feed. It was something that was on my watch list and while I implement it, I really like the specifications, which are much simpler in my opinion, than the RFC 4287 - Atom Syndication Format document.

{
  "authors": [
    {
      "avatar": "https://www.benjaminrancourt.ca/images/benjamin-rancourt.jpg",
      "name": "Benjamin Rancourt",
      "url": "https://www.benjaminrancourt.ca/"
    }
  ],
  "description": "Thoughts, stories and ideas.",
  "favicon": "https://www.benjaminrancourt.ca/images/favicon/favicon-64.png",
  "feed_url": "https://www.benjaminrancourt.ca/feed.json",
  "home_page_url": "https://www.benjaminrancourt.ca",
  "icon": "https://www.benjaminrancourt.ca/images/favicon/favicon-512.png",
  "items": [
    {
      "content_html": "...",
      "date_modified": "2021-04-09T00:10:11.000Z",
      "date_published": "2021-04-08T23:15:00.000Z",
      "id": "https://www.benjaminrancourt.ca/how-to-push-to-a-git-repository-from-a-gitlab-ci-pipeline",
      "image": "https://www.benjaminrancourt.ca/images/how-to-push-to-a-git-repository-from-a-gitlab-ci-pipeline.jpg",
      "summary": "The ultimate recipe to push some file changes to the current Git repository within a GitLab pipeline!",
      "tags": [
        "GitLab"
      ],
      "title": "How to push to a Git repository from a GitLab CI pipeline 👷",
      "url": "https://www.benjaminrancourt.ca/how-to-push-to-a-git-repository-from-a-gitlab-ci-pipeline"
    }
  ],
  "language": "en-CA",
  "title": "Benjamin Rancourt",
  "version": "https://jsonfeed.org/version/1.1"
}

I am not sure if feed readers already support this new format created in 2017, but it does not cost much to support it. It also helps promote a new format to everyone, and helps it to be implemented by more people and businesses. ⌨️

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Benjamin Rancourt</title>
  <subtitle>Thoughts, stories and ideas.</subtitle>
  <id>https://www.benjaminrancourt.ca/</id>
  <link href="https://www.benjaminrancourt.ca/feed.xml" rel="self" type="application/atom+xml" />
  <link href="https://www.benjaminrancourt.ca/feed.json" rel="alternate" type="application/feed+json" />
  <link href="https://www.benjaminrancourt.ca" rel="alternate" type="text/html" />
  <updated>2021-04-09T00:10:11.000Z</updated>
  <author>
    <name>Benjamin Rancourt</name>
    <uri>https://www.benjaminrancourt.ca/</uri>
  </author>
  <icon>https://www.benjaminrancourt.ca/images/favicon/favicon-64.png</icon>
  <logo>https://www.benjaminrancourt.ca/images/favicon/favicon-512.png</logo>
  <entry>
    <content type="html">...</content>
    <id>https://www.benjaminrancourt.ca/how-to-push-to-a-git-repository-from-a-gitlab-ci-pipeline</id>
    <link href="https://www.benjaminrancourt.ca/how-to-push-to-a-git-repository-from-a-gitlab-ci-pipeline" rel="alternate" />
    <summary type="text">The ultimate recipe to push some file changes to the current Git repository within a GitLab pipeline!</summary>
    <title type="text">How to push to a Git repository from a GitLab CI pipeline &#x1f477;</title>
    <updated>2021-04-09T00:10:11.000Z</updated>
    <published>2021-04-08T23:15:00.000Z</published>
  </entry>
</feed>

Tag page

Even though each tag page uses a card format for their related posts, their layout was not great as the cards used the full width of the screen to be displayed. Now, the layout is almost identical to the homepage and the cards will be much easier to read, as their width cannot be greater than 65ch (approximatively of 1250px on my screen).

Tags page

And while we are at it, I have always wanted to have a page that lists all the tags I use. It is now done on my Tags page. 🧙

It also reveals some interesting statistics to me, like the fact that I blog more about GitLab and Eleventy, based on their cumulative reading time! ⏱️

Conclusion

Enough changes for now, it is time to take advantage of theses new improvements and above all, to enjoy the summer! ☀️