Develop performant blog with Qwik and Supabase

We begin the first phase of our Blog development with the design of the Sitemap and template!

Topics

1. Sitemap - What it is and why it is important
2. Sitemap - Definition of pages
3. Choice of template and layout
4. Conclusions

1. Sitemap - What it is and why it is important 🌍

A sitemap is nothing more than a file, usually in XML format, that contains the definition of the pages of a website organized hierarchically. We can see the Sitemap as the table of contents of a website, equivalent to the table of contents of a book, and it is useful for pointing users to navigation on the site.

In addition to users, the sitemap is responsible for telling search engines how the website is organized, which makes it easier for crawlers to crawl it in order to optimize the indexing of website pages.

2. Sitemap - Definition of pages 🗺️

Now that we know, in general terms, what a Sitemap is we will go on to create our own for the blog. There are several free solutions for creating a sitemap, and there are also sitemap generators to which you only need to indicate the website domain to scan and generate it. Definitely a convenient system because then we don’t have to worry about creating it ourselves.

For Sitemap creation, I opted for a tool called Octopus and it offers a free project with unlimited pages. The features of Octopus that impressed me are:

• Modern Design
• Easy to use
• Definition of Sitemap pages
• Adding details on pages
• Page generation (basic wireframe) with AI

With this tool we can then define the pages of our site, export the Sitemap in XML format and generate a layout of the pages (editable) which I must say is a very useful feature to take ideas regarding the components to be developed and the organization of the pages.

Octopus Sitemap

In the image above I have defined on Octopus what will be the pages of our Blog and the content they will have. Once we have created our Sitemap we can already define the routing of our blog with static and dynamic urls.

Below is the mapping between Sitemap and url:

The url elements [pokemon] and [article] are dynamic elements and based on their value we are going to display the related information.

Now that we have defined our sitemap, why not take advantage of the page generation that this tool offers us?

After some refinement here are, roughly, the layouts of the pages we are going to develop:

In my opinion Octopus seems like a really good tool for speeding up and facilitating the creative process, and above all it offers a good free plan for those who do not have too many needs. Here is the link to the Sitemap: Blog Octopus Sitemap

3. Choice of template and layout ✒️

There are so many good layouts and templates out there, and it was not easy to find one. In the end, I opted for a template that is not too serious and is easy enough to take inspiration from so that I can make a good mix between development and UI needs.

The template to take a cue from that I chose is OXXO developed by Templatesyard (a company that deals in developing templates for blogs).

From this template we will take the forms and refer to the layout organization but still, in development, we will focus more on functionality rather than component development (obviously some we will develop together 😉).

Having reached this point, the ideal would be to create a Wireframe on tools like Figma but I personally prefer to leave this work to the designers (I am not). Having a base from which to start, for the project we are going to develop, will be more than enough.

4. Conclusions 🥸

In this article we have seen how to design a Sitemap and the importance of its existence especially for search engine indexing. We also found a usable layout for our project and now we can proceed with the development of our wonderful blog that we will title… in the next article 😊

02. Design sitemap and template 👈

05. Build main layout | Cooming Soon