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.
Conclusion
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.
Acknowledgments
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!