Preface: Hello, I am tree sauce. Let’s talk about the origin of this article. One day when I was in Shuiquan, I saw the homepage of a big guy’s Github account. Instead of looking at the tree jam Github homepage, it is simply “humble room”, it is hard to enter the eye! Many developers, like me, do not participate in open source on Github and do nothing more than fork and Star, so they don’t bother to take care of it. In fact, github homepage is also another way to present our business card. A better presentation can leave a good impression on her

1 prepare

Create a repository on Github with the same name as your Github account and create a readme.md. To start your custom Github homepage,SHOW TIME!

2. The display surface

Above is an example of the developer’s Github display, which basically displays the developer’s own Github information. How to implement this? GitHub Readme Stats essentially combines the GitHub Readme Stats API to enable your Readme to retrieve dynamically generated GitHub statistics

2.1 GitHub Stats card

The display area in the image above can be solved with just one line of code!

[![tree's GitHub stats](https://github-readme-stats.vercel.app/api?username=littleTreeme&
hide=contribs,prs&show_icons=true&theme=radical)](https://github.com/anuraghazra/github-readme-stats)
Copy the code

It just needs to be configured

  • username: Match your Github account name (most important)
  • hide: Indicates the data to be masked, such as PRS
  • show_icons: Indicates whether to display a chart
  • theme: Theme selection
  • include_all_commits– Counting total submissions instead of just this year’s submissions(boolean)

Github -readme-stats

2.2 Be good at language cards

The display area in the figure above is also implemented by the API provided by GitHub Readme Stats

One line of code!

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/an uraghazra/github-readme-stats)Copy the code

2.3 Github focuses on active charts

The graph above shows a graph of Github’s concerns, implemented by the GIthub-readme-activity-graph API

One line of code! As mentioned above, username is also required to be configured

[![Ashutosh's github activity graph](https://activity-graph.herokuapp.com/graph?username=Ashutosh00710&theme=dracula)](https://github.com/ashutosh0071 0/github-readme-activity-graph)Copy the code

2.4 badge shields

It’s common to see badges like the one above on Github projects, but what about this one? It is the shields

How do you make it online? Still want to teach hand in hand, look at yourself to link

  • Static display of badges

! [](https://img.shields.io/badge/-Nodejs-43853d? style=flat-square&logo=Node.js&logoColor=white) ! [](https://img.shields.io/badge/-WebRTC-008000? style=flat-square&logo=WebRTC&labelColor=90EE90&color=fff) ! [](https://img.shields.io/badge/-JavaScript-e5cd0c? style=flat-square&logo=JavaScript&labelColor=f7df1e&logoColor=000) ! [](https://img.shields.io/badge/-Vue.js-29beb0? style=flat-square&logo=vue.js&labelColor=ffffff&color=4FC08D) ! [](https://img.shields.io/badge/-React-29beb0? style=flat-square&logo=React&labelColor=ffffff&color=61DAFB)Copy the code
  • Data statistics type badge

NPM download statistics:

Total downloads: img.shields. IO/NPM /dt/{project name… IO/NPM /dm/{project name… Week downloads: img.shields. IO/NPM/dW /{project name…

For example, total downloads of the AXIos request library

Other badge tools recommended: badgen.net/

2.5 Dynamic Traffic badge

  • visitor-badge

Page view badge will be refreshed, automatically add one operation. One line of code! The premise is that you confirm your page_id

! [](https://visitor-badge.glitch.me/badge? page_id=littleTreeme)Copy the code

Visitor – Badge. Glitch. Me /#docs)

  • Antzuhl two-dimensional display volume

Quadratic friends can also try to use this counter, quadratic wind a line of code to fix!

! [](http://antzuhl.cn:4000/get/@littleTreeme)Copy the code

2.6 the Git EMOJi

Wouldn’t it look better to use emoji ICONS as git message submissions? Using emoji at the same time makes it easy to identify the purpose or intent of the submission

And a chart represents a submission style, as well as associated unified documentation

Reading: gitmoji | git emoji guide to submit information

Previous popular articles 📖 :

  • These Node open Source tools are worth owning
  • Developing visual Data Screens from 0 to 1 (PART 1)
  • Developing visual data Screens from 0 to 1 (part 2)
  • Construction of front-end Knowledge System of Tree Jam (PART 1)
  • Construction of front-end Knowledge System of Tree Jam (Part 2)
  • Talk about daily collaboration tools for front-end development
  • Babel configuration is stupid
  • How to better manage the Api
  • The interviewer asks you about Node
  • Front-end engineering stuff
  • Did you learn BFF and Serverless
  • Front-end operations and deployment

Hello, I am 🌲 tree sauce, please drink a cup 🍵 remember three lian oh ~

1. Remember to click a thumbs-up after reading oh, there is 👍 motivation

2. Pay attention to the interesting things at the front of the public account, and chat with you about the interesting things at the front

3. Github frontendThings thanks to Star✨