How To Show Latest Hashnode Blog Posts In Github Profile Readme?

Subscribe to my newsletter and never miss my upcoming articles

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

https://s2.do-spaces.com/2020/Nov/05/1604579158-16.jpg

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

Bhanu Teja Pachipulusu's photo

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"

blog-post-workflow.yml

This works based on rss feed and you can add as many feeds as you want in this.

Show +1 replies
Bhanu Teja Pachipulusu's photo

Your action seems to also have layouts for showing blog posts. The one I mentioned doesn't have that.

Roger Colque Calcina's photo

Nice, was difficult but made it.

Jesse Wood's photo

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.

Varun Sridharan's photo

Thanks for checking out this action :-)

Waiting to try out your action :-)

Sudhir Dontha's photo

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!

Show +2 replies
Varun Sridharan's photo

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

Sudhir Dontha's photo

Honestly, I really appreciate the effort in taking time and responding or commenting here to inform me!!

Thanks a lot for informing!!Varun Sridharan

Usman Sabuwala's photo

WoW! I just added it using this action! I did not know I could also do that! Thank you so much Varun! πŸ’™

Dany Tulumidis's photo

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!

Show +3 replies
Varun Sridharan's photo

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.

Dany Tulumidis's photo

Yes it worked, many thanks!Varun Sridharan

Sai Laasya Vabilisetty's photo

It's awesome! Tyring it right now.😍

Show +1 replies
Varun Sridharan's photo

Sai Laasya Vabilisetty

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.

Surjith S M's photo

Awesome!