What tech stack is this blog using?
This is the question many fellow tech nerds have been asking. I’ve tried building my own website and blog many, many times throughout the years but I never committed to actually putting it live. Eventually I was sick of this bad habit and started to look actively at tools I could use to make my developer experience fun, but also have a good website with minimal technical debt.
Alright alright, enough with the boring texts explaining what I went through. You’re just here for the technical talk! I get it. Let’s get into it.
Frontend
The frontend is built using NextJS (so technically it’s React). I’m using functional components to structure my components. Since I opted to be quite strict and (at least try to) not run into any weird bugs, I use TypeScript. If you’re interested in why TypeScript might be better for your project compared to JavaScript, let me know and I'll write a blog post about it. When I was thinking out loud about how I will structure my site, I noticed that I will most likely need specific methods for specific pieces of data. This meant that I created classes and used interfaces to properly state the types. It’s quite some work to keep up, but it’s also the most solid I’ve noticed while working in the industry for some years.
I’m using most of the benefits NextJS provides. Static generation, improved SEO, lazy loading by using the Image component. It’s such a good developer experience to set up and there are many examples only to learn from as well.
CMS
I’ve gone down the rabbit hole when I was searching on how and which headless CMS to use for my blog. Eventually I ended up using Sanity, because I like how they made and used PortableText. If you’ve never used PortableText, I’ve written an introduction to PortableText here which you can read here.
Another rabbit hole I went down is email marketing. I’ve always wanted to build an email list to make sure I have the correct people I can inform about new blog posts, but I did not know anything about emails before. After hours and hours of research and comparison, I’ve opted for using MailerLite (free) for now.
Hosting
This website is a static website. I could've created an endpoint for my newsletter subscribe form in NextJS, but this then would need a node backend. This was what I first made and put on DigitalOcean, but then it would give me the estimated costs of $5 a month. As much as I would love to pay that, having it be hosted for "free" is even better. So I looked at Netlify and decided to use that.
No API... so how did you create the newsletter form?
By using Netlify, I could make use of the free tier of Netlify Forms to have people sign up for my newsletter! I then setup a function in Netlify that would run whenever I got a new subscriber and that would fire a POST request to MailerLite to add that new subscriber to the mailing list.
Summary
So in short my tech stack is:
- Frontend & Backend: NextJS
- Headless CMS: Sanity
- Hosting static website: Netlify
- Hosting CMS: Netlify
- Email: Mailerlite
