DEV Community

loading...
Cover image for Third version of my website released ๐ŸŽ‰

Third version of my website released ๐ŸŽ‰

ranb2002 profile image Benjamin Rancourt Originally published at benjaminrancourt.ca on ใƒป5 min read

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! ๐Ÿ˜ฎ

An invalid canonical tag, with a double slash, has been fixed.

An undefined JSON-LD element for a tag page is now correct.

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);
Enter fullscreen mode Exit fullscreen mode
The code used to display the dates on my blog

Date differences between the previous version and the current version of my website

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"
}
Enter fullscreen mode Exit fullscreen mode
Excerpt of my JSON feed file

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>
Enter fullscreen mode Exit fullscreen mode
Excerpt of my Atom feed file

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).

A comparaison of the GitLab tag page, before and after

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. ๐Ÿง™

Screenshot of the 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! โ˜€๏ธ

Discussion (0)

Forem Open with the Forem app