Display Your Latest Hashnode Blogs on Your GitHub Profile: A Step-by-Step Guide

Hey 👋 there!

As developers, we're always looking to expand our online presence and share our knowledge with others. From tips and tricks to in-depth guides, we use platforms like Hashnode, Dev Community, and Medium to reach a wider audience. Personally, I like to post my content as a blog on Hashnode to increase my visibility.

But then I had a thought - what if I could show my latest content on my GitHub profile? It would be amazing if visitors could discover my latest blog posts while browsing my profile. So, I went on a hunt to find out how to display my Hashnode blogs on my GitHub profile. Exciting stuff!

I found solutions (GitHub Actions) that we will be discussing in this article. So let's first discuss about GitHub actions & how It can help us.

What is GitHub actions?

GitHub Actions is a CI/CD (Continuous Integration/Continuous Deployment) platform that enables developers to automate their software development workflows.

GitHub Actions is a powerful automation and workflow tool offered by GitHub that allows developers to automate various tasks and processes. Actions enable developers to create custom workflows for building, testing and deploying code directly within GitHub's platform.

What are those Workflows?

Workflows can be triggered by a variety of events as I describe in diagram, such as pushing code to a repository, creating a pull request, or manually triggering the workflow. Once a workflow is triggered, the jobs are executed in parallel or sequentially, depending on how the workflow is configured.

Without Github actions you have to personally go to the GitHub profile and add your blog post and design and describe it. And this is a very frustrating process to do.

So that's why we need GitHub actions to Automate these Workflows for Developers and end users

• -> Automation of repetitive tasks

• -> Continuous integration

• -> Collaboration

• -> Flexibility

• -> Scalability

So Let's jump in and finished our task to automate hashnode blogs to display on the GitHub profile.

Prerequisites 😄

• A GitHub account

• A Hashnode account

• A little bit of passion

Let's automate it 👍

Using this workflow(blog-post-workflow) to automate the process of displaying the latest blog posts from Hashnode on our GitHub profile, we can set up a workflow in our profile repository. This workflow can be configured to fetch the latest blog posts using the RSS feed and display them on our GitHub profile automatically.

Setup our workflow

Setting up the workflow involves defining the steps and jobs required to retrieve the RSS feed, extract the latest blog posts, and display them on our profile.

Step-1. Create the .github folder in your profile repository if it does not exist.

> mkdir .github

Step-2.Create the workflows folder inside the .githubfolder if it does not exist.

>mkdir .github/workflows

After creating .github and workflows folders inside your <username> repository you have to click on Actions

or simple you can go at Actions & click on setup workflow yourself and it can create you this sets of folders like ..

Step-3.Create the {workflowname}.yml file inside the workflows folder.

where you can replace the workflow name with your workflow name. I will give a hashnode.yml.

touch hashnode.yml

After creating a workflow file add this content to hashnode.yml file.

name: "📚 latest Blog"

on:
  workflow_dispatch:
  schedule:
    - cron:  "0 * * * *" # Runs every hour, on the hour

jobs:
  update_blogs:
    name: "Update With Latest Blogs"
    runs-on: ubuntu-latest
    steps:
      - name: "📥  Fetching Repository Contents"
        uses: actions/checkout@main

      - name: "📚  Hashnode Updater"
        uses: "varunsridharan/action-hashnode-blog@1.1.1"
        with:
          USERNAME: "rahulblg" # Hashnode Username
          COUNT: 4 # MAX Visisble
          STYLE: "blog-left"
          BLOG_URL: "https://rahulprasad.hashnode.dev/"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Let's discuss about this yaml file ,

• name: The name of the workflow, in this case "📚 latest Blog", after workflow run If you see the actions tab in your repository you will get workflow runs like this.

  

• on: The events that trigger the workflow, in this case, manual triggering and a cron job that runs every hour.

• jobs: The set of jobs that make up the workflow.

• update_blogs: The name of the job that updates the blog posts.

• runs-on: The type of machine that the job runs on, in this case, "ubuntu-latest".

• steps: The sequence of steps that make up the job.

• actions/checkout: A step that checks out the repository.

• varunsridharan/action-hashnode-blog: A step that fetches the latest Hashnode blog posts and displays them on the GitHub profile.

• USERNAME: The Hashnode username.

• COUNT: The maximum number of blog posts to display.

• STYLE: The style of the blog post display.

• BLOG_URL: The URL of the Hashnode blog.

• env: The environment variables, in this case, the GitHub token required for authentication.

Overall, this workflow is a convenient way to display the latest Hashnode blog posts on a GitHub profile, making it easy for readers to stay up-to-date with the latest content.

Step-4.Last but not least add this content to your profile README.md file.

# Latest Blogs
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

We're Almost Done!

To test the result, open up the "Actions" tab and run the workflow manually only this time. To do that, select the action we just created from the left-hand side and click the "Run workflow" drop-down. Finally, press the "Run workflow" green button.

Great work!

You have completed all the necessary tasks to set up the workflow for displaying your latest Hashnode blogs on your GitHub profile. As a result, you can now enjoy the cool and stylish view of your latest blogs on your profile like this 👇

Conclusion ✍️

In summary,

• we learned about GitHub Actions and how to set up workflows to automate tasks in our repositories.

• We also discuss Hashnode Blog actions which we can show the latest blogs on our GitHub profile.

Share your experience and your views on the comment section.

Finally, Cheers to your success!🥳 and a big Thank you for your attention! ❤️

I hope you now understood what is GitHub Actions and how it is useful, If you have any further doubts related to it make sure to reach out on Twitter, Linkedin and GitHub.