Sync Your Dev.to Blog with Your Portfolio Website in Minutes — No CMS Needed

#devto #portfolio #api #javascript

How I Integrated Dev.to Blog Posts Into My Portfolio Using API

by Inzamam Idrees — Senior Software Engineer

As developers, our portfolios should reflect not only our work but our voice — our blogs, side projects, and thoughts. Recently, I wanted to integrate my Dev.to blog posts directly into my portfolio website to keep it dynamic and up to date without duplicating content.

🎯 Why Integrate Dev.to?

✅ Centralized content management — write once, display everywhere
✅ No need for a CMS
✅ Improve SEO and engagement on both platforms

🔧 Tools & Tech Stack

🔗 Dev.to Public API
⚛️ React.js (works with any JS framework)
🌐 Axios for HTTP requests
💅 Styled-components / CSS Modules

🚀 Step-by-Step: Fetch and Display Your Blog Posts

1. Get Your Dev.to Username

This is the unique handle you use on Dev.to, e.g., @inzamam-idrees.

2. Use the Dev.to Articles API

The endpoint to fetch articles by a user is:

https://dev.to/api/articles?username=YOUR_USERNAME

3. Example Code (React + Axios)


import React, { useEffect, useState } from 'react';
import axios from 'axios';

const DevToPosts = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('https://dev.to/api/articles?username=inzamam-idrees')
      .then(res => setPosts(res.data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div>
      <h2>My Latest Dev.to Posts</h2>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <a href={post.url} target="_blank" rel="noopener noreferrer">
              {post.title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default DevToPosts;

4. Style & Integrate

You can display them as a card grid or slider depending on your design.

📦 Bonus: Cache API for Performance

Use a backend cache or even static generation (e.g., Next.js + ISR) to avoid API rate limits and boost performance.

📌 Final Thoughts

This integration was quick but impactful — now my portfolio updates in real-time as I publish new posts. It's a great example of how small automation can make a big difference in your personal brand.

🔗 Live Demo: https://inzamamidrees.netlify.app

Let me know if you’ve tried this or want help integrating it in your stack!