Personal website and blog setup

I decided to revamp my personal website - my previous setup was based on GitHub Pages + Jekyll, but I wanted something more modern and on which I could have more control.

So, here it is: you're looking at it right now! It's a static website based on Next.js - I also created an open-source template that you can duplicate to create your own and quickly deploy it on Vercel.

My own requirements

Here are the requirements I had when I started creating this:

Static & fast

This is a simple static website, and I wanted it to be pre-rendered and super fast. Since I am comfortable with React, Next.js was an obvious choice: it's probably the easiest way to build statically rendered React-based apps and comes with an excellent developer experience.

Continuous deployment

Next.js is developed by Vercel, and they also offer a platform to quickly deploy Next.js apps - it's free for personal use! It is sufficient to create an account and connect it to the app's repository, and it just works, triggering a deployment for each commit on the main branch.

Low editing friction

I often edit the homepage description to keep it in sync with reality and my CV or LinkedIn profile. Thus, I wanted to lower editing friction as much as possible.

I chose to read its content from a Markdown file in the same repository. In this way, I can update it just by editing Markdown and committing. I applied the same to any other page.

For what concerns the blog, I can create a blog post by simply adding a new Markdown file in a folder of the website's repository - it's super easy with Next.js dynamic routes. It's what you build following the Next.js official tutorial.

Preview of changes

I needed a way to preview any edit to the website, or any new blog post, before actually deploying it. Luckily, Vercel creates a preview deployment for every pull request by default - I can just perform a pull request on my website to add a new post (i.e., a Markdown file), and I have a preview deployed in a few seconds.

Dark mode

I wanted the website to follow the dark mode setting of the viewer's operating system - that's one of the main reasons I chose to use Tailwind CSS. It's a CSS framework with a fantastic developer experience and comes with a dark mode feature out-of-the-box.


I am pretty satisfied with the result: it has a simple but cool look, and it satisfies all the needs I outlined above. Furthermore, I already wanted to try Next.js and Tailwind CSS, and this was the perfect occasion.

I hope the template I created could help someone build their own blog.


Francesco's, Fabrizio's, and DHH's websites were great inspirations. Special thanks to Francesco, who also suggested Next.js and Tailwind in the first place!