Making This Blog

This Works!

I finally decided to make a blog just to jot down my thoughts and stuff I’ve learned.

But instead of actually planning things out and setting up proper infrastructure, I ended up throwing everything together in an all-nighter.

Having gone through the nightmare of deploying sites before (and dealing with all the headaches that come with it), I really wanted to keep this site as lightweight as possible. (I am also very lazy)

The Requirements

I gave myself a quick list of requirements to guide my frantic development session.

• A main page
• A section to show off my projects
• Some way to view blog posts (with some basic formatting, at least)

I’m kind of lazy and didn’t really want to use/learn a full-blown CMS

All I wanted was something simple to write blog posts.

Since I’m already familiar with React and enjoy working with JSX, I figured that’d be the way to go. Now, the question was: what should I use to display and format these blog posts?

(Maybe) Reinventing the Wheel?

I initially thought about using Markdown since it’s pretty straightforward and widely used for blogs. However, I quickly realized that it took more than 10 minutes to implement, and thus my laziness prevailed.

Then I stumbled across MDX. It seemed pretty neat (no XML!!), but it felt very tailored to the Next.js crowd, and so was kinda too much to integrate.

I definitely didn’t want to create a new component for each blog post, and I also wanted to include metadata (like the post’s description and date).

Fortunately, Node.js has this super handy tool for running scripts (I mean it’s kind of the whole point of it, I just don’t use it for that ever).

So, I figured I could write a simple script that reads through every “raw” HTML file, grabs the creation date, and extracts the metadata from a comment (hacky, but it works).

files.forEach(file => {
    if (file.endsWith('.html')) {
        const fullPath = path.join(postsDir, file);
        const stats = fs.statSync(fullPath);
        
        const firstLine = getFirstLineOfFile(fullPath);

        metadata.push({
        filename: file,
        title: file.replace('.html', ''),
        date: stats.ctime.toISOString(),
        firstLine: firstLine, 
        });
    }
});

Now, here’s the thing: I use Tailwind, and I want my “barebones” HTML to at least look decent. Fortunately, Tailwind has a fantastic tool for this: prose. Essentially (at least, as far as I understand), it’s a set of styles that help make vanilla HTML documents look sleek and polished.

And it works!