🧁 Static Recipe Blog

The Static Recipe Blog was a foundational experiment in building a fast, content-first site without a backend. This project took a minimalist approach: statically rendered markdown pages served through Next.js App Router and deployed on Netlify.

It served as the technical and structural prototype for my full personal website, teaching me how to balance content management, site performance, and developer simplicity.

🧠 Key Concepts Applied

• ⚛️ Next.js App Router (/app directory)
• 📄 Static content using .md files
• 🧠 YAML frontmatter with gray-matter
• 🖋 Markdown rendering with markdown-to-jsx
• 🔁 Dynamic routing via [slug]/page.tsx
• 🧼 Lightweight design, no backend
• 🚀 Static deployment on Netlify

🔗 Live Demo

Explore the live application here

🛠️ Tech Stack & Libraries

• Next.js (App Router)
• TypeScript
• gray-matter – for parsing frontmatter from .md files
• markdown-to-jsx – for rendering markdown as React components
• Netlify – for static deployment

📚 What I Learned

Through this project, I became comfortable with:

• Next.js App Router and dynamic route generation
• Using gray-matter to extract frontmatter from markdown
• Rendering markdown content safely and flexibly in React
• Designing file-based CMS patterns using just the filesystem
• Deploying static Next.js apps on Netlify
• Keeping dev tooling clean in a minimal setup

🧾 Source Code & Final Thoughts

You can explore the source code on GitHub to see how the project is structured.

After working with Firebase and real-time data in the Cooking Club app, I wanted to explore a totally static approach. The goal: build a markdown-based blog system with clean routing, flexible metadata, and no backend.

The Static Recipe Blog was that proving ground for how I wanted to structure and build my personal site going forward. No backend, just clean markdown, solid tooling, and a framework that scales with content.