又到了一年一度折腾自己 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/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 的暗亮风格进行自动适配。
<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 小号配置的。
如果你的开源贡献不多，那么贡献图也会和博主小号一样，可能只显示几个点或者压根没有，慢慢丰富贡献之后，就会越来越好看。
其它#
还记得开始被注释掉的自我介绍吗，可以取消注释，并适当修改以显示，可以参考博主大号的🔗自述文件。