John Liter

Posted on Apr 30

How I Built a Unified Blog Aggregator with HTML, CSS, and JavaScript

#webdev #indieweb #github #frontend

As a retired U.S. Army Staff Sergeant turned tech enthusiast, I write across multiple platforms—WordPress, Dev.to, Hashnode, Daily.dev, and Ko-fi. But managing separate audiences was messy. I wanted one central hub where readers could find all my content.

So, I built a static blog aggregator using only HTML, CSS, and vanilla JavaScript—no frameworks, no backend, just clean code. Here’s how I did it.

🚀 Why I Built This

Problem: My posts were scattered across platforms, making it hard for readers to follow everything.

Goal: A single page that pulls all my content into a searchable, filterable grid.

Constraints:

No reliance on unstable APIs
Easy to update manually
Fast, responsive, and accessible

🛠️ Tech Stack

Frontend: Pure HTML, CSS, JavaScript
Data Management: Manual JSON files (no database)
Hosting: GitHub Pages (free & serverless)

🔧 How It Works

1. JSON-Powered Content Management

Instead of APIs, I store posts in platform-specific JSON files:

// data/devto.json
[
  {
    "title": "My Dev.to Post",
    "excerpt": "How I built this aggregator...",
    "date": "2023-12-01T00:00:00", // UTC format avoids timezone issues
    "image": "https://example.com/cover.jpg",
    "url": "https://dev.to/username/post",
    "source": "devto"
  }
]

✅ Pros

Full control over displayed content
No API rate limits or downtime
Easy to edit (just update JSON)

2. Dynamic Post Loading with JavaScript

The site fetches and renders posts from all JSON files:

async function loadAllPosts() {
  const platforms = ['devto', 'wordpress', 'hashnode'];
  const allPosts = [];

  for (const platform of platforms) {
    const response = await fetch(`data/${platform}.json`);
    const posts = await response.json();
    posts.forEach(post => allPosts.push({ ...post, source: platform }));
  }

  // Sort by date (newest first)
  allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
  displayPosts(allPosts);
}

3. Filtering & Search

Platform filters (WordPress, Dev.to, etc.)
Real-time search (matches titles/excerpts)

function filterPosts(platform) {
  document.querySelectorAll('.post-card').forEach(card => {
    card.style.display = 
      (platform === 'all' || card.classList.contains(platform)) 
        ? 'block' : 'none';
  });
}

4. Futuristic UI Touches

Hexagonal profile image (CSS clip-path)
Particle.js background (for a sci-fi vibe)
Dark theme with accent colors

.hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

💡 Key Challenges & Solutions

❌ Problem: Timezone Mismatches

Cause: new Date("2023-12-01") converts to UTC, which can shift dates backward in some timezones.
Fix: Added T00:00:00 to JSON dates ("2023-12-01T00:00:00") to lock them to UTC.

❌ Problem: No API for Some Platforms

Solution: Manual JSON updates—it's a trade-off for reliability, but ensures full control.

❌ Problem: Mobile Responsiveness

Solution: Used CSS Grid + Flexbox with responsive media queries to handle layouts across devices.

📈 Results

✅ Readers can now browse all my content in one place
✅ No backend costs (hosted on GitHub Pages)
✅ Easy to update—just edit JSON files

🔜 Future Improvements

Add RSS auto-import (for less manual updates)
Dark/light mode toggle
Weekly automated backups

💬 Your Thoughts?

Would you use a system like this?

How do you manage cross-platform content?

Let’s discuss in the comments!

🔗 View Live | GitHub Repo

P.S. If you found this useful, consider supporting me on Ko-fi to keep projects like this coming!

DEV Community