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

建立自述文件

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

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

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

🧪贡献图贪吃蛇

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

创建文件

点击 Create new file 按钮：

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

.github/workflows/main.yml

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

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/[email protected]
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

编辑自述文件

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

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

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

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/DevJayson/DevJayson/output/github-contribution-grid-snake-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/DevJayson/DevJayson/output/github-contribution-grid-snake.svg">
  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/DevJayson/DevJayson/output/github-contribution-grid-snake.svg">
</picture>

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

点击 Action：

点击 generate animation，点击 Run workflow：

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

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

🧪博客文章同步

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

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

创建文件

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

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

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

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

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

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 ：

📕  **Latest Blog Posts**
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

此时还看不到文章列表，同样要先要去手动运行一下。点击 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小号配置的。

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

其它

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