I always wanted a place where I could write down my thoughts, experiments, works and share my knowledge with the world. There are actually several platforms that allow you to do so, but since I built frames, I was destined to create an ecosystem that uses ui.
So, here we are. Introducing blogs - a place for me to share my work.
I've been in the world of software development since 2017 (it's a long story, will tell you some other day) and I have used several platforms for blogging. Started off with Medium, it caters to a wide range of audiences, I wanted something specific for developers. Well, dev.to was a great choice, wrote loads of articles there, got recognition on X (formerly Twitter) and by that time I also discovered Hashnode, but the idea of building a platform on my own was always at the back of my mind.
So, I decided to create one of my own platforms. First choice was NextJs + Contentlayer. However, it didn't last long as the NextJs's upgrade wasn`t compatible with Contentlayer and the application broke. I even tried using Docusaurus, but their UI, yea I don't wanna talk about that. Then, came in Astro, life saver, all-in-one for sharing my experiments, projects, even about me. But still I didn't build it, picked up a template from astro. I was highly inspired by astro though, and that somewhat helped in building blogs.
blogs is default NextJs + ui with @next/mdx, date-fns, and a utility function. Yup, that's it.
It uses @next/mdx
to render markdown pages, a special function useMDXComponents()
to render custom markdown components. It really is very simple how @next/mdx
works and is pretty light too.
Now the issue arises on how to index blogs, for displaying them, linking them. There are a few packages that help us to fight these problems, frontmatter/gray-matter, but they require you to put some metadata as a key value pair on top of your markdown blog file enclosed within ---
. Now, this metadata also gets rendered onto the page and then you're required to replace @next/mdx
with next-mdx-report. But, then again, stop making it complicated. I wanna go with the default way. I don't wanna push my blogs onto a server. I am happy with my blogs sitting in the github repository(am I really though?).
So I just did what I wanted. I used node.js
's beautiful library fs
.
Yup, just read all the markdown files from the directory and created metadata from the file name.
But, what's the catch?
The name! Yea, it has to be in a specific format.
YYYY-MM-DD_blog-title.md
date and title separated by an underscore, the date and title can use hyphens in between words.
This utility function is defined in src/lib/utils.js
, currently for fetching blogs. But you can customize the path to use any other directory, fetching your projects, works, experiments, etc.
So, there you go. That's how I built blogs.
Interested? Create one yourself today, using frames,
npm create @pr4j3sh/frames@latest temp-blog myblog