Skip to content

[GitHub] Use "GitHub Readme Stats" to Show the Project Information on Your README

Last Updated on 2021-10-23 by Clay

If you want to make some changes to your personal page in GitHub, you can create a repository with the same name as account and add README.md to the repository. The README file will be show the top of the personal page.

So we can make some interesting features and even beautify our Overview page.

What I want to introduce today is such an interesting open source project: GitHub Readme Stats.

The project can display our GitHub statistics and proportion of languages we used in project.

In addition, there are many more detailed settings, such as whether the statistical information include private repositories... etc. Please refer to the original project README linked above.

In below, I simply record how to display the statistics on the personal overview page.


What should we do?

Step 1: Create a new repository with the account name

Create a new repository.


Use username to name the repository. You can see a green hint as follows: You found a secret!


The repository README.md content will be reflected at the top of our overview page.



Step 2 Fork "GitHub Readme Stats" project

fork GitHub Readme Stats project, and edit the README.md file.

You need to paste the following code in README.md file, the USERNAME need to be changed to your account name.

[![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=USERNAME&theme=gruvbox)](https://github.com/USERNAME/github-readme-stats)  
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=USERNAME&layout=compact&theme=gruvbox)](https://github.com/USERNAME/github-readme-stats)


Check if there is indeed an information card in the README as shown below.

This display should be instantly. If it is unsuccessful, you can confirm whether there is any error in the grammar above.




Step 3: Add an information card to the README.md in the personal repository with the same name

Of course, the above steps cannot beautify our GitHub overview page. We need to edit README.md in the repository of the same name again.

Paste the same syntax and save:

[![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=USERNAME&theme=gruvbox)](https://github.com/USERNAME/github-readme-stats)  
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=USERNAME&layout=compact&theme=gruvbox)](https://github.com/USERNAME/github-readme-stats)


Here is an experience to share: I paste the code in the repository README.md file, but the information card has not appeared in a short time. After some time, refresh the page and the information card will appear.


References


Read More

Tags:

Leave a Reply