How To Show Latest Hashnode Blog Posts In Github Profile Readme?
Hi There,
I recently decided to start my own blog using Hashnode. after setting up the blog I found out that there is no GitHub action which can update my Github Profile Readme with the latest posts I write here.
So I decided to jump into work and started to create a GitHub action that can do the job.
π Github Action For Hashnode Blogs π
Using this action you will be able to display the latest posts from your account to your Github Profile Readme or Update it in a Github Gist which can be pinned to your profile later & it can render the latest posts data in multiple styles.
Setting up with Github Profile Readme
I assume that you already have created your Github Profile Readme
Step 1 :
Add the below content to your README.md
file in Github Profile
## My Latest Blog Posts π
<!-- HASHNODE_BLOG:START -->
<!-- HASHNODE_BLOG:END -->
Step 2 :
Create blog.yml
file inside of .github/workflows/
folder in your Github Profile Readme repository
name: "π Blog Updater"
on:
workflow_dispatch:
schedule:
- cron: '0 0 * * *' # Runs Every Day
jobs:
update_blogs:
name: "Update Blogs"
runs-on: ubuntu-latest
steps:
- name: "π₯ Fetching Repository Contents"
uses: actions/checkout@main
- name: "π Hashnode Updater"
uses: "varunsridharan/action-hashnode-blog@main"
with:
USERNAME: 'your-username'
COUNT: 10
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
That's it now we have configured the workflow & README.md file. and the workflow is set to run once every day or when manually triggered.
now navigate to the Actions
tab in that repository, select the workflow that we added and click RUN
How To Run Github Workflow Manually
Note
This action can be used with Gist or with any other repository For more information on this action please check the GitHub repository
Full-Stack Developer & Entrepreneur
Nice article.
Even I have setup Github profile to show the latest blog posts from @hashnode. I use a different action.
name: Latest blog post workflow
on:
schedule:
# Runs every hour
- cron: '0 * * * *'
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://blog.bhanuteja.dev/rss.xml"
This works based on rss feed and you can add as many feeds as you want in this.
Your action seems to also have layouts for showing blog posts. The one I mentioned doesn't have that.
WIP: Software Engineer
This is an amazing action Varun Sridharan. Very simple to set up, no hassle. Just plug and play. I look forward to trying to implement my own version of this GitHub Action from scratch.
Software Engineer
Great work! I have tried this and it is amazing! Could you please help me or let me know how to create our own such workflow actions? I'm curious and I would like to have one of my own as you have one. Thank you!
sudhir dontha We have started a Series about GitHub Actions This is a 6 part series that I will post 1 per day. for the next 5 days
#1 What is GitJub Action? blog.svarun.dev/what-is-github-action
Honestly, I really appreciate the effort in taking time and responding or commenting here to inform me!!
Thanks a lot for informing!!Varun Sridharan
Learning web development, running a YouTube channel
WoW! I just added it using this action! I did not know I could also do that! Thank you so much Varun! π
Develop yourself
Really nice! Just one question i configured it and now the blog posts points to danytulumidis.hashnode.dev but my blog is under danysdevcorner.hashnode.dev Do i missed something? Thank you very much in advance!
Bhanu Teja Pachipulusu
Yes, I did the same. some users reported that url was not generating properly. so i decided to BLOG_URL
input as optional where they can override it.
Dany Tulumidis
Please do add BLOG_URL
in your workflow file and run it. it should fix the issue.
Java Developer | Machine Learning| Tech Blogger
It's awesome! Tyring it right now.π
It requires only 2 steps to configure. you can look at my YAML file to get an idea
github.com/varunsridharan/varunsridharan/bl..
But this action dose provide different layouts . which you can find at github.com/varunsridharan/demo-action-hashn..
And each *.md
provides the action code which you can use to get that layout.
Comments (24)