New Innesthetic Site

Improved mobile responsiveness, Jekyll integration and automation

2024-10-14 08:00:00 +0000

On Friday 11 October 2024, innesthetic.com was updated to:

  • improve consistency across posts and pages
  • improve mobile experience
  • reduce manual work required to create new posts
  • automate website build and deployment.

Old workflow

Previously, when I sought to add new content to innesthetic.com, I would have to write the new post in HTML, manually insert the new page into the home page, and remove an old post to make room for it. Whilst this method worked, it involved a lot of repetitive work and introduced room for human-error.

Furthermore, my CSS made a lot of use of IDs and classes that were only used for a specific element. This reduced consistency between pages. I also didn’t test my CSS on mobile while I wrote it, which introduced many issues on the platform.

Once I was satisfied with my changes, I would push the CL to a GitHub page, then manually deploy the website via Firebase. This could lead to issues where the main branch was out-of-sync with the live website.

New workflow

Jekyll

jekyll logo

I was able to introduce Jekyll into my site which allowed me to set up HTML templates for my site and posts, and provide individual post with front matter, which allows pages to carry their own data.

I utilised this new functionality to dynamically load and categorise latest posts to display on the home pages, whilst also removing repetitive code for including metadata, styles and scripts for pages.

Jekyll also allows its users to write pages in markdown, which I find far more readable than HTML.

CSS Overhaul

CSS Logo Many elements I had written styled for desktop translated poorly to mobile. I had considered integrating a cross-platform CSS library like Bootstrap but found that it lacked options for customisation. So I went through the site, and rewrote my CSS whilst testing it on mobile at the same time. This process was less labour-intensive than I initially expected and provided great results.

Dev Ops & Automation

I had recently used GitLab CI/CD Pipelines to build Python packages, and realised that it was likely possible to employ similar methods for the building and deployment of this website. I wrote up a .yml workflow script that contains two jobs that are run when a CL is pushed to main. First, the runner builds the jekyll project then uploads the artifact to a second job, where Firebase is configured then deployed.

The entire process takes ~8 minutes to execute, but simplifies the process of pushing changes to my site a great deal.

What’s Next?

Now that the workflow for contributing to innesthetic.com has been simplified, it should make it easier for me to update the site with my work. In fact, writing and publishing this post has already taken a fraction of the time it would have taken previously.

There will likely be small tweaks to the style of this site as I settle into this new way of working, but I am already greatly satisfied with these changes.