Github Beautification Diary - Love Playing with Vegetables

Github Beautification Diary - Both Clumsy and Playful#

Let's Just Say#

Whether you are a tech expert or a novice, everyone hopes to have a beautiful GitHub homepage! (Quick, say what you want!)

Then Let's Get Started!#

All Mysteries Come from a Special Repository#

The repository name in the image above (Repository name) matches your username (mine is codeacg), and a black cat appears! Then, if the repository is public (accessible to everyone), check Add a README file, and checking this option when creating the repository will add a README.md file where all our operations will be written. Next, scroll down the page and click Create repository.

Then it will look like this:

Open This Repository and Start Creating!#

Click on the red box in the image above, the one below!

After opening, click Edit README to edit this README.md file, as shown in the image below.

Cute Counter#

Just look at it, and say what you want, and that's it.

Moe-Counter: A cute counter with various styles to choose from. Each time Moe-counter is refreshed, the displayed number will +1, achieving the counting purpose.

How to Use:

Use the resources of the experts

If this website is still available, please continue.

After opening this website, in the Tool section at the bottom, you can see a link: https://count.getloli.com/get/@:name?theme=asoul, you can use this link directly. Here, :name is the ID of the counter, and using different names will generate different counters. The asoul at the end is the theme appearance of the counter. Moe-counter has various styles to choose from; clicking asoul will bring up a selection box to choose other themes, and clicking Get will allow you to preview the effect.

I used the rule34 theme because it moves.

Click Commit changes, and then you can see it on your homepage, happy, right?

Self-built

Please refer to the usage manual written in the expert's repository.

Snake Game#

github-contribution-grid-snake

This is not a simple snake game; it updates automatically!

Configure Action#

Click Action
Click Configure to configure the yml file

Rename, change the code, click start commit, then click commit new file.

name: Generate Snake

on:
  schedule:
    - cron: "0 0 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/[email protected]

      - name: Generate Snake
        uses: Platane/snk@master
        id: snake-gif
        with:
          github_user_name: ${{ github.repository_owner }}
          gif_out_path: ./assets/github-contribution-grid-snake.gif
          svg_out_path: ./assets/github-contribution-grid-snake.svg

      - name: Push to GitHub
        uses: EndBug/[email protected]
        with:
          branch: main
          message: 'Generate Contribution Snake'

Introduce snake

![](https://raw.githubusercontent.com/codeacg/codeacg/main/assets/github-contribution-grid-snake.svg)

Another CDN link is faster for domestic access

![snake](https://cdn.jsdelivr.net/gh/codeacg/codeacg@main/assets/github-contribution-grid-snake.svg)

Modify Actions to read repository permissions
Run workflow
Check if successful

Demo Effect.

Readme Typing SVG (Typewriter)#

Just look at it, and say what you want, and that's it.

⌨️ Readme Typing SVG: A great typewriter effect tool.

How to Use:

Just open your mouth; this is the expert's website.

Copy the Markdown code and place it here:

Click Commit changes, and then you can see it on your homepage, happy, right?

This is mine:

![](https://readme-typing-svg.demolab.com/?font=Fira+Code&pause=100&width=450&lines=System.out.println(%22Hello%2C%20World%22)%3B;)

Shields.io (Little Badges)#

Don't say anything, just do it!

Shields.io: A service that provides clean, consistent, and easy-to-read badges in SVG and raster formats, which can be easily included in GitHub README files or any other web pages.

How to Use (There are two ways):

Static Badges

A simple example is: , this request can render a badge like this.

https://img.shields.io/badge/codeacg-喵酱-E89AAA

Customizing badges is very convenient; the most basic syntax rule is:

https://img.shields.io/badge/{left_part_label}-{right_part_label}-{right_part_hex_color}

Dynamic Badges

You can refer to this article from the minority here. Then use the expert's website "Badge Generator"

GitHub Readme Stats (GitHub Stats Cards)#

Just look at the picture!

GitHub Readme Stats: Get dynamically generated GitHub statistics in your README.

How to Use:

Just copy this line of code into your markdown file, it's that simple!

Change the value of ?username= to your GitHub username.

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

Here is mine:

[![喵酱's Github Stats](https://github-readme-stats.vercel.app/api?username=codeacg&theme=calm&show_icons=true)](https://github.com/anuraghazra/github-readme-stats)

[![喵酱's Github Stats](https://github-readme-stats.vercel.app/api/top-langs/?username=codeacg&theme=calm&langs_count=6&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

Effect 1 Effect 2 and so on.

Metrics (GitHub Statistics Charts)#

Metrics: Generate statistics icons that can be embedded anywhere, including your GitHub profile README! Supports users, organizations, and even repositories!

There are many ways to play; interested students can delve deeper.

How to Use:

The expert's website Metrics, after opening the website, enter your username on the left, there are many options to choose from on the left, and you can also change templates, etc., then click the markdown button on the right, and copy the code.

Then paste the copied code into our README.md file.

![](https://metrics.lecoq.io/codeacg?template=classic&config.timezone=Asia%2FBeiJing)

Effect Demo.

GitHub Profile Trophy (GitHub Trophies)#

GitHub Profile Trophy: GitHub profile trophies, dynamically generated GitHub Stat Trophies added to your README.md file.

How to Use:

Add the following code to your README file. When pasting the code into your profile's README file, change the value after ?username= to your GitHub username.

[![trophy](https://github-profile-trophy.vercel.app/?username=codeacg)](https://github.com/ryo-ma/github-profile-trophy)

Effect Demo

visitor-badge (Count Visitors)#

visitor-badge: Count the number of visitors to README.md, issues, and PRs on GitHub.

How to Use:

page_id is required; please use a unique string to best represent your page. Just like the cute counter above.

![visitors](https://visitor-badge.glitch.me/badge?page_id=codeacg=green&right_color=red)

Effect Demo.

Github Readme Activity Graph (GitHub Activity Statistics Chart)#

Github Readme Activity Graph: Dynamically generated activity graphs showing your GitHub activity over the past 31 days.

How to Use:

Just paste the following URL into your profile README, and you can get started.

[![喵酱's github activity graph](https://github-readme-activity-graph.cyclic.app/graph?username=codeacg)

Effect Demo.

Github Readme Streak Stats (GitHub Streak)#

Github Readme Streak Stats: Displays your total contributions, current streak, and the longest streak recorded in your GitHub profile README file.

How to Use:

Copy and paste the markdown below into your GitHub profile README, replacing the value after ?user= with your GitHub username.

[![GitHub Streak](https://streak-stats.demolab.com/?user=codeacg)](https://git.io/streak-stats)

Effect Demo.

stats-cards (Website Data Cards)#

stats-cards: Display website data in README, which can also be used for website status monitoring.

Supported websites include: Zhihu, Bilibili, Leetcode, Juejin, Niuke, CSDN, GitHub, etc.

How to Use:

Just like above...

![](https://stats.justsong.cn/api/github?id=codeacg)

Effect Demo.

Other Experts#

Black Heart Century Egg