How to Use GitHub Actions to Display Dev.to Blog Posts on Your README.md
Published: 2024-05-27 15:55:10

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](https://github.com/arafat-web/arafat-web)

![screenshot of Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfxm7g5o58cj1tfby2va.png)


### 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:

```yaml
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 "action@github.com"
        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:

```javascript
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:

```markdown
<!-- 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.