Skip to main content

Automatic Blog Updates on Homepage

Overview​

The homepage now automatically displays the latest 3 blog posts without requiring manual updates to the code. This is achieved by dynamically fetching blog data from the Docusaurus blog plugin at build time.

How It Works​

Before (Manual Updates Required)​

  • Blog posts were hardcoded in src/components/BlogShowcase/index.js
  • Each new blog post required manually adding entries to both English and Thai lists
  • Homepage showed outdated posts if not manually updated
  • Required code changes and redeployment for every new blog post

After (Automatic Updates)​

  • BlogShowcase component uses usePluginData('docusaurus-plugin-content-blog')
  • Automatically fetches all blog posts from the blog plugin
  • Sorts by date (newest first) and displays top 3
  • Updates automatically when you add new blog posts to /blog directory
  • No code changes needed - just add blog posts as usual

Technical Implementation​

Build-Time Generation​

The system uses a build-time approach instead of runtime hooks:

  1. Script (scripts/generate-latest-blogs.js):

    • Runs automatically before every build (via prebuild npm script)
    • Scans blog directories for markdown files
    • Parses frontmatter using gray-matter
    • Sorts by date and takes top 3 posts per locale
    • Generates static/latest-blogs.json

  2. Component (src/components/BlogShowcase/index.js):

    • Imports the generated JSON file
    • Reads posts based on current locale
    • Renders posts statically

Key Files​

scripts/generate-latest-blogs.js:

const matter = require('gray-matter');

function getBlogPosts(blogDir) {
  // Scan blog directory
  // Parse each index.md file
  // Extract frontmatter metadata
  // Return array of posts
}

// Generate latest-blogs.json with top 3 posts per locale

src/components/BlogShowcase/index.js:

import latestBlogsData from '@site/static/latest-blogs.json';

export default function BlogShowcase() {
  const {i18n: {currentLocale}} = useDocusaurusContext();
  const recentPosts = latestBlogsData[currentLocale] || latestBlogsData.en;

  return (
    <section>
      {recentPosts.map(post => <BlogPost {...post} />)}
    </section>
  );
}

Generated Data Structure​

The latest-blogs.json file contains:

{
  "en": [
    {
      "title": "Post Title",
      "slug": "post-slug",
      "date": "2025-10-17T00:00:00.000Z",
      "formattedDate": "October 17, 2025",
      "description": "Post description",
      "tags": ["ai", "tech"],
      "image": "./featured-image.png",
      "permalink": "/blog/post-slug"
    }
  ],
  "th": [...]
}

How to Add New Blog Posts​

Simply create blog posts as usual:

  1. Create blog post file:

    # English version
    blog/YYYY-MM-DD-post-slug/index.md

    # Thai version
    i18n/th/docusaurus-plugin-content-blog/YYYY-MM-DD-post-slug/index.md

  2. Write front matter:

    ---
    slug: post-slug
    title: Your Post Title
    authors: [kobkrit]
    tags: [ai, tech]
    date: 2025-10-17
    description: Brief description
    image: ./featured-image.png
    ---

  3. Build and deploy:

    npm run build
    # or
    docker-compose up -d --build

  4. Homepage automatically updates with your new post!

Language Support​

The component respects the current locale:

  • Shows English posts when viewing English site
  • Shows Thai posts when viewing Thai site (/th)
  • Both versions share the same automatic update mechanism

Benefits​

✅ No manual code updates needed for new blog posts ✅ Always shows latest content automatically ✅ Consistent data between blog page and homepage ✅ Reduced maintenance burden ✅ Faster content publishing workflow ✅ No risk of forgetting to update homepage

Troubleshooting​

Homepage shows old posts​

  1. Rebuild the site: npm run build or docker-compose up -d --build
  2. Check blog post dates are in correct format: YYYY-MM-DD
  3. Verify blog posts are in correct directories

No posts showing​

  1. Check console for errors: console.warn('Could not load blog data:', error)
  2. Verify Docusaurus blog plugin is properly configured in docusaurus.config.js
  3. Ensure blog posts have required front matter fields

Wrong posts showing​

  1. Check post date field in front matter
  2. Verify sorting is working (newest first)
  3. Clear build cache: rm -rf .docusaurus build

Future Enhancements​

Possible improvements:

  • Add filtering by tags (e.g., show only "featured" posts)
  • Implement pagination or "load more" functionality
  • Add featured image thumbnails
  • Cache blog data for performance
  • Add custom sorting options (by views, comments, etc.)

Build Process​

  1. Developer adds blog post to /blog/ or /i18n/th/docusaurus-plugin-content-blog/
  2. Run build: npm run build or docker-compose up -d --build
  3. Prebuild script runs: scripts/generate-latest-blogs.js executes automatically
  4. JSON generated: static/latest-blogs.json created with latest 3 posts
  5. Docusaurus builds: Component imports JSON and renders posts
  6. Result: Homepage shows latest blog posts
  • /scripts/generate-latest-blogs.js - Blog post scanner and JSON generator
  • /static/latest-blogs.json - Generated file with latest posts (auto-generated)
  • /src/components/BlogShowcase/index.js - Main component
  • /src/components/BlogShowcase/styles.module.css - Styling
  • /src/pages/index.js - Homepage that uses BlogShowcase
  • /blog/ - English blog posts directory
  • /i18n/th/docusaurus-plugin-content-blog/ - Thai blog posts directory
  • /package.json - Contains prebuild script configuration

References​