In this post, I will share how to customize your GitHub profile page, and you can find the end result here.

GitHub allows us to show README content on top of our profile page: https://github.com/{user_name}.

Create a special repo

#

First, we need to create a special repo that has the same name as our user name. For example, my GitHub name is jdhao, so the new repo name will be jdhao.

Create a README

#

In the new repo, add a file named README.md. All content inside this file will be rendered and displayed on your profile.

Customization

#

Show latest blog post

#

We can use this blog-post-workflow GitHub action to update the README with the latest post from our blog site.

First, edit the README.md and add the following section:

# Latest blog posts

<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

Then in the personal repo https://github.com/jdhao/jdhao, create folder .github/workflows. In this folder, add blog-post-workflow.yml:

name: Latest blog post workflow
on:
  schedule: # Run workflow automatically
    - cron: '30 23 * * *' # Runs every day on 23:30
  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the Github Actions Workflow page directly

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Pull in my blog posts
        uses: gautamkrishnar/blog-post-workflow@master
        with:
          feed_list: "https://jdhao.github.io/index.xml"

This action will be run periodically (every day on 23:30). Check here for the GitHub action cron syntax.

Note the feed link for feed_list field should be replaced with your own blog feed.

Push the changes to your personal repo. To trigger the action manually, go to Actions, click the workflow, and then click Run workflow.

This action will update your README automatically.

Show GitHub stats

#

With the help of project github-readme-stats, we can display our GitHub stats easily:

<p align="center">
<img src="https://github-readme-stats.vercel.app/api?username=jdhao&show_icons=true&count_private=true&theme=solarized-light&hide_border=true" width="600">
</p>

The result is:

Show GitHub streak stats

#

The project github-readme-streak-stats can help to show your contributions and streak stats.

<img alt="jdhao's GitHub Streak" src="https://github-readme-streak-stats.herokuapp.com?user=jdhao&theme=solarized-light&hide_border=true" width="60%">

The result is like this:

Show Stack Overflow stats

#

With the help of project stackoverflow-card, we can easily create a card for our Stack Overflow account:

[![jdhao's stackoverflow profile](https://stackoverflow-card.vercel.app/?userID=6064933&theme=solarized-light)](https://stackoverflow.com/users/6064933/jdhao)

The result is like this:

Show profile view stats

#

The project github-profile-views-counter will help you count the number of visitors to your profile page. Add a link like this to your profile README:

<img src="https://gpvc.arturio.dev/jdhao" alt="Profile views"/>

The result is like this:

References

#

• https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/about-your-profile
• Create GitHub profile: https://www.youtube.com/watch?v=ECuqb5Tv9qI
• https://aboutmonica.com/blog/how-to-create-a-github-profile-readme/
• collections of Markdown badges:
  • https://github.com/Ileriayo/markdown-badges
  • https://github.com/progfay/shields-with-icon
  • https://github.com/alexandresanlim/Badges4-README.md-Profile
  • https://home.aveek.io/GitHub-Profile-Badges/