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