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
- Navigate to your repository on GitHub.
- Click on the Actions tab, then choose New workflow.
- 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 "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
- In your repository, create a new directory called
.github/scripts. - Inside this directory, create a file named
update-readme.js. - 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.
Top comments (0)