I am redesigning my personal site with the main goal of having a better surface area for reading. I will bump into plenty of hurdles but I’m looking forward to figuring things out 🚀
I won’t cover which headless CMS I am planning to use to draft, edit and publish content. Finding one terrifies me so if you have any low-config recommendations please give me a shout on Twitter.
Anyways, keep reading to find out more about the three technologies that I have set on to build my new site:
- Next.js: My React framework of choice.
- Tailwindcss. A glorious utility-first CSS framework.
- Vercel. For hosting and seamless git-based deployments.
Next.js is the React framework that I am using to build the website. It provides a great ‘developer experience’ and comes with a set of built-in features that make the lives of newbies like me easier. Here are my top 4 features 👇
Zero config → I don’t need to worry about code compilation and bundling. This is done automatically with Webpack and babel.
Fast refresh → Also known as ‘hot reloading’ it gives me instantaneous feedback on edits made to the React components.
Production-ready code → This is a killer 🙂. Any Next.js application is ready for production from the start.
Static-generation → The HTML is generated at build time and will be reused on each request. Aka, incredibly fast.
Tailwindcss is a utility-first CSS framework intended to ease up styling web applications. I have been playing with Tailwind on a project that I am building with a programmer friend of mine for the past couple of months and I’m all in.
Some people call it a “utility bundle” and I like that. Instead of providing predefined UI components, Tailwindcss comes with a set of utility classes (constraint primitives) that you then use to build your components.
This approach comes with some downsides (your HTML pages will get cluttered) but I feel that the benefits of styling your web app without the need to writing custom CSS or leaving the comfort zone of your HTML code outweighs its drawbacks. Here is a nice quote from a pro:
If I had to recommend a way of getting into programming today, it would be HTML + CSS with Tailwind CSS. — Guillermo Rauch
And finally, I will be using Vercel to take care of deployments and hosting. Deploying and hosting websites is a breeze nowadays compared to days of FTPing your files over to servers.
There are a number of services playing in this space. They integrate seamlessly to version control systems like GitHub and will kickstart their deployment process every single change the master branch. As I read somewhere yesterday, today deployments are just a git push away.
I was using Netlify on my previous site but as Next.js was created by the team behind Vercel, I have decided to give them a go 👋
That’s all. I enjoyed writing this post.
Thanks for reading,