How to Add and Edit Markdown Blog Posts

Welcome! This guide will teach you how to create, edit, and manage markdown blog posts in this Next.js portfolio website.

📁 Project Structure

All markdown blog posts are stored in the /content/blog/ directory, organized by language:

content/
└── blog/
    ├── en/           # English blog posts
    │   ├── my-first-post.md
    │   └── another-post.md
    └── de/           # German blog posts
        ├── mein-erster-post.md
        └── ein-anderer-post.md

📝 Creating a New Blog Post

Step 1: Create the Markdown File

Navigate to /content/blog/en/ (or /de/ for German)
Create a new file with a descriptive name: my-awesome-post.md
Use lowercase letters, numbers, and hyphens only
Good examples: getting-started.md, web-dev-2024.md
Bad examples: My Post.md, post_1.md

Step 2: Add Frontmatter

At the very top of your markdown file, add the frontmatter block between --- markers:

---
title: "Your Blog Post Title"
slug: "your-blog-post-slug"
date: "2024-12-20"
summary: "A brief description of your post (150-200 characters)"
readTime: "5"
category: "Development"
author: "Leon Richter"
---

Frontmatter Fields Explained:

title: The main heading of your blog post (appears on the page)
slug: URL-friendly identifier (must match filename without .md)
date: Publication date in YYYY-MM-DD format
summary: Short description shown in blog list (keep under 200 chars)
readTime: Estimated reading time in minutes (just the number)
category: Blog category (e.g., "Development", "Tutorial", "Technology")
author: Your name

Step 3: Write Your Content

After the frontmatter, write your blog post using standard Markdown:

# Main Heading

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

## Subheading

- Bullet point 1
- Bullet point 2
- Bullet point 3

### Code Example

\`\`\`javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}
\`\`\`

[Link to external site](https://example.com)

> This is a blockquote
> It can span multiple lines

🎨 Supported Markdown Features

Text Formatting

Bold: **bold text** or __bold text__
Italic: *italic text* or _italic text_
Bold & Italic: ***text***
Inline code: `code`
~~Strikethrough~~: ~~strikethrough~~

Headings

# H1 Heading
## H2 Heading
### H3 Heading
#### H4 Heading

Lists

Unordered:

- Item 1
- Item 2
  - Nested item 2.1
  - Nested item 2.2

Ordered:

1. First item
2. Second item
3. Third item

Code Blocks

```javascript
// Your code here
const example = "Hello World";
```

Supported languages: javascript, typescript, python, bash, css, html, json

Links & Images

[Link text](https://example.com)

![Alt text](/path/to/image.jpg)

Blockquotes

> This is a blockquote.
> It can have multiple lines.

Tables

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Data 1   | Data 2   | Data 3   |
| Data 4   | Data 5   | Data 6   |

🌐 Multi-Language Support

To create a blog post in both English and German:

Create the English version in /content/blog/en/my-post.md
Create the German version in /content/blog/de/mein-beitrag.md
Use the same slug in both frontmatter blocks
Translate all content including frontmatter

Example:

English (/content/blog/en/web-tips.md):

---
title: "10 Web Development Tips"
slug: "web-development-tips"
date: "2024-12-20"
summary: "Essential tips for modern web developers"
readTime: "7"
category: "Development"
author: "Leon Richter"
---
# Content in English...

German (/content/blog/de/web-tips.md):

---
title: "10 Webentwicklungs-Tipps"
slug: "web-development-tips"
date: "2024-12-20"
summary: "Wesentliche Tipps für moderne Webentwickler"
readTime: "7"
category: "Entwicklung"
author: "Leon Richter"
---
# Inhalt auf Deutsch...

✅ Best Practices

Descriptive Slugs: Use clear, SEO-friendly slugs
Accurate Read Time: Estimate 200-250 words per minute
Engaging Summary: Write compelling summaries to attract readers
Proper Formatting: Use headings, lists, and code blocks for readability
Recent Dates: Use actual publication dates
Consistent Author: Keep author name consistent across posts

🚀 How The System Works

File Discovery: The system scans /content/blog/{locale}/ for .md files
Frontmatter Parsing: YAML frontmatter is extracted using gray-matter
Markdown Rendering: Markdown content is converted to HTML using remark
Automatic Sorting: Posts are automatically sorted by date (newest first)
Dynamic Routes: Each post gets its own URL: /[locale]/blog/[slug]

🔧 Troubleshooting

Problem: Post doesn't appear on the blog page

Solutions:

Check that the file is in the correct language folder
Verify frontmatter is properly formatted (between ---)
Ensure the file has a .md extension
Check that the slug matches the filename (without .md)
Rebuild the project: pnpm build

Problem: Formatting looks broken

Solutions:

Ensure proper markdown syntax
Check that code blocks use triple backticks
Verify all frontmatter fields are present
Make sure there's a blank line after frontmatter (---)

📚 Example Complete Blog Post

Here's a complete example you can copy and modify:

---
title: "Getting Started with Next.js 15"
slug: "getting-started-nextjs-15"
date: "2024-12-20"
summary: "Learn the fundamentals of Next.js 15 and build your first application with the latest features and best practices."
readTime: "8"
category: "Tutorial"
author: "Leon Richter"
---

# Getting Started with Next.js 15

Next.js 15 brings exciting new features that make building web applications even better. In this tutorial, we'll explore the key concepts.

## What is Next.js?

Next.js is a powerful React framework that provides:

- **Server-Side Rendering (SSR)**
- **Static Site Generation (SSG)**
- **API Routes**
- **Built-in Optimization**

## Installation

First, create a new Next.js project:

\`\`\`bash
npx create-next-app@latest my-app
cd my-app
pnpm dev
\`\`\`

## Your First Component

Create a simple component in \`app/page.tsx\`:

\`\`\`typescript
export default function Home() {
  return (
    <main>
      <h1>Welcome to Next.js 15!</h1>
      <p>This is your first component.</p>
    </main>
  );
}
\`\`\`

## Next Steps

Now that you know the basics, try:

1. Creating more pages
2. Adding styles with Tailwind CSS
3. Implementing API routes
4. Deploying to Vercel

Happy coding! 🚀

🎯 Quick Reference

Action	Location	Command
Add English post	`/content/blog/en/`	Create `*.md` file
Add German post	`/content/blog/de/`	Create `*.md` file
Rebuild site	Root directory	`pnpm build`
Test locally	Root directory	`pnpm dev`

That's it! You now know how to create and manage markdown blog posts in this Next.js project. Happy blogging! ✨