How I built my own blog from scratch (Using Next.js, MDX and Vercel)

Hi! I’ve decided to create my own website for hosting my blog posts and guides. The website is currently live over at andersmadsen.dev. This article explains why and how I did it. I hope this article provides useful insight or inspiration to you. Let’s dive in 🤿.

Why create a blog?

It might be a bit misleading to call it a blog, as it is more a platform for my content, which will mostly be provided in a blog post format. The content will be blog posts (such as the one you are reading now) and guides that I write while working on my projects.

Throughout my career as a developer I’ve made a ton of my own guides, just for myself. I made these guides because I can’t remember everything I’ve done, and the help I needed wasn’t googleable (or very good). I want to fix that, so that when someone in the future, like me, googles something like “how to set up an Azure static app with Terraform”, there will be a high-quality result 🙂.

Why not just use Medium for this?

Even though there are a lot of guides on Medium (I even added some of my own), I don’t feel that this is the right platform for it. I personally wouldn’t be interested in following a writer who creates random software development guides, as I am here for inspiration and insight. An issue with Medium, is that it isn’t possible to have multiple channels of content that people can subscribe to (please correct me if I am wrong).

While I do want to monetize my guides, I do not want to do so at the cost of a reader’s access to my content, which is the case on a platform like Medium with it’s monthly allowance of free “member-only” articles.

Why build your own platform instead of using existing technologies?

Most of my web developer expertise is in React or other frontend technologies. By using Wordpress I would have to learn a new technology. I would like to learn Wordpress at some point, but i didn’t feel like this was the right time.

I considered using the Wordpress backend for hosting content (articles, images), which definitely is possible and seems rather intuitive through a GraphQL interface. However, using plugins allowing for this intuitiveness would require spending around $300 a year minimum, and I am cheap 😛. I could also have decided to host Wordpress myself, circumventing this cost, but at that point I would rather just create my own website from scratch.

Lastly, I thought it would be fun and interesting.

The development process

The process of creating the website was a surprisingly long one, mainly because I used technologies I haven’t used before to do something for the first time: create and host my own website. I also definitely overengineered a lot of stuff (as you do 👨‍💻). I also spent time busting my head trying to implement stuff that just didn’t gel with my choice of technology. It ended up taking 70-ish hours of my free time over three months ⌛.

That aside, the process itself was simple enough, I mainly switched frantically between:

1. Creating a specification for what I wanted the website to be.
2. Creating a design in Figma using the specification.
3. Implementing the design in code. This one definitely took the longest.
4. Working on getting the website hosted.

The tech stack

The website was mainly created using the following technologies:

• Next.js for the frontend framework.
• MDX to render markdown files to HTML.
• Fuse.js for search.
• Tailwind CSS and styled-components for styling.

MDX

It can be argued that using MDX for something like this is overkill. You can definitely get going faster by just using HTML. The performance is the same since Next.js makes sure that your blog pages are static and therefore rendered at compile-time.

However, there are multiple advantages to using MDX:

1. You can write in markdown format which gets translated to HTML upon render. Using HTML for this would require you to insert the proper tags (<p>, <h1> etc.). This leads your blog posts to be easily readable while you write them.
2. There exists awesome plugins like Code Hike which renders code section with proper syntax highlighting.
3. You can insert a key-value section at the top of your markdown document which can be read by MDX. This is useful if you for example want the title of the post as the title of the page. It is also useful for when you are generating the blog post index for your website.

Hosting

I initially tried hosting this on Azure via “Azure Static Web Apps” since I have experience with that, but I ended up not being successful. This is where Vercel comes in. I can not reccomend Vercel enough, it is an amazing cloud service by the creators of Next.js. Just register and point it to your repo and it will have your solution up in no time! It also helps that it is incredibly cheap 🤑.

Conclusion

All in all, this was a fun and fruitful project. I am very happy that I now know how to create and host Next.js projects! Another cool thing is that I now have my own developer website! I hope you were able to be inspired or gain insights through this post. The website is live over at andersmadsen.dev. There isn’t much content at the moment, but I expect it to grow over time 🙂.

Feel free to follow me. If there is enough interest, I’m up for releasing the source code and creating a new post going into more detail with the code.