Create Awesome Git readMe Profile
--
This story focusses on new addition about customising your git with fancy badges, connect with me icons, dynamically include your blogs sourcing from the parent website, include your youtube channel videos and update changes, your git stats, your git recent activity and you could include the song that you are listening in spotify. Awesome isn’t it? Let’s go over how to do it.
Please find snapshot of my git profile currently
As a first step all you have to do is create a repository with your username. As my username is ereshzealous. I have created the repo with that name.
It automatically showed the repo as Git profile.
Next go ahead and create ReadMe profile, and you could see new icons popping up in the readme as it is special repository which is created as your username. Git recognizes it and so it will add few features to it out of the box.
Where to source badges?
I have got the badges from https://github.com/alexandresanlim/Badges4-README.md-Profile. Alex has collated all the awesome badges sourced from https://shields.io/.
Please go over badges and select the one which is relevant to you and use img tag in mark down to include icon.
For Ex:
[<img align="left" alt="medium" src="https://img.shields.io/badge/medium-%2312100E.svg?&style=for-the-badge&logo=medium&logoColor=white" />][blog]blog is website definition in read file, just a place holder for all the urls that I have used.
[blog]: https://eresh-zealous.medium.com/
Where to source icons?
There are multiple sources to include icons, I have used to icons to showcase my technical skills. I simply searched in git hub search bar in all repositories section. It opens a snippet use that snippet.
Right click on image select open image on new tab. It will open the full image in another tab. As we did for badges, include the url in markdown image tag.
For Ex :
[<img align="left" alt="Java" width="30px" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/java/java.png" />][blog]How to source blog posts up to date dynamically in git?
To do this we have to setup github workflow, runs periodically to get the latest blogs from the source and update in the read me profile.
The blogpost workflow is contributed by Gautham krishna here is the link https://github.com/gautamkrishnar/blog-post-workflow. It also has pretty good documentation how to set it up. Please explore options that were there in the blog post. But I will explain how to do it.
Create directory “.github” in the root directory. create “workflows” folder inside that. I have created a file by name blog-posts-workflow.yml file. The work flow file is yml file.
Here in the above yml the cron job runs every Sunday midnight which triggers action ins Gautham repo and sources data from my medium blog.
Note: Here the feed_list has to be actual feed not the profile url. In medium.com to get any feed url please see here
Navigate to Actions tab in git hub repo. You could see all your workflow. As soon as it is created, it executes and gets all blog feeds from medium. Now we have to add place holder in readMe file to capture these blogs.
### 📕 Latest Blog Posts
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->With the above addition if any new blogs are published in medium.com under my user id, the work flow triggers every Sunday midnight and updates the blog post updates here.
Currently these are my recent blog posts
Note: By default the Gautham’s Action returns most recent 5 posts. But there are lot of custom options. Please explore as per your use case.
How to source Youtube Channel Videos up to date dynamically in git?
In the similar way we did for blog posts, the youtube channel also we need to create work flow and get the youtube channel feed and display in the readMe file (most recent videos top 5) dynamically. Personally I didn’t had any you tube channel setup. I am planning to but not right now. But I will post the yml file and how to include in readMe file.
The only difference with blogpost and youtube workflow is we have commen_tag_name specified. This is an option in repo that Gautham created. This enables us to add video urls under a tag with YOUTUBE as a tag. Please see below. Similarly in above blog post case I can use comment tag as “MEDIUM”
<!-- YOUTUBE:START -->
<!-- YOUTUBE:END -->How to add your git readMe stats in your profile?
To add readMe stats in your profile please use Anurag’s https://github.com/anuraghazra/github-readme-stats. It is pretty straight forward to add a one liner in readMe file.
<img align="left" alt="Eresh's GitHub Stats" src="https://<--Your vercel instance for stats-->/api?username=ereshzealous&show_icons=true&hide_border=true" />The highlighted one’s is my vercel instance. Yes we need our own instance of Anurag’s repo to make it work seemless.
To set up vercel instance:
- Fork the above repository in to your’s.
- Go to vercel site. Signup if you don’t have account yet.
- Click on import project, provide the forked repo url. It will import in to Vercel. Keep the default settings as it is.
- Here, select Environment variable, we have to set one variable ie., your git access token. Before this you have to create personal access token in github. Please create one and have it saved locally.
- Click deploy, it will take a minute to deploy and creates domains for this instance.
- We can create our own domain, I am using the domain that is created by vercel.
Please do not use my domain name
- That’s all you can replace domain name in above code snippet with actual one and you can see the git stats like below. You can explore multiple options like themes and other custom options from the repo.
How to include the song that currently playing in your spotify in git profile ?
Again to do this it also does need to follow similar approach like git activity. I have used https://github.com/novatorem/novatorem (Andrew Novac) repo.
Please fork the repository and open SetUp.md file in the repo. The documentation is pretty good in the repo. It should set it up Spotify currently playing song for you.
For this we have to create spotify application which is dev instance for our git readMe it generates few access tokens. Please keep them handy.
These access tokens are required to set up vercel instance as environment variables as we did earlier.
After setting up vercel instance add one liner in your readMe
[](https://open.spotify.com/user/<spotify-username>)Again it also has few other options, please explore as per your convenience.
My git profile looks like this
Additional Information
I created the readMe file on my own, but there are few generators that help you in creating profile for you by providing few inputs.
We can use multiple github actions to create an awesome git profile. For ex : Weekly development break down, recent github activities, twitter integration, linkedin integration etc..
References
