🍪 Your Privacy Matters

We use cookies to enhance your experience. Essential cookies are required for the site to work. You can customize your preferences for analytics and marketing cookies.

CodeDD Logo
Book a demo

Blog Posts README

How to Add a New Blog Post

How to Add a New Blog Post

1. Create a Markdown File

Create a new file in this directory with the naming convention: blog_XXX.md (e.g., blog_005.md)

2. Add Frontmatter (Optional but Recommended)

Start your markdown file with YAML frontmatter to specify metadata:

---
date: 2024-03-14
author: CodeDD Team
featured: true
image: /path/to/cover-image.jpg
---

# Your Blog Post Title

## Your Subtitle

Your content here...

Available Frontmatter Fields:

  • date (recommended): Publication date in YYYY-MM-DD format. If not provided, file modification date will be used.
  • author (optional): Author name. Default: "CodeDD"
  • featured (optional): Set to true to feature this post. Default: false
  • title (optional): Override the title extracted from the first # heading
  • description (optional): Override the subtitle extracted from the first ## heading
  • image (optional): Path to cover image. Can also be set in blogPosts.js

3. Write Your Content

Use standard markdown formatting:

# Main Title (H1)

## Subtitle (H2)

### Section Heading (H3)

Regular paragraph text.

- Bullet point
- Another bullet point

**Bold text** and *italic text*

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

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

4. Build Process

When you run npm run build, the following happens automatically:

  1. Pre-build: The generate-blog-routes.js script runs and:

    • Scans all .md files in this directory
    • Extracts titles and slugs
    • Generates routes for react-snap pre-rendering
    • Updates sitemap.xml with blog post URLs

  2. Build: React app is built with all blog posts

  3. Post-build: react-snap pre-renders all blog pages for SEO

5. No Additional Configuration Needed

The blog system automatically:

  • Generates URL-friendly slugs from titles
  • Creates routes in your React app
  • Updates the sitemap.xml
  • Pre-renders pages for search engines
  • Adds structured data (JSON-LD) for SEO
  • Sets canonical URLs

Example Blog Post Structure

---
date: 2024-06-15
author: John Doe
featured: false
---

# **Your Awesome Blog Post Title**

## **An engaging subtitle that summarizes the post**

### Introduction

Your introduction paragraph here...

### Main Section

More content here...

## Conclusion

Wrap up your post...

### FAQ

#### Question 1?

Answer here...

SEO Best Practices

  1. Use descriptive titles: Make your H1 heading clear and descriptive
  2. Write compelling subtitles: The H2 will be used as the meta description
  3. Add dates: Always include a date in frontmatter for accurate timestamps
  4. Use alt text: Add descriptive alt text to all images
  5. Internal linking: Link to other relevant blog posts when appropriate
  6. Keep URLs clean: Titles should be concise to generate clean URL slugs

Metadata Configuration

For additional metadata not in frontmatter, you can edit blogPosts.js:

export const blogMetadata = {
  'blog_005': {
    coverImage: '/images/blog/awesome-post.jpg',
    featured: true,
  }
};

Frontmatter takes precedence over blogPosts.js metadata.

Testing Your Blog Post Locally

  1. Run npm start to start the development server
  2. Navigate to /blog to see your post in the list
  3. Click on your post to view it
  4. Check that all metadata is correct in browser dev tools:
    • View Page Source to see meta tags
    • Look for JSON-LD structured data in the <head>

Production Deployment

Before deploying:

  1. Run npm run build to ensure everything compiles
  2. Check build/sitemap.xml to verify your post is included
  3. Verify pre-rendered HTML includes your content (check build/blog/your-slug/index.html)

Common Issues

Q: My blog post isn't showing up

  • Ensure the file ends with .md
  • Check that it has a valid H1 heading (# Title)
  • Run npm run build to regenerate routes

Q: The date is wrong

  • Add date: YYYY-MM-DD to frontmatter
  • Dates from frontmatter override file modification dates

Q: SEO not working

  • Verify react-snap is running in postbuild
  • Check that your title and subtitle are extracting correctly
  • Use "View Page Source" (not inspect element) to see what search engines see