My First Post: How Not to Forget My Own CMS Setup Ever Again

Welcome to My Blog (aka My Brain's External Hard Drive)

Hello, fellow human (or bot, no judgment). This is my first actual “article” on this static blog though calling it a blog feels generous. Right now, it's more like a digital sticky note that pretends to be a CMS.

"The best time to plant a tree was 20 years ago. The second best time is now."

— Some wise Chinese person

What's Even the Point of This Post?

In this deeply riveting guide, I'll walk you through:

How I abuse frontmatter to keep my sanity
The full range of Markdown elements I allow myself
Why file naming is my love language
How I avoid writing in Spanish (controversial)
And why this whole thing is basically a temporary workaround until I finish my from-scratch CMS (still a few light years to go)

Spoiler: This blog is 80% for me, 20% for you. I just don't want to forget how my own system works by next month.

Frontmatter: Where Metadata Becomes Therapy

Every .md file starts with YAML frontmatter. It's like the ID card for your article, except this ID includes whether it's “featured” or just “sadly neglected.”

Here's the full config:

code

---
title: "Your article title"
description: "Description that appears in the list and SEO"
author: "Your name"
date: "2025-08-13"
publishDate: "2025-08-13"
readTime: "X min read"
category: "Category"
tags: ["tag1", "tag2", "tag3"]
featured: true  # If you want it to be a featured article (it's actually a recent post flag)
image: "/images/blog/image.jpg" # Optional
---

I pull this data using articles.ts, which fetches everything from src/content/articles. Very simple

code

export function getAllArticles() {
    const files = fs.readdirSync(articlesDir).filter(f => f.endsWith(".md"));

    return files.map((filename) => {
        const filePath = path.join(articlesDir, filename);
        const fileContents = fs.readFileSync(filePath, "utf8");

        const { data, content } = matter(fileContents);

        const match = filename.replace(".md", "").match(/^(.*)-(es|en)$/);
        if (!match) return null;

        const [, slug, locale] = match;

        return {
            slug,
            locale,
            content,
            title: data.title ?? "",
            description: data.description ?? "",
            author: data.author ?? "",
            date: data.date ?? "",
            publishDate: data.publishDate ?? "",
            readTime: data.readTime ?? "",
            category: data.category ?? "",
            tags: data.tags ?? [],
            featured: data.featured ?? false,
            image: data.image ?? "",
        } satisfies Article;
    }).filter(Boolean);
}

Markdown Elements: Because HTML is for Masochists

Headings and Subheadings

Use # to ###. Don't go deeper unless you're writing a thesis on existential dread.

code

# Main Title (H1)
## Subtitle (H2)  
### Minor Subtitle (H3)

Text and Emphasis

Bold with **text**
Italic with *text*
~~Striketrough~~ if you regret something.

Lists

Bulleted list:

First element
Second element
Third element with more text to show how wrapping looks (like my patience during meetings)

Numbered list (writing this, I just realized this does not work...)

First step
Second step
Third step (profit)

Quotes and Blockquotes

For fake wisdom or stolen insights:

Quotes are created with >

"Programming isn't about what you know; it's about what you can figure out."

— Personal reflection, probably while debugging

Code

Inline code: helloworld("print")

or code blocks:

code

function greet(name) {
    console.log(`Hello, ${name}!`);
    return `Welcome to the blog, ${name}`;
}

// Usage example
const message = greet("Rodrigo");
console.log(message);

code

def create_article(title, category):
    """
    Function to create a new article
    """
    article = {
        "title": title,
        "category": category,
        "date": datetime.now(),
        "author": "me"
    }
    return article

# Create an example article
my_article = create_article("My First Post", "Tutorial")
print(f"Article created: {my_article['title']}")

Tables

For When You Need to Feel Organized:

Element	Syntax	Example
Title	`# Title`	# My Title
Bold	`text`	important
Italic	`text`	emphasis
Code	`code`	`console.log()`
List	`- element`	- element

Links and Images

You can create links to other pages or include images (when you have them):

code

![Image description](/images/blog/example.jpg)

File Organization: My OCD on Display

All articles live in src/content/articles. Naming convetion:

my-first-article-en.md -> English
my-first-article-es.md -> Spanish

But here's the twist: I'm not writing anything in Spanish anymore Why? Because I automated translation using Gemini and... I need to improve my English Is it perfect? No Could it accidentally translate “I love Ceviche” as “I hate Sushi? Probably

So if something sounds weird or culturally offensive, blame the AI, not me This blog runs on Markdown, TypeScript, and plausible deniability

Tips for not sucking at Blogging

Future Me, listen up.
You're going to forget how to blog properly in three weeks?
And since youll probably start writing that paper or scientific article you've been procrastinating,
this guide is also for making sure it doesn't read like a bad Wikipedia entry.

1. Structure Like a Developer, Write Like a Human

Start with a hook. Not clickbait, and not a React hook either. You know better.
Subheadings are breadcrumbs (for blog sections and for paper subsections)
End with something: a conclusion, a joke, or both. You like both. (0 jokes in paper)
Throw in a call-to-action. In blogs, it's “read more”; in papers, it's “further research is required” (classic academic move).

2. SEO & Readability: Don't Torture Future Readers (or Reviewers)

Note to Future Me: You still haven't fixed the metadata. None of your articles are actually optimized for SEO. Do that before pretending you care about impact factor.
Keywords in the title/description? Yes, it works for Google Scholar too.
Paragraphs longer than 4 lines? Bad for readers. Dense paragraphs without figures or tables? Bad for reviewers.
Break it up with lists, code snippets, diagrams, or quotes people need mental rest stops.
Optimize your description for search and citations (Google Scholar, ResearchGate, or whatever platform exists in the future).

3. Categories: Make Them Make Sense

Heres what worked last time:

Tutorial – “Do this and it should work… probably.”
Reflections – “Things I learned after setting everything on fire.”
Technology – “Cool thing I just discovered and sort of understand.”
Projects – “Behold my creation (plus its 17 bugs).”
Learning – “Notes to Future Me when I inevitably forget this again.”
Research Notes – “Data, experiments, and that one chart I hope nobody double-checks.”

That's it.
Follow this, and maybe, just maybe, Future You will thank Past You instead of sending passive-aggressive commit messages…
or worse, reading your own published paper and wondering who wrote that nonsense.

What's next?

Now that you've seen my digital skeleton, you can:

Create your first real article (not just a template about templates)
Play with Markdown like it's 2004 and we're all still excited about it
Find your voice (no comments)
Plan a series or just wing it, no pressure

This article exists solely so I don't forget how my own blog works before I migrate everything to my custom CMS. You're welcome.

Also, if you're reading this and thinking, “Why not just use WordPress?” Because where's the fun in that? I need at least 3 unnecessary layers of abstraction.

Remember: MDX lets you keep all your existing Markdown while adding interactive React components where needed!

Did you find this helpful? Share it, copy my system, etc. Got a topic you'd like me to cover? Let me know

And hey, stay tuned. because next up is a series of deep dives into how I built my own CMS from scratch (yes, assuming im goint to finish it), the borderline obsessive upgrades to my custom Markdown renderer, the shiny docs for a few libraries I've been cooking, the inside story of my AI project Lisa AI, and, of course, the time I “accidentally” hacked my university and somehow got hired for it. Should be fun.

Let me know if you want a shorter version, a more serious tone for certain sections, or if you want to autogenerate future posts with a CLI script (because of course you would).