Welcome to my blog!

I’ve spent quite a bit of time experimenting with different methods to set up a blog purely through code—no SaaS-based headless CMSs. After trying everything I could think of, I finally stumbled upon MDX, and it worked like a charm. Here we are!

If you're also learning to code, or thinking about building your own blog, this post will walk you through my journey, and I’ll share some key tips and tools that helped along the way.

Why Was It So Hard?

You might be wondering, "Why is it so hard to set up a blog?" After all, YouTube ads and web hosts like Hostinger often show how easy it is to launch a blog in just a few clicks.

While those platforms make it super easy to get a WordPress blog up and running, my journey was harder for a couple of reasons—and I’m glad it was. Let me explain.

The WordPress Frustration

I’ve been studying web development for about a year now, and early on, I vowed to code everything from scratch. I thought that, eventually, I’d be able to handle it all myself. In reality, though, web development is vast and complex.

Initially, I was dabbling in affiliate marketing, intrigued by the idea of making money by promoting products online. One of the first steps was to create a blog. But when I started, I quickly realized that my JavaScript skills weren’t strong enough to get even the simplest site off the ground. I kept seeing YouTubers advocating for WordPress blogs, so I gave it a try.

My WordPress Experience

I bought a course on Udemy from a seasoned WordPress developer who made everything seem so easy. And while it is easy to get a WordPress blog up and running, there were two major issues I encountered:

1. Limited Control: As my coding skills improved, the drag-and-drop workflow of WordPress became frustrating. I wanted more control over my code and design.
2. Performance Issues: Even after optimizing and stripping down WordPress as much as I could, I couldn’t achieve a high-performance score on Lighthouse tests.

These frustrations made me refocus my energy on JavaScript and React. I was enjoying React more and more as I learned about it, so my next question was: How do I create a blog using React and Next.js?

Exploring the Headless CMS

While diving deeper into web development, I discovered the concept of a headless CMS. Unlike traditional platforms like WordPress, a headless CMS only provides the back end, allowing you to use any front-end technology you want. For me, that was React and Next.js.

Why I Didn’t Choose a Headless CMS

Initially, I explored platforms like Contentful, which seemed like a great option for managing content flexibly. However, after weighing the costs of these platforms, I decided it wasn’t worth it, especially for a personal blog. This led me to a simpler, more cost-effective solution: managing my blog posts locally using MDX files.

By choosing MDX, I was able to keep everything local, integrate directly with my React components, and avoid any ongoing costs associated with third-party services.

Technical Deep Dive: My Blog Setup

Here’s a quick look at how I set up my blog using Next.js and MDX:

1. MDX for Content Management: MDX allows me to write my blog posts in Markdown and integrate React components seamlessly. I can easily add interactive elements, such as custom buttons, directly into my posts.

   npm install @mdx-js/loader @mdx-js/react
   

Static Site Generation (SSG): Next.js’s static site generation (SSG) helps generate all the pages at build time, ensuring super-fast load times for visitors.

npx create-next-app my-blog

2. React Components: Since I’m working with MDX, I can create reusable React components, like headers and buttons, and use them in my posts to add interactivity.

What I Learned

Reflecting on my journey from a complete beginner to building a blog using React, Next.js, and MDX has been incredibly rewarding. Here are a few key takeaways:

• Embrace Frustration: The frustrations with WordPress pushed me to learn more about coding and gain control over my website.
• Don’t Overcomplicate: A headless CMS is great, but for a personal blog, keeping everything local with MDX worked perfectly for me.
• Experimentation is Key: Trying different technologies helped me find the tools that fit my workflow best.

Conclusion

Building this blog from scratch has been a challenging but rewarding experience. I’ve learned a lot about the power of React and static site generation with Next.js. If you’re also learning to code, my advice is simple: don’t be afraid to experiment and make mistakes along the way. The sense of accomplishment in overcoming technical challenges is worth the effort.

What’s your biggest coding challenge?

I’d love to hear about it in the comments below. Have you built a blog with Next.js or experimented with MDX? Share your journey or ask questions—I’m here to help.

Subscribe to My Newsletter

Want to follow my journey? Subscribe to my newsletter for more tips and tutorials on web development and the latest tools in React and Next.js.