Migrate from Gatsby to Jigsaw

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

  • Is not very clear to me how the internationalization works in Jigsaw. That's a great opportunity to learn

more about the topic.

  • I want to learn how the building process works. Compare it to the ones of other frameworks like Hugo and Gatsby to

see how they are implemented and how could be improved.

  • Handling forms in static sites isn't the easiest thing in the world. That is why many programming languages were

created initially. Nowadays with the serverless architecture we can build a nice workflow to handle them. I'm planning implement a contact form and write an article about it.

  • One of the ideas I want to incorporate moving forward is: use the tools that allow me to solve the problem, in an

efficient way, from the point of view of the final product and the time I need to invest to achieve it.

  • Lighthouse is a great tool to check the performance of the websites. If we look at the details and information it

provides we can learn a lot.

  • Interested in how to deploy a static site? Check my next article.

  • Interested in stick with a new Habit? Check my project: Habits to keep track of it.

References