In recent times, I have dedicated myself to studying and researching new solutions and architectures to build a website, coming across applications defined as No-Code APP and Headless CMS.

After some tests and insights, I decided to start building my homepage, which had as a target:
- Storing the various contents on a database installed only in my locale development environment
- Release of updated and updatable content
- Using React to build frontend
- Serverless environment
- Deployment on free hosting, since I don't need to manage large flows of visitors
- SEO friendly

First of all, I needed to organize contents in a database (one of choice between PostgreSQL, MariaDB or SQLite), looking for something that could satisfy these requirements:
- The database schema and data must be updatable via a UI (I don't want to write trivial queries nowadays)
- CRUD exposed via REST Webservices (or GraphQL)

After some searches, the choice was between 2 HeadlessCMS:
- [Directus](https://directus.io/)
- [STRAPI](https://strapi.io/)

They are both opensource, offer a UI to model database schema and data and expose CRUD via REST API. After testing each of them I decided to use Directus (Admin UI was greater, less buggy - at least at the moment I performed the tests and more maintainable under Docker).

Adopting [Directus](https://directus.io/) allowed me to dedicate myself exclusively to frontend, the CMS is formidable and allows me to manage an entire database from scratch and organize it as needed, configuring relations between tables and offering a powerful ADMIN interface with typed editing fields. It also provides translation management thanks to which I was able to organize international content in a very comfortable way. 
With such an organized database, capable of offering also support for storing resources (such as images and videos), I studied the APIs exposed via REST Webservice, finding this method of implementation really advantageous.
So, the backend stack needed to complete the task was completed.

> At this point, I had to focus on frontend by looking for a product that would allow me to generate static pages starting from the contents available only in my development environment extracted via HTTP calls offered by Directus itself

Given my skills in ReactJS and the extreme comfort and simplicity of use, I was looking for something that would allow me to organize my pages using web components to "aggregate" the various building blocks of which a homepage is made up.
Having followed some courses by Michele Riva, in Florence, I decided to try [NextJS](https://nextjs.org/). This framework can offer various rendering techniques that satisfied my needs, in particular, I needed its engine for the SSG (Static Site Generation) so that the final product could be simple SEO-friendly HTML pages.

> NextJS offers 4 types of rendering: CSR (Client Side Rendering), SSR (Server Side Rendering), SSG (Static Site Generation) and ISR (Incremental Site Re-generation)

I began composing frontend building the various pieces of the puzzle (WebComponents) using the handy development server included in NextJS. Doing this, I have organized the full implementation, following the standards offered by NextJS and configuring internationalization as explained in its documentation pages.

> The webpage development was finally completed and the compiled version is composed only of HTML pages and public resources

In the end, I have to manage the deployment of the built version, excluding the NextJS development server, statically serving the HTML pages thus composed, and performing a re-deploy to update any modified content.

> My requirement was to use a free hosting service capable of serving these static resources.

After a couple of searches, I have to make a choice between:
- [Vercel](https://vercel.com/), the owner and maintainer of NextJS Framework
- [Netlify](https://www.netlify.com/), after seeing a couple of developers' sites hosted on it, but without any personal experience
- [Render](https://render.com/), known because I used to host other software using its free plan hosting (after that Heroku close its free plans)

I take the way of [Vercel](https://vercel.com/), because it was offering the hosting functionality for SSG, SSR or CSR pages, allowing me to generate the prebuild on my home system by publishing only the final product. I chose it also because it is the NextJS Framework maintainer so I was hoping for a seamless integration. That appeared correct and in a few minutes, I publish the homepage DEV version online.

> Vercel offers DEV and PROD development, permitting developers to test their development without breaking the Production version

**Yippee!** [My homepage](https://jacopovichi-dev.vercel.app/) was completed, updatable, and reachable on the Web without any hosting fees. 
All the tasks were fulfilled without writing tons of lines of code!!



Welcome to Jacopo Vichi's homepage, fullstack developer passionate about open source and Linux operating systems. In this article, I explain how I realized my homepage using API offered by Directus, NextJS and deployed using the Vercel's hosting.

In this article I describe which stack I use to compose my personal hompage and the challenges I overcome during developing

How I built my homepage

Articles

Welcome to the Jacopo Vichi's homepage. Jacopo Vichi is a fullstack developer passionate about open source and Linux operating systems. In this website you can know me, my works and read some articles in my personal blog.