DEV Community

Cover image for Thiago Colen's Digital Universe: Building a Content-Synced Portfolio with Gatsby & DEV.to
Thiago Colen
Thiago Colen

Posted on • Originally published at thiagocolen.github.io

Thiago Colen's Digital Universe: Building a Content-Synced Portfolio with Gatsby & DEV.to

#gatsby #devto #jamstack #react

1. The Hook & "Why" (Introduction)

The Problem: Keeping a personal portfolio updated with the latest technical articles often leads to duplicated effort and fragmented content. Maintaining a custom CMS or a local database can be overkill for a simple blog.

The Solution: By leveraging the DEV.to API, I've integrated my Gatsby-based portfolio directly with my developer community profile. This allows me to publish on DEV.to and have it automatically appear on my personal site, ensuring a single source of truth and a seamless content management experience.

Official Resources:

2. Getting Started (Basic Explanation)

Core Concept:
The architecture relies on the JAMstack (JavaScript, APIs, and Markup). During the static site generation process, Gatsby fetches data from the DEV.to API and dynamically creates pages based on that data.

Hello World Example:
A minimal approach to fetching articles from DEV.to in a Gatsby project involves using axios in gatsby-node.js:

const axios = require('axios');

exports.createPages = async ({ actions }) => {
  const { createPage } = actions;
  // Fetch articles from the DEV.to API
  const response = await axios.get('https://dev.to/api/articles/me/published', {
    headers: { 'api-key': process.env.DEV_TO_API_KEY }
  });

  const articles = response.data;

  // Dynamically create a page for each article
  articles.forEach(article => {
    createPage({
      path: `/blog/${article.slug}`,
      component: require.resolve('./src/templates/postPage.js'),
      context: { article }
    });
  });
};
Enter fullscreen mode Exit fullscreen mode

3. Deep Dive (The "Meat")

Under the Hood:
The synchronization happens during the Build Phase. When a build is triggered (e.g., via a GitHub Action or a manual trigger), Gatsby executes gatsby-node.js. It performs authenticated requests to the DEV.to API to retrieve the latest articles. These articles are then injected into the GraphQL data layer, allowing components to query and render them as static HTML.

graph TD
    A[Build Trigger] --> B[Gatsby Node Execution]
    B --> C[Fetch DEV.to API]
    C --> D[Dynamic Page Generation]
    D --> E[Static Site Deployment]
    E --> F[🚀 High Performance Web]
Enter fullscreen mode Exit fullscreen mode

Advanced Patterns:
To handle large volumes of content or to optimize builds, you can implement incremental builds or use gatsby-source-devto (if available/preferred) to manage the data fetching more robustly within the Gatsby ecosystem. In my case, a direct API call provides the most control over the data transformation.

Best Practices:

  • Secure Your Keys: Never commit your DEV_TO_API_KEY to version control. Use environment variables (like .env.development) and secret management in your CI/CD pipeline.
  • Error Handling: Implement robust error handling for API calls to ensure that a failed fetch doesn't break your entire build process.
  • Performance: Since this is a static site, the high performance comes from the fact that no database queries happen at runtime for the user. All content is pre-rendered.

4. Summary & Interaction (Conclusion)

Key Takeaways:
Integrating your personal site with platform APIs like DEV.to creates a powerful, low-maintenance content ecosystem. This approach combines the flexibility of Gatsby with the community reach of DEV.to, allowing you to focus on what matters most: writing great content.

Call to Action:
How are you currently handling your personal blog's content management? Do you prefer a custom CMS, markdown files, or integrating with platforms like DEV.to or Medium? Let me know in the comments, or suggest which related topic I should cover next!

Inspired by the Thiago Colen's Digital Universe repository. 👾

Top comments (0)