Building a Custom Blogging Platform: The Journey So Far

When I started working on my blogging software, I didn’t just want to create another blog—I wanted to build something that could grow with me, both as a developer and a content creator. Inspired by John Cricket's Code challenges, I decided to take on this challenge and document every step of the process.

This blog post is the story so far—a mix of lessons learned, technical insights, and the excitement of creating something from scratch.

Step Zero: Laying the Foundation

Before diving into any real coding, I tackled the foundational tasks:

In this step I have setup a Next.js project, bought a domain and setup a CI/CD pipeline using netlify to boost my productivity on the publishing process allowing me to focus on whats important: Coding the Blog!

Why Next.js? Well, besides its many features I wanted to learn more about this awesome framework so I thought why not kill two birds with a stone?

  • Setting Up a Next.js Project:
  • Buying a Domain
  • Setting Up a CI/CD Pipeline (just a few clicks with netlify)

Step One: Rendering Static Content

Up to this point I has a working Next.js website properly hosted on a cloud provider linked to my domain. Also, everytime I pushed some code CI/CD was shipping and distributing my code to the world.

A piece of advice: Always start with the basics!

With the basics in place, I moved on to building the first core feature: rendering blog posts. Here’s how I approached it:

The goal:

  • Fetch & render a list of posts
  • On clicking a post render its contents properly

With that in mindo, I created markdown files and stored them on a directory inside my Next.js project. That's right, all posts were store on the frontend project. Why? Well, because my goal was to fetch posts from a data store and render on the website.

That allowed my to work purely on parsing markdown files and rendering stuff like images, lists, code snippets properly on my blog. In the future I can just move the posts to a database but that's a problem for tomorrow!

Data Model

In order to handles posts I have structured each post so that it has a corresponding JSON object containing metadata like title, creation date, description, and ID.

{
  title: "Article 4",
  createdAt: "March 24, 2022",
  description: "Example post with headers, lists, images, tables, and more!",
  id: 'next-15-rc'
}

Markdown Parsing

Problem: I Write and store the posts in markdown files but a browser only undestands html

So obviously I have to parse the markdown files converting them into HTML.The HTML is then displayed based on a template (mostly css I've created), giving the blog posts a consistent look.

I picked to libs for that job:

  • markdownit: a javascript markdown parser
  • hljs: a code snippet syntax highlighter

I then combine those libraries on a pipeline to read the posts parse convert them to HTML, highlight Create a backend to serve the frontend with any resources it need.content on a div.

What’s Next?

Next, I’m diving into Step Two, where I’ll:

Move the posts to a database. Create a backend to serve the frontend with any resources it need. This journey is a work in progress, but it’s been incredibly rewarding so far. If you’re curious about how things evolve or have tips and suggestions, drop a comment—I’d love to hear from you!

There is no comment section yet so fell free to reach me on my social media right here on the bottom of the page.