If you are a developer, consider using this tech stack for your blog instead of WordPress

2021-01-30 / Niclas Timm

If you are a developer, There is a better way to create your blog than using WordPress. It is faster, easier and more fun!

WordPress is by far the most popular Content Management System (CMS) in the world. Especially due to the abundance of themes and plugins you can spin up a professional blog in a few days or even less. However, WordPress comes with some overhead that increases setup time, decreases performance and are generally not that enjoyable to work with for developers. In this post you'll find out which tech stack you can alternatively use to build your blog.

If you can code, you don't need WordPress

This statement does not mean that you should create you own CMS. That would take way too much time. But it means that if you already feel comfortable in a code editor and with deployments, why would you need a CMS in the first place? The nice interfaces WordPress provides make it easier to upload content to a database/website for people who don't have any experience at coding at all. But we as developers do.

Use Next.js

So let's get real: Next.js is a great way to host your blog if you are a developer. It's a framework for React that allows you to do a bunch of stuff that would take 2 years of setup in "normal" React. Here are a few reasons why you should use Next.js:

  • Server Side Generation: Once you're done coding you can tell Next.js to create static html files from the code you wrote in React. Awesome, right?
  • Markdown support with MDX. Developers love markdown. With MDX, which is a Javascript library, you can include markdown files into your code base and have Next.js convert them into HTML upon build. The best thing: This even supports inline React components. This means you write your markdown content and then throw one of your custom React components in there to make things look more interesting. Awesome!
  • More fun than WordPress. It's so much fun to write code in Next.js because it abstracts away most of the ugly React stuff and leaves the fun part to you. That's way more enjoyable than writing hooks and templates in WordPress.
  • Great hosting options. When using Netlify or Vercel, hosting your Next.js app is a charm. Just connect it to your GitHub repo and trigger automatic deployments every time you push something to the main branch.

Server Side Generation: The future is now!

When I first used this feature in Next.js I just couldn't believe how great it is. Here's how it works: Once you are done with your code you run an export command in the terminal that looks at your React code and compiles static html files from it. The code and ONLY the code that is required for that particular page will be included in the file. No bloated Javascript files that contains code for components that are not even used on the page. You, during all of that, can enjoy all the benefits of coding as if it was a Single Page App you're creating, but the final result will be far away from that. The huge advantage of this is a dramatic decrease in server response times and increase in SEO performance. With WordPress, when visiting a URL, the content has to first be fetched from the database and injected into your template file. If you do not have a good caching system in place this can really impact performance. This problem does not occur with Static Site Generation as all content is fetched upon build time. The blog you are currently on, for example, was created in that exact same fashion and you might have noticed that it is ridiculously fast 🙂. I also heavily use this feature in the feedback app for indie hackers I am currently creating.

Use Markdown for your posts

"Am I supposed to write my posts in HTML then, or what?", you might ask. Fortunately, the answer is no. You can use markdown instead 🎉 (developers love markdown). Here's how that works:

  • For every post, you create a new markdown file that contains the content as well as the meta data.
  • Use a Javascript library to convert markdown content to HTML (e.g., convert markdown links to HTML anchor tags). Use MDX if you also want to be able to display components in your markdown.
  • Let Next.js create a static HTML file for every of your markdown files.

Easy hosting and serverless functions with Netlify

Hosting your Next.js app is even easier than creating static HTML files with. There are two main players in this game: Netlify and Vercel. Both are great options (fun fact: Vercel is the creator of Next.js). However, I have only used Netlify so far as I heard that you cannot limit Vercels access to your repos to just the one you actually want to host with them.

All you have to do is to create a free Netlify account and give it access to your GitHub repo. Tell it which command it should execute at build (the same one you use locally)... and that's it! From now on Netlify will rebuild and ship your app every time you push something to the main branch.

But that's not all. You might also need some backend functionality that you cannot (or should not) accomplish with your Next.js app. For example, you might want to collect E-Mails via the Mailchimp api. As you don't want to expose your api keys to the public, you should do the requests to the Mailchimp api via a server. Netlify has you covered on that as it allows you to create severless functions that you can use in your app. The hosting provider also developed a nice NPM package that lets you test the functions locally. Find out more about that here. It also provides a very easy feature to capture form submissions.

Fast, easy, fun

In a nutshell, if you are a developer you should consider using Next.js for your blog instead of WordPress because its blazingly fast and easy to set up and deploy. And last but not least, building with React and markdown is much more fun that in WordPress. I guarantee you that you will need this as a motivation once the magic of starting a new project is gone and you have to get your hands dirty with the reals business. Thanks so much for reading 🙂.

Shape the product & get updates

Tired of only reading about the progress? Subscribe to the mailing list & get early access to the feedback app, become a beta tester and experience how the app eveloves due to your valuable input. Plus, you'll be the first to receive updates!