DEV Community

Cover image for How I Built a Unified Blog Aggregator with HTML, CSS, and JavaScript
John Liter
John Liter

Posted on

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" } ]
Enter fullscreen mode Exit fullscreen mode

✅ 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); }
Enter fullscreen mode Exit fullscreen mode

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'; }); }
Enter fullscreen mode Exit fullscreen mode

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%); }
Enter fullscreen mode Exit fullscreen mode

💡 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!

Top comments (0)