How to Use GitHub Actions to Display Dev.to Blog Posts on Your README.md

In this tutorial, you'll learn how to use GitHub Actions to automatically update your GitHub repository's README.md file with the latest blog posts from your Dev.to feed. This automation will help showcase your recent writings directly on your GitHub profile or project page, keeping it dynamically updated.
View Demo

Prerequisites

• A GitHub account
• A Dev.to account and an active blog with an RSS feed
• Basic knowledge of Git and GitHub

Step 1: Identify Your Dev.to Feed URL

Your Dev.to blog's RSS feed URL is typically in the format https://dev.to/feed/username. Replace username with your own Dev.to username.

Step 2: Setting Up Your GitHub Repository

If you haven't already, create a new repository or choose an existing one where you want to display your blog posts.

Step 3: Create a GitHub Actions Workflow

1. Navigate to your repository on GitHub.
2. Click on the Actions tab, then choose New workflow.
3. Start from scratch by selecting "set up a workflow yourself".

Replace the content of the workflow file with the following:

name: Update README with Latest Blog Posts

# Controls when the action will run. 
on:
  schedule:
    - cron: '0 * * * *'  # Runs every hour, can be adjusted to your preference
  push:
    branches:
      - main  # Runs on pushes to the main branch; adjust if your default branch has a different name

jobs:
  update-readme:
    runs-on: ubuntu-latest  # The type of runner that the job will run on

    steps:
    - name: Checkout Repository
      uses: actions/checkout@v3  # Checks out your repository under $GITHUB_WORKSPACE, so your job can access it

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'  # Sets up a specific version of Node.js

    - name: Install dependencies
      run: |
        npm install rss-parser  # Installs the rss-parser package to parse the RSS feed

    - name: Run script to update README
      run: node .github/scripts/update-readme.js  # Executes a Node.js script to update README.md

    - name: Commit changes
      run: |
        git config --local user.email "[e-mail]"
        git config --local user.name "GitHub Action"
        git add README.md
        git commit -m "Update README with latest blog posts" -a || echo "No changes to commit"
        git push

Step 4: Create the Node.js Script

1. In your repository, create a new directory called .github/scripts.
2. Inside this directory, create a file named update-readme.js.
3. Add the following Node.js script to this file:

const fs = require('fs');
const Parser = require('rss-parser');
const parser = new Parser();

(async () => {
  const feed = await parser.parseURL('https://dev.to/feed/yourusername');  // Your Dev.to feed
  let readmeContent = fs.readFileSync('README.md', 'utf8');
  let newBlogContent = '';
  feed.items.slice(0, 5).forEach(item => {
    const formattedDate = new Date(item.pubDate).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
    newBlogContent += `### [${item.title}](${item.link})\n`;
    newBlogContent += `📅 ${formattedDate}\n\n`;  // Adds formatted date with a calendar emoji
  });

  const newReadme = readmeContent.replace(/<!-- BLOG-POST-LIST:START -->.*<!-- BLOG-POST-LIST:END -->/s, `<!-- BLOG-POST-LIST:START -->\n${newBlogContent}<!-- BLOG-POST-LIST:END -->`);
  fs.writeFileSync('README.md', newReadme);
})();

Step 5: Update Your README.md to Include Placeholders

In your README.md, include the following placeholders where you want the blog posts to appear:

<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

Conclusion

Now, every time the GitHub Action runs, it will fetch the latest blog posts from your Dev.to feed, update your README.md accordingly, and commit the changes. This automation enhances your GitHub profile by keeping it fresh and engaging for visitors, showcasing your latest writing without manual updates.