Hey Future Me - How This Blog Works

•
meta tutorial documentation

Hey Future Me! 👋

This is Past You from December 14, 2025. You're probably wondering how to add a new blog post to this site. Good news - it's super simple!

🎯 Quick Answer: Where This Post Lives

This exact file you're reading is at:

src/posts/hello-world.md

Yes, it's just a markdown file! That's it. No database. No admin panel needed.

📝 How to Add a New Blog Post

Step 1: Create a New File

Drop a new .md file in the src/posts/ directory:

src/posts/my-new-post.md

Step 2: Add Frontmatter (The Metadata at the Top)

Every post needs this header (called "frontmatter"):

---
title: "Your Amazing Post Title"
slug: "url-friendly-name"
date: "2025-12-14"
excerpt: "Short description that shows in the blog list"
tags: ["tech", "projects", "ideas"]
published: true
---

Your actual content starts here...

Step 3: Write Your Content

After the frontmatter (---), write normal markdown:

# Main Heading

This is a paragraph with **bold** and *italic*.

## Subheading

- Bullet points
- Are easy

Code blocks work too:
` ``javascript
console.log('Hello world!');
` ``

Step 4: Deploy

npm run build
./deploy-to-vps.sh

That's it! Your post is live. 🚀

🎨 Advanced: Embedding Projects

Want to show off a project? Use iframes:

<div style="border: 2px solid #4a5568; border-radius: 8px; overflow: hidden; margin: 2rem 0;">
  <iframe 
    src="https://your-project-url.com" 
    width="100%" 
    height="600" 
    style="border: none;"
    title="My Cool Project"
  ></iframe>
</div>

YouTube videos, CodePens, GitHub Gists - all work the same way!

📚 The System Architecture

What you built:

  • Markdown files in src/posts/ → automatically become blog posts
  • No database needed for posts (database is for contact forms)
  • gray-matter library reads the frontmatter
  • marked library converts markdown → HTML
  • SvelteKit serves everything

Key files:

  • src/lib/markdown.ts - The magic that reads markdown files
  • src/routes/blog/+page.svelte - Blog list page
  • src/routes/blog/[slug]/+page.svelte - Individual post page

🤖 Philosophy

Remember why you built this:

"Contact as presence" - The robot embodies the soul of this space. It's not just a website; it's an inhabited digital home.

The blog is the same - authentic, simple, yours. No algorithms. No pressure. Just ideas when inspiration strikes.

💡 Tips for Future You

  1. Slugs must be unique - They become the URL
  2. Use published: false to hide drafts
  3. Images go in static/ - Reference them as /image.png
  4. HTML works in markdown - Go wild with iframes!
  5. Check BLOG_GUIDE.md - More detailed examples there

🎉 You Did It!

You made a blog system that's:

  • ✅ Simple (just markdown files)
  • ✅ Flexible (HTML/iframes for anything)
  • ✅ Version controlled (git tracks everything)
  • ✅ No CMS needed (write in any editor)

Now go create something! The robot is watching and cheering you on. 🤖✨

P.S. If this feels overwhelming, just copy this file, change the content, and deploy. That's literally all you need to do.