Github自定义个人首页_github主页搭建

GitHub streak（GitHub 连续打卡）

在 README 中展示您连续提交代码的次数，官方文档

<div align="center"> <img src="https://github-readme-streak-stats.herokuapp.com/?user=yang-tian-hub" /> </div>

GitHub Readme Activity Graph（GitHub 活动统计图）

动态生成的活动图，用于显示您过去 31 天的 GitHub 活动，官方文档

<div align="center"> <img src="https://github-readme-activity-graph.vercel.app/graph?username=yang-tian-hub&theme=xcode" /> </div>

添加徽标

相比于纯文字，徽标显得更显眼，并且有助于提炼关键词，避免写一堆口水话。徽标的生成也很简单，在 shields.io 网站上填想要生成的内容就行了。

比如这个代码：

https://img.shields.io/badge/python-3.9-orange

可以生成下面的徽标：

也可以通过接口修改外观：

https://img.shields.io/badge/python-3.9-orange?style=for-the-badge&logo=python&logoColor=orange

首页计数器

这个很容易实现，只需要一个统计资源请求的后台服务即可，有很多第三方的服务可以使用,例如

<div align="center"> <img src="https://visitor-badge.glitch.me/badge?page\_id=yang-tian-hub" /> </div>

[外链图片转存中…(img-RgwoofNm-1725714047953)]

page_id 后面替换为自己的 Github 用户名

<div align="center"> <img src="https://profile-counter.glitch.me/yang-tian-hub/count.svg" /> </div>

将 yang-tian-hub 替换为个人 Github 用户名

这些徽标会实时改变，记录 Github 个人主页被访问的次数

打字特效

Readme Typing SVG，可以生成循环打字的动图,如下：

<div align="center"> <img src="https://readme-typing-svg.herokuapp.com/?lines=今日事，今日毕!;活着就是一个个无可替代的;日子的累积;小杨同学祝您今天愉快!&center=true&font=Roboto&size=27" /></div>

<div align="center"> <a href="https://blog.ytadx.cn/"> <img src="https://readme-typing-svg.herokuapp.com/?lines=今日事，今日毕!;活着就是一个个无可替代的;日子的累积;小杨同学祝您今天愉快!&center=true&size=27"> </a> </div>

全面支持 emoji

下面内容可以直接复制来用，emoji 不是图片，所以可以任意字号展示,这里只是一部分，并不是全部：

😀😃😄😁😆😅🤣😂🙂🙃😉😊😇🥰😍🤩😘😚😙😋😛😜🤪😝🤑🤗🤭🤫🤔🤐🤨😐😑😶😏😒🙄😬🤥😌😔😪🤤😴😷🤒🤕🤢🤮🤧🥵🥶🥴😵🤯🤠🥳😎🤓🧐😕😟🙁☹️😮😯😲😳🥺😦😧😨😰😥😢😭😱😖😣😞😓😩😫🥱😤😡😠🤬

👶🧒👦👧🧑👱👨🧔👨‍🦰👨‍🦱👨‍🦳👨‍🦲👩👩‍🦰🧑👩‍🦱🧑👩‍🦳🧑👩‍🦲🧑👱‍♀️👱‍♂️🧓👴👵🙍🙍‍♂️🙍‍♀️🙎🙎‍♂️🙎‍♀️🙅🙅‍♂️🙅‍♀️🙆🙆‍♂️🙆‍♀️💁💁‍♂️💁‍♀️🙋🙋‍♂️🙋‍♀️🧏🧏‍♂️🧏‍♀️🙇🙇‍♂️🙇‍♀️🤦‍♂️🤦‍♀️🤷‍♀️👨‍⚕️👩‍⚕️👨‍🎓👩‍🎓🧑‍🏫

👋🤚🖐️✋🖖👌🤏✌️🤞🤟🤘🤙👈👉👆🖕👇☝️👍👎✊👊🤛🤜👏🙌👐🤲🤝🙏✍️💅🤳💪

👣👀👁️👄💋👂🦻👃👅🧠🦷🦴💪🦾🦿🦵🦶👓🕶️🥽🥼🦺👔👕👖🧣🧤🧥🧦👗👘🥻🩱🩲🩳👙👚👛👜👝🎒👞👟🥾🥿👠👡🩰👢👑👒🎩🎓🧢⛑️💄💅💍💼🌂☂️💈🛀🛌💥💫💦💨

⬆️➡️⬇️⬅️↩️↪️⤴️⤵️🔃🔄🔙🔚🔛🔜🔝🛐⚛️🕉️✡️️☯️✝️☦️☪️☮️🕎🔯♈♉♊♋♌♍♎♏♐♑♒♓⛎🔀🔁🔂▶️⏩⏭️⏯️◀️⏪⏮️🔼⏫🔽⏬⏸️⏹️⏺️⏏️🎦✖️➕➖➗♾️⁉️❓❔❕❗💱💲⚕️♻️️🔱📛🔰⭕✅☑️✔️❌❎➰➿✳️✴️❇️#️⃣*️⃣0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🅰️🆎🅱️🆑🉐🈚🈲🉑🈸🈴🈳㊗️㊙️🈺🈵🔴🟠🟡🟢🔵🟣🟤⚫⚪🟥🟧🟨🟩🟦🟪🟫⬛⬜◼️◻️◾◽▪️▫️🔶🔷🔸🔹🔺🔻💠🔘🔳🔲🏁🚩🎌🏴🏳️🏳️‍🌈🏳️‍⚧️🏴‍☠️

🙈🙉🙊💥💫💦💨🐵🐒🦍🦧🐶🐕🦮🐕‍🦺🐩🐺🦊🦝🐱🐈🐈‍⬛🦁🐯🐅🐆🐴🐎🦄🦓🦌🐮🐂🐃🐄🐷🐖🐗🐽🐏🐑🐐🐪🐫🦙🦒🐘🦏🦛🐭🐁🐀🐹🐰🐇🐿️🦔🦇🐻🐻‍❄️🐨🐼🦥🦦🦨🦘🦡🐾🦃🐔🐓🐣🐤🐥🐦🐧🕊️🦅🦆🦢🦉🦩🦚🦜🐸🐊🐢🦎🐍🐲🐉🦕🦖🐳🐋🐬🐟🐠🐡🦈🐙🐚🐌🦋🐛🐜🐝🐞🦗🕷️🕸️🦂🦟🦠🦀🦞🦐🦑

💐🌸💮🏵️🌹🥀🌺🌻🌼🌷🌱🌲🌳🌴🌵🌾🌿☘️🍀🍁🍂🍃

🌍🌎🌏🌐🌑🌒🌓🌔🌕🌖🌗🌘🌙🌚🌛🌜☀️🌝🌞⭐🌟🌠☁️⛅⛈️🌤️🌥️🌦️🌧️🌨️🌩️🌪️🌫️🌬️🌈☂️☔⚡❄️☃️⛄☄️🔥💧🌊

🍇🍈🍉🍊🍋🍌🍍🥭🍎🍏🍐🍑🍒🍓🥝🍅🥥🥑🍆🥔🥕🌽🌶️🥒🥬🥦🧄🧅🍄🥜🌰🍞🥐🥖🥨🥯🥞🧇🧀🍖🍗🥩🥓🍔🍟🍕🌭🥪🌮🌯🥙🧆🥚🍳🥘🍲🥣🥗🍿🧈🧂🥫🍱🍘🍙🍚🍛🍜🍝🍠🍢🍣🍤🍥🥮🍡🥟🥠🥡🦪🍦🍧🍨🍩🍪🎂🍰🧁🥧🍫🍬🍭🍮🍯🍼🥛☕🍵🍶🍾🍷🍸🍹🍺🍻🥂🥃🥤🧃🧉🧊🥢🍽️🍴🥄

🧗‍♀️🤺🏇⛷️🏂🏌️🏌️‍♂️🏌️‍♀️🏄🏄‍♂️🏄‍♀️🚣‍♀️🏊‍♀️⛹️⛹️‍♂️⛹️‍♀️🏋️🏋️‍♂️🚴🚵‍♀️🤸🤼‍♀️🤽🤾‍♀️🤹🧘‍♀️🎪🛹🛼🛶🎗️🎟️🎫🎖️🏆🏅🥇🥈🥉⚽⚾🥎🏀🏐🏈🏉🎾🥏🎳🏏🏑🏒🥍🏓🏸🥊🥋🥅⛳⛸️🎣🎽🎿🛷🥌🎯🎱🎮🎰🎲🧩♟️🎭🎨🧵🧶🎼🎤🎧🎷🎸🎹🎺🎻🥁🎬🏹

😈👿👹👺💀☠👻👽👾💣

👣🎠🎡🎢🚣🏔️⛰️🌋🗻🏕️🏖️🏜️🏝️🏞️🏟️🏛️🏗️🏘️🏚️🏠🏡🏢🏣🏤🏥🏦🏨🏩🏪🏫🏬🏭🏯🏰💒🗼🗽⛪🕌🛕🕍⛩🕋⛲⛺🌁🌃🏙️🌄🌅🌆🌇🌉🎠🎡🎢🚂🚃🚄🚅🚆🚇🚈🚉🚊🚝🚞🚋🚌🚍🚎🚐🚑🚒🚓🚔🚕🚖🚗🚘🚙🚚🚛🚜🏎️🏍️🛵🛺🚲🛴🚏🛣️🛤️⛽🚨🚥🚦🚧⚓⛵🚤🛳️⛴️🛥️🚢✈️🛩️🛫🛬🪂💺🚁🚟🚠🚡🛰️🚀🛸🪐🌠🌌⛱️🎆🎇🎑💴💵💶💷🗿🛂🛃🛄🛅🧭

💌💎🔪💈🚪🚽🚿🛁⌛⏳⌚⏰🎈🎉🎊🎎🎏🎐🎀🎁📯📻📱📲☎📞📟📠🔋🔌💻💽💾💿📀🎥📺📷📹📼🔍🔎🔬🔭📡💡🔦🏮📔📕📖📗📘📙📚📓📃📜📄📰📑🔖💰💴💵💶💷💸💳✉📧📨📩📤📥📦📫📪📬📭📮📝📁📂📅📆📇📈📉📊📋📌📍📎📏📐✂🔒🔓🔏🔐🔑🔨🔫🔧🔩🔗💉💊🚬🔮🚩🎌💦💨

💘❤💓💔💕💖💗💙💚💛💜💝💞💟

动态更新

GitHub Actions 是 GitHub 官方推出的持续集成/部署模块服务（CI/CD）。GitHub Actions 自带云环境运行，包括私有仓库也可以享用，只需一个配置文件即可自动开启此服务。

说白了就相当于你白嫖了一个简易的服务器，他提供了一个配置文件，你在配置文件里书写脚本就可以定时的执行某项任务了。

1. 为 GitHub 首页添加贪吃蛇动画

首先在仓库页面点击 Actions 按钮，并新建一个 workflows 工作流，Github 会默认为 Actions 添加配置文件 blank.yml，我们只需要修改这个文件的名字并书写我们自己的脚本即可。

配置如下代码：

#Github Action for generating a contribution graph with a snake eating your contributions.

name: Generate Snake

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

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2.3.4
      
      - 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/add-and-commit@v7.2.1
        with:
          branch: main
          message: 'Generate Contribution Snake'

复制上面的脚本代码并替换yml文件默认内容后，commit

上面的 Github Actions 执行完毕后，会在当前的仓库中添加一个 assets 文件夹，文件夹中有 github-contribution-grid-snake.gif 和 github-contribution-grid-snake.svg 两个文件。我们把 svg 文件引入到我们的 readme.md 文件中即可。（用 MarkDown 和 HTML 语法都行）

<div align="center"><img src="https://cdn.jsdelivr.net/gh/这里更换为你的 GitHub ID/这里更换为你的 GitHub ID/assets/github-contribution-grid-snake.svg" /></div>

现在整个流程大致算是结束了，GitHub 会在每天的零点（UTC 时区，和北京时间 (UTC+8)差了八个小时）执行我们的 Actions，并生成新的贪吃蛇动画图片，如果你熟悉 Github Actions 的流程的话，你可以修改 yml 文件来设置更新频率、文件位置、文件名称、commit 信息等等。

计划任务语法有 5 个字段，中间用空格分隔，每个字段代表一个时间单位。

┌───────────── 分钟 (0 - 59)
│ ┌───────────── 小时 (0 - 23)
│ │ ┌───────────── 日 (1 - 31)
│ │ │ ┌───────────── 月 (1 - 12 或 JAN-DEC)
│ │ │ │ ┌───────────── 星期 (0 - 6 或 SUN-SAT)
│ │ │ │ │
* * * * *

符号	描述	案例
*	任意值	* * * * * 每天每小时每分钟
,	值分隔符	1,3,4,7 * * * * 每小时的 1 3 4 7 分钟
-	范围	1-6 * * * * 每小时的 1-6 分钟
/	每	*/15 * * * * 每隔 15 分钟

注：由于 GitHub Actions 的限制，如果设置为 * * * * * ，实际的执行频率为每 5 分执行一次。

2. 编程&游戏时长统计

主要利用了 Github Action 的机制，触发定时任务去 Wakatime 平台拉取数据进行统计，而 Wakatime 平台提供了 JetBrains 全家桶、VsCode、Chrome 的插件，用于统计用户的编程时长数据。

1. 创建一个 Github Gist https://gist.github.com/
2. 新建一个拥有 gist 空间权限的 Token，保存它 https://github.com/settings/tokens/new
3. 创建一个 WakaTime 的账号 https://wakatime.com/signup
4. 在你的 WakaTime 账号设置中选择公开你的编码活动 https://wakatime.com/settings/profile

，用于统计用户的编程时长数据。

1. 创建一个 Github Gist https://gist.github.com/
2. 新建一个拥有 gist 空间权限的 Token，保存它 https://github.com/settings/tokens/new
3. 创建一个 WakaTime 的账号 https://wakatime.com/signup
4. 在你的 WakaTime 账号设置中选择公开你的编码活动 https://wakatime.com/settings/profile