You have 2 free member-only stories left this month.
3 Steps to Improve Your GitHub Overview Page
Add dynamically generating GitHub stats
In this article, you will learn how to improve your GitHub overview page by adding your own content and dynamically generated GitHub stats.
Let’s get started.
- Create a new repository. The repository name needs to be the same as your GitHub account name.
e.g. https://github.com/shinokada/shinokada - Create a
README.mdfile in this repo.
The contents of this file will be on your GitHub overview page.
You can use markdown to add headers, images, links, tables, emoji, and lists.
You can find many programming language icons from the GitHub explore repo. All the icons are under the topic folder.
3. Add GitHub Stats Cards.
Github Readme Stats dynamically generate GitHub stats about your repositories.
There are three kinds of stats cards.
- Stats Card
- Top Language Card
- Extra Pin
Stats Card
The Stats Card shows total stars, commits, PR, issues, and contributions.
For example, you can copy and paste the following code.
// README.md
You need to change the ?username=yourusername to your GitHub username, e.g ?username=shinokada.
You can set one of the themes in &theme=.
You can count your private commits by &count_private=true.
You can use any options in this table.
Top Language Card
This card shows your repos’ language stats.
// README.md
You can use &layout=compact to change the card design.
You can use the hide option to hide languages.
Extra Pin
You can use extra pins to show your repositories.
Your description in About will be displayed on the card.
[](https://github.com/yourusername/repo-name)Use the show_owner variable to include the repo owner’s username.
[](https://github.com/yourusername/repo-name)
Here is my README.md file.
I hope you can use the above codes for your GitHub overview page. It is easy to apply this to get an overview of your GitHub stats.
Newsletter
References
The following resources were used to compile this post:
