Lighthouse results

Migrate from Gatsby to Jigsaw

Webcu • January 14, 2021

jigsaw laravel tailwindcss

When starting my blog, I searched for the "best" tools available in the market at that moment. My thought process was: If I used a great tool, I'll learn about it quickly and I'll be able to modify it to my needs in a short period of time. Following that idea I decided to use Gatsby, that indeed is a fabulous tool. Almost two years later, reality is that I haven't write in my blog as much as I would like for many reason, but overall because of the friction that impose on my schedule learn about a technology that I'm not using anywhere else.

Gatsby is an excellent framework, like NextJS and others. They offer a great number of features, have a great community behind, and a very active development. However I don't use/need a big portion of those features for the current needs of my blog. The setup and tooling required for those framework can be a bit cumbersome if you aren't very familiar with them and don't use them in a regular basis. They provide an incredible set of plugins that can help you build the features you need very quickly, but they change often, and many get deprecate in a very short period of time.

New year, new resolutions! One of my resolutions for this year is to publish an article every two weeks. But how can I accomplish that if in almost two years I have published only a dozen of articles? Well, I need a change, because like the saying goes insanity is doing the same thing over and over again and expecting different results. What can I do different this time to achieve this goal? In order to write an article every two weeks, I need to do the writing/publishing process easier as like James Clear suggests in this article: How To Start New Habits That Actually Stick.

Writing a blog is far from my comfort zone already, that is why I started to look for an alternative to Gatsby with technologies/tools that I use often. I still wanted a static site because they're really fast and I'm very interested in the topic. I searched a Static Site Generator that uses Laravel, Symfony or PHP, that are the frameworks/language I work in the rest of my projects. There are a few, but the clear winner for my needs/interests was Jigsaw. It can process Blade templates, Markdown, and other types of files as well. The blog template they provide uses TailwindCSS that is a CSS framework I started to play with last year and I've been really enjoying.

Decision taken, now is time to pass to the action!

Migration

The migration process was quite straightforward because I had already all my articles written in Markdown and the documentation of Jigsaw is clear.

Install Jigsaw

I followed the Jigsaw's doc about installation.

composer require tightenco/jigsaw

Install Jigsaw's blog template

I initialized the project with the blog template.

./vendor/bin/jigsaw init blog

Building and Previewing

I built and previewed the default blog template in my dev env. For more info check: Building and Previewing

$ ./vendor/bin/jigsaw build
npm run watch

Modifications

After checked that everything was working as expected. I copied the markdown files of the posts I had in my Gatsby project and put them inside of the folder source/_posts. I modified the metadata of each article according to my needs. I removed the sections of the template that I'm not going to use for the moment. I built everything and previewed it again in my dev env. Everything was OK.

Conclusion

The build process is really fast, so far less than 1 second in average. The performance of the site is great like the image at the top of this post indicate. I evaluated it with Lighthouse, and it scored 100 in all of the indicators, except in Accessibility because of an issue with color contrast, that I need to investigate further.

Thanks to all the team of collaborators behind Jigsaw, especially to Tighten.

Improvements/Ideas

References