Showcase Blog Posts Automatically on GitHub Profile
Websitevice
Website examples for design inspiration dedicated to creators focused on results rather than awards.
Today I want to show you how to create a list of your latest articles in your GitHub profile. Automatically, of course. Just set it up once, and the list will be constantly updated.
Let’s get started!
For this purpose I will use one of the existing GitHub Actions called “blog-post-workflow”. It is free to use and easy to set up.
I have set up this on my GitHub profile. and here’s how it looks like:
As you can see, I have 3 instances there, listing the latest articles, the latest newsletter issues, and the latest YouTube videos.
Until the end of this tutorial, you’ll learn how to ad them to your profile page as well.
You can showcase your Hashnode/WordPress/Medium/Dev.to posts, YouTube videos, Substack posts, StackOverflow feed, etc.
Step one: Add the script
In your profile repository, create a folder named .github. Inside this folder we need to add another one named workflows This is the folder which holds all your actions’ workflows. We need to add a configuration file (.yml) in this folder, which you can call whatever you like. Let’s call it blog-post-workflow.yml . The contents should look like this:
name: Latest blog post workflow
on:
schedule: # Run workflow automatically
- cron: '0 * * * *' # Runs every hour, on the hour
workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the Github Actions Workflow page directly
jobs:
update-readme-with-blog:
name: Update this repo's README with latest blog posts
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: gautamkrishnar/blog-post-workflow@master
with:
feed_list: "https://markodenic.com/feed/" # Change the URL to match your blog feed
Step two: Add the location comment
Next step is to add the comment that specifies the position of the list in your repository (profile page). Here’s how this should look like:
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->
Step three: Run the action
This action is run automatically every hour. We can run it manually just this time, so we don’t have to wait for one hour.
After the action runs, the list of the latest posts will be generated between location comments.
You will see something like this in your repository:
<!-- BLOG-POST-LIST:START -->
- [CSS Pulse Animation](https://markodenic.com/css-pulse-animation/)
- [Install Mistral AI on Linux](https://markodenic.com/install-mistral-ai-on-linux/)
- [Install Deepseek on Linux](https://markodenic.com/install-deepseek-on-linux/)
- [Git Cheat Sheet](https://markodenic.com/git-cheat-sheet/)
- [Best Websites To Get HTML/CSS Templates](https://markodenic.com/best-websites-to-get-html-css-templates/)
<!-- BLOG-POST-LIST:END -->
So, what if we want to add multiple sections, with different content?
In that case, it is necessary to add a new file for every new integration. There is only one difference from the workflow I shared before. We have to specify the location comments in the configuration file.
Let’s add one more action to list the latest newsletter issues as well. We’ll name this file newsletter-workflow.yml.
Like this:
name: Latest newsletter issues workflow
on:
schedule: # Run workflow automatically
- cron: '0 * * * *' # Runs every hour, on the hour
workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the Github Actions Workflow page directly
jobs:
update-readme-with-blog:
name: Update this repo's README with latest newsletter issues
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: gautamkrishnar/blog-post-workflow@master
with:
comment_tag_name: "NEWSLETTER-ISSUES-LIST" # This is a new line. Here we specify the location comments. You can name them whatever you like
feed_list: "https://markodenic.tech/feed/" # Here we put the newsletter feed link.
Again, we have to add the location comments in the repository. Comments should be the same as specified in the configuration file:
<!-- NEWSLETTER-ISSUES-LIST:START -->
<!-- NEWSLETTER-ISSUES-LIST:END -->
This will fetch the latest issues from the feed link and generate a list:
<!-- NEWSLETTER-ISSUES-LIST:START -->
- [CSS Pulse Animation](https://markodenic.tech/css-pulse-animation/)
- [9 Most Powerful CSS One-Liners](https://markodenic.tech/9-most-powerful-css-one-liners/)
- [From zero to Web Developer](https://markodenic.tech/from-zero-to-web-developer/)
<!-- NEWSLETTER-ISSUES-LIST:END -->
And that’s it! You can add as many as you like.
Quick Recap:
1. Add a configuration file
2. Add a comment
3. Run the action
You can see all this in action on my GitHub profile. There you can find the code, the actions and the result. See you there.
Please send me your GitHub profiles if you implement this, I’d love to see them.
P.S. If you run into any issues, feel free to contact me and we will figure it out.
Thanks for reading!
See you next Saturday.