3 Steps to Improve Your GitHub Overview Page

Add dynamically generating GitHub stats

Shinichi Okada
Aug 12 · 3 min read
Image for post
Image for post
My Github Overview Page. (Image by the author)

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.

  1. Create a new repository. The repository name needs to be the same as your GitHub account name.
    e.g. https://github.com/shinokada/shinokada
  2. Create a README.md file 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.

This repository houses all of the community-curated content for GitHub Topics and Collections. (Image by the author)

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

Image for post
Image for post
Stats Card Example. (Image by the author)

The Stats Card shows total stars, commits, PR, issues, and contributions.

For example, you can copy and paste the following code.

// README.md
![Github stats](https://github-readme-stats.vercel.app/api?username=yourusername&theme=highcontrast&show_icons=true&count_private=true)

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.

Image for post
Image for post
Option details. (Image by the author)

Top Language Card

This card shows your repos’ language stats.

// README.md
![Top Languages Card](https://github-readme-stats.vercel.app/api/top-langs/?username=shinokada)
Image for post
Image for post
Top Language Stats example. (Image by the author)

You can use &layout=compact to change the card design.

![Top Languages Card](https://github-readme-stats.vercel.app/api/top-langs/?username=shinokada&layout=compact)
Image for post
Image for post
Top Language Stats compact layout. (Image by the author)

You can use the hide option to hide languages.

![Top Languages Card](https://github-readme-stats.vercel.app/api/top-langs/?username=shinokada&hide=javascript,html)

Extra Pin

You can use extra pins to show your repositories.

Your description in About will be displayed on the card.

Image for post
Image for post
Update your Github About.
[![Repo name](https://github-readme-stats.vercel.app/api/pin/?username=yourusename&repo=repo-name)](https://github.com/yourusername/repo-name)

Use the show_owner variable to include the repo owner’s username.

[![Repo name](https://github-readme-stats.vercel.app/api/pin/?username=yourusename&repo=repo-name&show_owner=true)](https://github.com/yourusername/repo-name)
Image for post
Image for post
Extra Pin example. (Image by the author)

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.


If you like my article and would like to receive an occasional newsletter, please sign up here.


The following resources were used to compile this post:

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store