美化自己的 GitHub 个人主页

又到了一年一度折腾自己 Github 主页的时候了，这篇文章就以我的主页为例，讨论一下各种有趣的装饰小工具和途中遇到的坑。

建立自述文件

新建一个和你的 Github 用户名同名的仓库（大小写要一致），勾选 Public，勾选 Add a README file，并点击最下方的 Create repository 按钮以创建：

稍等片刻，就会进入到创建好的仓库：

接下来就可以在此仓库的 README.md 文件上配置我们的装饰小工具或写一段自我介绍。

🧪贡献图贪吃蛇

利用🔗snk在自述文件上展示贡献贪吃蛇动画，且每天自动更新数据。

创建文件

点击 Create new file 按钮：

将下列路径复制到文件名文本框内，会自动识别：

Copy
.github/workflows/main.yml

并将下列代码复制到下边的大文本框内（代码也可参考🔗main.yml），不需要任何改动，并点击 Commit changes 按钮：

Copy
name: generate animation

on:
# run automatically every 2 hours
schedule:
- cron: "0 */2 * * *"

# allows to manually run the job at any time
workflow_dispatch:

# run on every push on the master branch
push:
branches:
- master

jobs:
generate:
permissions:
contents: write
runs-on: ubuntu-latest
timeout-minutes: 5

steps:
# generates a snake game from a github user (<github_user_name>) contributions graph, output a svg animation at <svg_out_path>
- name: generate github-contribution-grid-snake.svg
uses: Platane/snk/svg-only@v3
with:
github_user_name: ${{ github.repository_owner }}
outputs: |
dist/github-contribution-grid-snake.svg
dist/github-contribution-grid-snake-dark.svg?palette=github-dark

# push the content of <build_dir> to a branch
# the content will be available at https://raw.githubusercontent.com/<github_user>/<repository>/<target_branch>/<file> , or as github page
- name: push github-contribution-grid-snake.svg to the output branch
uses: crazy-max/ghaction-github-pages@v3.1.0
with:
target_branch: output
build_dir: dist
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

编辑自述文件

回到仓库主页，点击 Edit README：

可以看到已经有一些预置的自我介绍模版，这里我们暂且先不管，因为被注释掉了，实际也不会显示出来：

将下列代码复制到文本框内，需要将用户名部分替换成你自己的（也就是替换其中所有的 DevJayson），并点击 Commit changes 按钮。这段代码的目的是：加载贪吃蛇动画，且贪吃蛇的暗亮风格与你的 Github 的暗亮风格进行自动适配。

Copy






此时还看不到贪吃蛇，要去手动运行一下（因为设置的是每 2 小时更新一下），之后就是全自动了。

点击 Action：

点击 generate animation，点击 Run workflow：

稍等片刻，显示运行成功，再次回到仓库主页就会看到贪吃蛇动画已被加载：

注：生成的贪吃蛇动画文件在仓库的 output 分支存放：

🧪博客文章同步

如果你有博客网站，且网站带有 RSS 功能，才可配置此工具

利用🔗blog-post-workflow在自述文件上展示最近几篇博客文章。

创建文件

同样回到仓库主页，点击 Create new file：

将下列路径复制到文件名文本框内：

Copy
.github/workflows/blog-post-workflow.yml

将下列代码复制到下边的大文本框内，需要改动最后一行的 feed_list 的内容为你自己网站的 RSS 链接（例如：https://realyujie.xlog.app/feed），并点击 Commit changes 以完成创建。

更多构建参数请参考🔗这里，包括显示文章数量、显示主题等等。

Copy
name: Latest blog post workflow
on:
schedule: # Run workflow automatically
- cron: '0 */2 * * *' # Runs every hour, on the hour
workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly
permissions:
contents: write # To write the generated contents to the readme

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@v3
- name: Pull in blog's posts
uses: gautamkrishnar/blog-post-workflow@v1
with:
feed_list: "https://realyujie.xlog.app/feed"

编辑自述文件

再次回到仓库主页，点击 Edit README：

将下列内容放置在 README 中，程序会自动抓取文章标题、链接等并显示其中，点击 Commit changes ：

Copy
📕 &nbsp;**Latest Blog Posts**



此时还看不到文章列表，同样要先要去手动运行一下。点击 Action：

点击 Latest blog post workflow，点击 Run workflow：

稍等片刻，运行成功，回到仓库主页，完美显示文章列表：

其它设置

进入仓库设置 Settings，点击 Actions -> General。

页面拉到最底部，找到 Workflow permissions，选项改为 Read and write permissions，勾选 Allow GitHub Actions to create and approve pull requests，并点击保存 Save：

至此，此工具也配置完毕。回到 Github 个人主页，即可显示刚刚配置的两个小工具：

为了写教程，此篇文章使用的是博主的 Github 小号配置的。

如果你的开源贡献不多，那么贡献图也会和博主小号一样，可能只显示几个点或者压根没有，慢慢丰富贡献之后，就会越来越好看。

其它

还记得开始被注释掉的自我介绍吗，可以取消注释，并适当修改以显示，可以参考博主大号的🔗自述文件。