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.
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.
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.