DEV Community

Cover image for How to show recent GitHub activities on your profile readme
Sachin Chaurasiya
Sachin Chaurasiya

Posted on • Originally published at blog.sachinchaurasiya.dev

How to show recent GitHub activities on your profile readme

#github #git #webdev #opensource

We all know Github is a great platform to collaborate with people and contribute to open source projects. daily, we do perform some activities on GitHub like creating an issue, creating a pull request, code review and all other things.

These are the activities that get added to our contributions and we get a green square for each day with our contributions counts.

For Example, contribution count graph like this,

image.png

When we click on any box we will get activities of that day something like this.

image.png

Here you can see my activities of date 10th October 2021, I created some commits and opened some issues.

Have you ever thought of showing your GitHub activities on your Profile Readme?

You will be thinking like is that even possible? yes, it is possible and today in this article, we will be discussing how to show our recent GitHub activities on our profile readme.

Let's get started.

We will be going to use Github Actions that will help us to create a workflow to show our recent activities on Profile readme.

before jumping into the setup let's first discuss what are GitHub actions and what they are used for.

What are GitHub actions?

GitHub actions are a set of events and workflow, whenever specified events happen to your GitHub repository it will run the associated workflow for it.

want to learn more about Github actions, you can get started from here

GitHub - Activity - Readme

GitHub - Activity - Readme is a Github action that will update your profile readme with recent GitHub activity.

It is created by James George you can check his profile here

to work with this action we will need to set up a workflow that will be running automatically to update the profile readme with recent activities.

Setting up workflow

we can easily set up this workflow in our profile repository to capture and update profile readme with recent activities.

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

> mkdir .github
Enter fullscreen mode Exit fullscreen mode

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

>mkdir .github/workflows
Enter fullscreen mode Exit fullscreen mode

Create the {workflowname}.yml file inside workflows folder.

where you can replace workflow name with your workflow name. I will give the name update-readme.yml.

> update-readme.yml
Enter fullscreen mode Exit fullscreen mode

after creating a workflow file add this content to it.

name: Update README

on:
  schedule:
    - cron: "*/5 * * * *" # Runs every 5 minutes.

jobs:
  build:
    runs-on: ubuntu-latest
    name: Update this repo's README with recent activity

    steps:
      - uses: actions/checkout@v2
      - uses: jamesgeorge007/github-activity-readme@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          COMMIT_MSG: "Updated README with recent activity"
          MAX_LINES: 10
Enter fullscreen mode Exit fullscreen mode

Here we have three main components of the workflow

  1. name
  2. on
  3. jobs

Let's discuss them one by one

  • name is the name of the workflow after workflow run If you see the actions tab in your repository you will get workflow runs like this.

image.png

  • on is used for defining what action you want to run this workflow.

here we are running this workflow on schedule using a cron job to run this workflow every 5 minutes automatically.

If you don't know much about cron syntax this may be helpful for you
The quick and simple editor for cron schedule expressions

  • jobs is used for defining what to do when an event happens on our repository.

here we are defining only one job that is build which will commit on our repository with the message Update this repo's README with recent activity.

for jobs, we will need to define what environment it will be running and we are running this job on ubuntu.

also, we will need to define what steps to use, something like this

      - uses: actions/checkout@v2
      - uses: jamesgeorge007/github-activity-readme@master
Enter fullscreen mode Exit fullscreen mode

env is used for automatic token authentication.
you don't need to worry about secrets.GITHUB_TOKEN will automatically get referred from your GitHub account.

env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Enter fullscreen mode Exit fullscreen mode

if you notice we are using the with attribute for 2nd action that is jamesgeorge007/github-activity-readme@master

here we are providing 2 options COMMIT_MSG and MAX_LINES.

  • COMMIT_MSG - Commit message used while committing to the repository.
  • MAX_LINES - The most number of lines should populate in your readme file

Now, I hope we are clear with all the components of a workflow.

The Last step is to add this content to your profile README.md file. 

# Recent Activity :zap:
<!--START_SECTION:activity-->
<!--END_SECTION:activity-->
Enter fullscreen mode Exit fullscreen mode

Think of it like a block that will get replaced by your recent activities.

For Example :

# Recent Activity :zap:

<!--START_SECTION:activity-->
1. 🎉 Merged PR [#2197](https://github.com/open-metadata/OpenMetadata/pull/2197) in [open-metadata/OpenMetadata](https://github.com/open-metadata/OpenMetadata)
2. ❗️ Closed issue [#2040](https://github.com/open-metadata/OpenMetadata/issues/2040) in [open-metadata/OpenMetadata](https://github.com/open-metadata/OpenMetadata)
3. ❗️ Closed issue [#2028](https://github.com/open-metadata/OpenMetadata/issues/2028) in [open-metadata/OpenMetadata](https://github.com/open-metadata/OpenMetadata)
4. ❗️ Closed issue [#2156](https://github.com/open-metadata/OpenMetadata/issues/2156) in [open-metadata/OpenMetadata](https://github.com/open-metadata/OpenMetadata)
5. 🗣 Commented on [#2156](https://github.com/open-metadata/OpenMetadata/issues/2156) in [open-metadata/OpenMetadata](https://github.com/open-metadata/OpenMetadata)
6. 🎉 Merged PR [#2154](https://github.com/open-metadata/OpenMetadata/pull/2154) in [open-metadata/OpenMetadata](https://github.com/open-metadata/OpenMetadata)
7. ❗️ Closed issue [#2087](https://github.com/open-metadata/OpenMetadata/issues/2087) in [open-metadata/OpenMetadata](https://github.com/open-metadata/OpenMetadata)
8. ❗️ Opened issue [#2156](https://github.com/open-metadata/OpenMetadata/issues/2156) in [open-metadata/OpenMetadata](https://github.com/open-metadata/OpenMetadata)
9. ❗️ Opened issue [#2147](https://github.com/open-metadata/OpenMetadata/issues/2147) in [open-metadata/OpenMetadata](https://github.com/open-metadata/OpenMetadata)
10. ❗️ Closed issue [#1876](https://github.com/open-metadata/OpenMetadata/issues/1876) in [open-metadata/OpenMetadata](https://github.com/open-metadata/OpenMetadata)
<!--END_SECTION:activity-->
Enter fullscreen mode Exit fullscreen mode

Example of my profile readme with recent activities

image.png

Summary

  • we discussed what are github actions and why they are used for.
  • we did set up the workflow to update our profile readme with recent activities.

Links

And that’s it for this topic. Thank you for reading.

Connect with me

LinkedIn | Twitter

Buy Me A Coffee

Top comments (2)

Collapse
 
abhijoshi2k profile image
ABHISHEK Joshi •

Hello. I'm one of the authors of github.com/Readme-Workflows/recent... .
The repository you mentioned is no longer maintained. We have created a new workflow which is more customizable. Have a look. Thanks.

Collapse
 
sachinchaurasiya profile image
Sachin Chaurasiya •

Thanks for reading. surely will check it out.

Read next

charan_sajjanapu profile image

Evolution of Web Tech and Browsers

Charan Sajjanapu -

akpvt profile image

CMS: Payload CMS

akpvt -

sammybarasa profile image

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory on Digital OceanDroplet

Sammy Barasa -

suzuki0430 profile image

Avoiding Connection Pinning in Lambda and RDS Proxy with NestJS and Proxy Splitting

Atsushi Suzuki -