How to Add Your Recently Published Articles to Your GitHub Profile README using GitHub Actions πŸ€–

Featured on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

Do you want to show off your articles on GitHub? 🀭

If you said YES, Then you're at the right place. By the end of this article, you'll have your latest articles listed on your GitHub Profile README.

πŸ“Œ TL;DR - Before we begin, You must have your GitHub account and make sure you've created your GitHub profile. If not, you can check this article by Monica Powell.

πŸƒπŸΌLet's Begin!!!

πŸ’‘ If you're new to GitHub Actions, go check out the official documentation.

We'll be using blog-post-workflow GitHub Action by Gautam krishna R.

πŸ€” How to use this GitHub Action?

  1. Visit your GitHub Profile README repository

    https://github.com/{USER-NAME}/{USER-NAME}
    
  2. You'll need to add the following section to your README.md file

    # πŸ“© Latest Blog Posts // You can name it whatever you want.
    <!-- BLOG-POST-LIST:START -->
    <!-- BLOG-POST-LIST:END -->
    
  3. Now, create a folder .github in the root directory & within that directory create another folder named workflows. Now, inside the workflows directory create a new YAML file blog-post-workflow.yml. This is how your folder structure should look like:

    .github 
       └───workflows
               blog-post-workflow.yml
    

    NOTE: If you're struggling in creating a folder in the GitHub repository from a web app then check this .

  4. Add the following content in the blog-post-workflow.yml file

    name: Latest blog post workflow
    on:
     schedule: # Run workflow automatically
       # This will make it run every hour
       - cron: '0 * * * *' 
      # Run workflow manually (without waiting for the cron to be called), through the Github Actions Workflow page directly
     workflow_dispatch: 
    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:
             # Replace this URL with your rss feed URL/s
             feed_list: "https://iamdarshshah.hashnode.dev/rss.xml"
    
  5. Commit your code and wait for your actions to run automatically or here are the steps to trigger it manually:

    • Click on Actions: Capture.PNG

    • Now, Click on Latest blog post workflow: Capture-1.PNG

    • Then, click on Run workflow to trigger the GitHub Action: Capture-3.PNG

NOTE: You can add any popular blogging platform's RSS feed URL. (List of Platforms)

This is it! We did it. πŸŽ‰

Now, you can check your GitHub Profile README that lists your latest published articles. 🎊

πŸ‘€This is How it should look

cover image

βš™οΈ If you want to customize your GitHub Action, then have a look at all available options you can provide custom values to.

Thanks, for reading it till the end. πŸ™


Hope you find it useful! Let me know your thoughts on this in the comments section. Don't forget to share this article with your friends or colleagues. Feel free to connect with me on any of the platforms below! πŸš€

Twitter | LinkedIn | GitHub


References:

Maxi Contieri's photo

great tutorial !!!!

Show +1 replies
Maxi Contieri's photo

Darsh Shah

Would you kindly add this to step 3 clarification for GitHub web users ?

Thanks again !

PS: BTW it looks amazing !!!!!!!!

Darsh Shah's photo

Thanks, Maxi Contieri for pointing it out! Sure, will update the post by adding this to the list.

Your GitHub profile looks super amazing 😍

Syed Fazle Rahman's photo

Great work, Darsh Shah. Thanks for writing this.

Darsh Shah's photo

Thanks Syed Fazle Rahman, I appreciate it πŸ˜„

Sandeep Panda's photo

Hey Darsh! Super interesting. Thanks for writing this piece!

Darsh Shah's photo

Thank you Sandeep Panda. I’m glad you found this article interesting!πŸ˜„

Jome Favourite's photo

Thanks for sharing this article, I've been able to add my blog post to my Github readme

Braydon Coyer's photo

Excellent article - thanks for sharing!

Yogesh Chavan's photo

Really useful. Thanks for sharing πŸ‘

Darsh Shah's photo

I’m glad you found it useful! πŸ˜„

Tapas Adhikary's photo

Darsh Shah, Awesome! Thanks for creating this and writing about it.

Darsh Shah's photo

Hey Tapas Adhikary, Just in-case you missed it, the GitHub Action which we're using here is blog-post-workflow created by Gautam Krishna R. I just articulated that!πŸ˜ƒ

I'm glad you found it helpful! πŸ˜„

Shantun Parmar's photo

That's the one which i am looking , Awesome article , you made my way easy , Thanks to post

Darsh Shah's photo

That's great, Shantun Parmar. Glad you found this useful!

Zvinodashe Mupambirei's photo

Really useful, amazing thank you

Darsh Shah's photo

Thanks Zvinodashe Mupambirei. I’m glad you found it useful! πŸ˜„

Mikey San's photo

Thanks alot for this post. I have just used it now and it feels good.

ps. Rergarding adding a folder to the repository, you can actually do it a very simple way.

When you type in the name of your file: in this case .github/workflow/<name.yml>

You can actually do this by typing: ".github/". As soon as you add the "/" it will be converted to a folder, so you can now type "workflow/" and finally the name of the yml file.

Darsh Shah's photo

Awesome, Mikey San. Thanks for providing a gist about it. Appreciate that πŸ˜ƒ

David's photo

Thanks for sharing this Darsh Shah. It is resourceful.

Darsh Shah's photo

My pleasure David, glad you find it helpful!

Peter Thaleikis's photo

Awesome project Darsh Shah! Thanks for building and sharing this!

PaweΕ‚ Kowalski's photo

Works great! Thank you!

image.png

Darsh Shah's photo

Awesome, This looks super cool 😍

Roger Colque Calcina's photo

Nice, but doesnt show my last post πŸ˜₯

my blog: blogdevtrip.hashnode.dev

my github: github.com/rogergcc

name: Latest blog post workflow main yml
on:
  schedule:
    # Runs every hour
    - cron: '0 * * * *'

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts yml
    runs-on: Ubuntu-20.04
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          feed_list: "https://blogdevtrip.hashnode.dev/rss.xml"
Darsh Shah's photo

Hey Roger Colque Calcina, Looks like there are some issues with the GitHub action as it's not fetching the complete list of articles from the RSS feed (Even for me this was not working as expected).

Workaround: I have replaced the RSS feed URL with the dev.to feed URL.

Will take out some time to open an issue or even can open an issue for the same.

Thanks