How I made my blog with no cost

Hey there!
In this first article I’ll talk about how my website is structured, the stacks I chose for development, and the optimizations I had to make in order to score optimally in both performance and SEO.

Topics

1. Choice of technologies
2. Performance optimization
3. SEO optimization
4. Conclusions

1. Choice of technologies 🤯

Choosing technologies these years is increasingly difficult because there are more and more frameworks that solve more or less the same problems in very similar ways.
You only have to do a Web search to find yourself overwhelmed with dozens of names of frameworks and then figure out which one is right for you by studying all its features.
Finally, after a few days (maybe) of study and research, you find the framework that is right for you!

For my site I was very torn between two choices:

• Use a stack that had been used before (Next.js - Stripe)
• Use a completely new stack (Qwik - Supabase).

Spoiler: I’ve choose Qwik and Supabase 😎

Front End Framework Choise

Both Next.js and Qwik are great in terms of performance, SEO optimization and routing , plus both have a component writing style like React (my main front-end stack).
As a front-end framework I opted for Qwik because it was young, fresh and promising and would be a new stack to add to my skills 💪.

Back End Framework Choise

Back-end side was easier to choose because the main problem was budget. I would have chosen Strapi as the headless CMS just for a matter of interface but I would have had to spend on hosting.

Supabase still has a nice interface but it sins, in my opinion, for data entry as it has, rightly, a database interface. Supabase’s free plan is very generous and could be enough to launch any website without spending a cent.

The performance is very good and the sdk very easy to use. With Supabase you can have storage, a database and you can create custom edge functions and I will stop here, for now I don’t want to go into too much detail, we will have a way to go into more detail 😊

2. Performance optimization> 🥳

In order to optimize the site’s performance I had to evaluate different approaches and I had to investigate some topics such as images, animations and calls to Supabase. For image optimization I opted to use the library unpic which transforms the image url (CDN) instead of transforming it client-side.

For the animations I opted to create a custom component to avoid installing an unnecessary library.
For the optimization of the animations I used only transformation attributes such as scale, translate, rotate and opacity. Besides these, some animations have the will-change: contents attribute. This attribute tells the browser that the element will change and in this way they improve the performance of the animations.

To optimize the calls to Supabase, I created views so that I could reduce the number of calls and perform targeted joins directly in the database instead of client-side so that I would have the data ready as it should be displayed.

Server side, on my site, calls to the server are made on the landing page to grab the latest articles and their images, on the career page, and, of course, on the blog page and all articles. Here is the result of a check done in a production environment with Lighthouse where above are the performance of the desktop and mobile landing page and below of an example article:

There are still optimizations to be done on the mobile side, I know and I will make it 😜.

3. SEO optimization 🤖

Regarding SEO, I don’t want to go into too much detail in this article because there is a lot to say. In general I have tried to follow the main guidelines for page structure such as use and ordering of heading tags, the use of meta tags and structured data for articles, descriptions and keyworkds.
We will elaborate on this topic in specific articles because some more or less important aspects of SEO are often underestimated, which, when added up, can lead to the nullification of the work done especially in these times where visibility is very important.

I am quite satisfied with the result obtained, I used as a tool SEO Tester which in addition to verifications also gives some information on how you can optimize your content.

4. Conclusions 🥸

I am of the opinion that with a few tricks, a little patience, motivation and a lot of enthusiasm and willingness to do and learn, excellent results can be achieved.
Going back I would make the same choices I made for my site development, the Qwik and Supabase combo, if used properly, are great tools for projects of any size although personally I would use them for small projects or to create POCs quickly.