The title I intended to use was "how I built my blog in a day" but lack of focus turned it to a five day build. I have been writing a little over a year now and I have contents on devto, hashnode, medium sometimes I post on all three and most times I post on just one. The constantly trying to be on each of these platforms to either update content or check analytics got exhausting, so why not have my own personal site where everything lives? I wanted this to also be a cool learning experience so I wanted to build it myself and not fork any template or use one of the popular CMS platforms.
The Stack
The tools I ended up using were:
- —Next.js 15
- —Tailwind CSS
- —Algolia
- —MDX
I won't go into too much detail about every line of code as this is more of an overview than a tutorial, but I'll walk through each tool and how I used it.
Next.js
I don't have some grand reason for choosing Next.js. I just thought it would make things easier, and it did. I'm already comfortable with React, so Next.js felt like a natural choice that wouldn't have too steep a learning curve.
What really made Next.js worth it was the file-based routing. Instead of setting up routes manually, I just created a blog folder with a [slug] dynamic route inside it.
I also used Next.js's static site generation feature through generateStaticParams(). This pre-builds all the blog post pages at build time, which means when someone visits a post, it loads instantly instead of having to render on the fly. For a blog, that's perfect - the content doesn't change until I publish something new, so why rebuild it on every visit?
The other nice thing was the built-in optimization. Images, fonts, all that stuff gets optimized automatically without me having to think too much about it.
Tailwind CSS
Tailwind made styling pretty straightforward. Instead of writing CSS files and coming up with class names, I could just drop utility classes directly in my components and see results immediately. Although I still pretty much prefer writing custom css and will probably will in the future.
MDX
Truth be told, this was the first time I was really diving deep into MDX. If you're familiar with markdown then this is pretty easy to grasp. It's basically markdown that lets you drop React components right in the middle of your content.
The reason I went with MDX over plain markdown was the component integration. Say I'm writing a post and I want to include an interactive demo, or a custom callout box, or embed something complex, I can just write it as a JSX component and drop it right in my markdown file. I wanted that flexibility.
Setting it up with Next.js required a few pieces. I used @next/mdx for the Next.js integration, next-mdx-remote to actually render the MDX content, and then gray-matter to parse the frontmatter (the metadata at the top of each post file).
Each blog post is just an .mdx file sitting in a posts folder. At the top, I have frontmatter that looks like this:
---
title: "My Post Title"
publishedAt: "2025-10-04"
summary: "A quick summary"
tag: "Web development"
---
Then below that is the actual post content in markdown. The gray-matter package extracts that frontmatter data, and I use it to display the title, date, and summary on the blog listing page.
I created a CustomMDX component that defines how each markdown element should render. So when MDX sees a heading in the markdown, it uses my custom styled heading component. When it sees a link, it uses my custom link component with hover effects. This gives me full control over how the content looks without having to manually style every single element in every post.
Algolia
Algolia was mostly a "I've always wanted to try this" situation. I'd heard about it for search functionality on sites and thought this was a good excuse to finally play with it.
Setting up search manually would've been a pain. I would need to index all my posts, handle queries, rank results, and much more complexity. You send it your content, it indexes everything, and then it gives you a search API that's fast and accurate.
The integration was pretty straightforward. I set up an Algolia index, pushed my blog post data to it (title, summary, content, slug), and then used their JavaScript client to query it from the frontend. When someone types in the search box, it hits the Algolia API and returns matching posts instantly.
The free tier is more than enough for a personal blog, and the search experience is honestly better than what I could've built myself in a reasonable amount of time.
What I'd Do Differently
If I started over, I'd probably spend more time planning the frontmatter structure upfront. I added and changed fields a few times which meant updating old posts.
I'd also set up better dev tooling earlier things like automatic date formatting and slug generation. I ended up doing a lot of that manually at first.
I might have just used a template to start with and customized from there. Building from scratch was a great learning experience, but it definitely added time that I could've spent writing instead. If you want to follow that route, here is an easy customizable template to use Template
Now I have a place where all my content lives, no more juggling multiple platforms.
Update
I removed Algolia as the site is pretty basic with just 3 contents so why add a search functionality