How to start developing your own blog website without getting overwhelmed

Hello! Hola! Welcome to my first post 👋😄  As this is my very first post on the internet, I’m going to introduce myself a little before getting into today’s topic.

My name is Jordi, born and raised in Valencia (Spain). I’ve been doing Software Engineering for more than 3 years now, focusing on the front-end part.

In this post, I'll give you some guidelines about how to start developing your blog website and why you should do it.

Why you should code your own blog

So you want to start blogging, huh? Well, then you should be aware that there are a lot of people out there doing the same thing, but in my opinion, not everyone knows how to differentiate themselves or stand out from the rest.

Most of the blogs out there are hosted on a common platform like Medium, dev.to, Quora; they look all the same. Sometimes it might be boring for some visitors.

If you know how to code, then you already have an advantage over the rest, because you can make your website look as you want, and add a lot of different custom functionalities.

Have I convinced you? Well, I hope so. In that case, I’ll give you more guidelines down below.

Content source

If you want to write down your own articles and then push them to your self-developed website, you’ll have to make a call regarding the content source, even though you can always switch to a different option, it’s better to save some time and make a good decision beforehand.

There are many many options out there, but I’ll talk to you about the ones I know and I think are the most popular ones.

Local content vs API-based content

So, if you just decided to make your own custom blog website as I did, the first decision here might be if you either prefer a local content-based solution or an API-based content solution.

When we talk about local content we talk about content that is uploaded to the repo of your project. That means every time we want to upload a post we have to commit and push the changes, so the blog is re-generated at build time. Some popular solutions are Markdown and MDX.

On the other hand, there’s API-based content, so the content is retrieved at the request time (each time we visit the website). This type of content source is also widely used by some big companies as it makes it easier to manage the content through a CMS (most of the time a headless CMS).

For an API-based solution, you can either upload your content at your own back-end, like a Strapi server (headless CMS) or on an API-content platform like Contentful or Sanity.

Depending on your needs you might choose either the first or the second solution. If you want to make it simple, fast to develop, and functional, maybe the local content option is the one you are looking for. On the other hand, if you want a more scalable solution, that doesn't require commits to make changes and that works better working with teams, the API-based solution is for you.

My choice

For my website, I decided to go with the Notion API to store and retrieve the content. It fulfills my needs and It’s so amazing that I can upload any post at any time right from my phone. For me it’s completely worth.

I’ll be publishing an article about how I coded my website with Notion API and Next.js very soon. Follow me on Twitter to stay tuned.

Architecture

Now that we decided where to store our articles, It’s time to think about the architecture. For me, this part of the development process it’s always important.

If you went for the local content solution, I highly recommend you to use an SSG (Static Site Generation) compatible framework, like Next.js for React, or Nuxt.js for Vue. I’ve already used both previously and both are pretty good options. You’ll need a parser to parse your Markdown or MDX files, so take your time to code it, as it is the most important part of your code. Good thing is that you can find tons of examples on the internet, and then modify it as you want. I’ll explain in my upcoming post how I’ve done it.

You can use those frameworks mentioned above for the API-based solution as well. I recommend you to change the approach to either ISG (Incremental Static Regeneration) approach or the SSR (Server Side Rendering) approach. In this case, parser code will completely rely on how your API serves the content, so you have to be careful when choosing the correct platform.

Deployment & CI/CD

We’re almost there, just one last step, the hosting of your website.

These days there are plenty of different hostings offering a pretty good value with their free plan. If you’ve coded your site with Next.js, you should stick to their ecosystem using Vercel. On the other hand, If you choose Nuxt.js you can use Vercel as well or Netlify for instance. You can check all the options here.

All the deployments mentioned above offer a premium plan, so you can scale your website with no effort. CI/CD it’s included on their free plans, so when you push articles to your repo they get published automatically.

Thank you!

I hope this article has been helpful. Remember to stay tuned to my Twitter for when I upload the post where I will explain how I coded my site and also give you extra tips. Thanks for reading and see you on the next one!