Create a personalized GitHub homepage that will impress others!

Take a look at mine first
Making the home page

How to build your own personalized GitHub homepage?

  • Start by creating a repository with the same username as your own GitHub account. For example, my GitHub account ispudongping, my GitHub address is:https://github/pudongpingSo I need to create a namepudongpingIf you are correct, a green box will appear that tells you that you are creating a GitHub Profile, as shown in the image below.

Note that the access to the repository must be set to
publicTo create the repository, you can check the box
Add a README fileOr you can leave it unchecked and create it yourself
README.mdFile, if checked, is the default
README.mdThe file will have the following code: 

### Hi there 👋 <! -- **pudongping/pudongping** is a ✨ _special_ repository because its readme.md (this file) appears on your GitHub Profile. Here are some ideas to get you started: - 🔭 I'm currently working on... - 🌱 I'm currently learning... - 👯 I'm looking to geal on... - 🤔 I'm looking for help with... -💬 Ask me about... - 📫 How to reach me:... - 😄 Pronouns:... -⚡ Fun fact:... -->

You can visit your own GitHub homepage and see your personalized GitHub profile. It’s as simple as that ✌️

Next, talk about personalized customization, build morecoolThe making of the profile

Weekly Code Statistics

If you need a weekly code count, you can go to the Wakatime site, log in with GitHub authorization, get the key to Wakatime, and then go to the Waka-Readme plugin page and set it according to the documentation.

Code statistics need to be run
GitHub Action, if you don’t know how to use it
GitHub Action, then you can refer to Ruan Yifeng’s
Introduction to GitHub ActionsI’m going to use what I got above
wakatimeThe key.

The display effect is as follows:

Week: 19 June, 2021 - 25 June, 2021 Markdown 1 hr 38 mins █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ▓ ░ ░ ░ ░ ░ 79.03% CSS 17 mins █ █ █ ▓ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ 14.17% YAML 7 mins █ ▒ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ ░ by 05.74%

Here is a screenshot of how to use it: Wakatime

Go to Wakatime and sign up for an account using GitHub

Use GitHub authorization to log in directly

Visit https://wakatime.com/settings… Get the key for Wakatime

Set the Wakatime Secret you just got on GitHub, and notice that the name of the key is set to WAKATIME_API_KEY

Then create a. Github /workflows/waka-time.yml file under your repository and fill in the corresponding configuration information, which can be found in the sample waka-time repository.

At this point, after modifying the configuration information, we will push the code to GitHub, and then click Action to see the workflow. We can find the Waka Readme workflow, and we can manually execute it by clicking the Run Workflow button

After the execution is complete, we can see the execution logging

At this point, we can go back to our GitHub home page and view the results of the code statistics. We can see the contents in the red box (there is no statistics at this time, we can download the corresponding Wakatime plug-in for our code editor, if you don’t know how to download the plug-in, you can click here).

Wakatime is a useful tool for measuring code activity not only in the code editor, but also in other applications such as WPS Office, Chrome, etc. I have a few editors including WebStorm and PhpStorm

Other fun and useful customizations

  • Show making Stats
  • Show contribution statistics for the most recent month
  • Badge Making Tool
  • Weird English Generator – Generates good-looking English fonts, support copy and paste

other

  • If you like my GitHub profile you can clone the code later and customize it yourself.
  • It’s not easy to make. I get a lot of content step by step from the search engine. For example, I open the background color of the badge and get the background color from various official websites. If you like it, please give it a Star. Wow!
  • The original address