又到了一年一度折腾自己Github主页的时候了，这篇文章就以我的主页为例，讨论一下各种有趣的装饰小工具和途中遇到的坑。 ![微信截图_20240116140707](ipfs://QmdEaAbuf8CFELkoiwAL8CaqA9EMKUnFNAdcARHeqFZgZZ) ## 建立自述文件新建一个和你的Github用户名同名的仓库（大小写要一致），勾选 `Public`，勾选 `Add a README file`，并点击最下方的 `Create repository` 按钮以创建： ![微信截图_20240117151151](ipfs://QmaXfvuCENmaRegiNc362kvBuWiJj7YUfKfPfDTfFck1JW) ![微信截图_20240117151326](ipfs://QmTb7jbw9CmF8CykYPbwomP7fGk9zMLXkcGVRnU1SZ6uM7) 稍等片刻，就会进入到创建好的仓库： ![微信截图_20240117151741](ipfs://QmcJPsXmQM7HFVWvedu8YHgYGKjbvq6CBihp6CZcDq8XJJ) 接下来就可以在此仓库的 `README.md` 文件上配置我们的装饰小工具或写一段自我介绍。 ## 🧪贡献图贪吃蛇利用🔗[snk](https://github.com/Platane/snk)在自述文件上展示贡献贪吃蛇动画，且每天自动更新数据。 ### 创建文件点击 `Create new file` 按钮： ![微信截图_20240117153521](ipfs://QmUFMK6RPJkfnGWs3GqYRzb4nEbmknXhQmCSz59NxhCziT) 将下列路径复制到文件名文本框内，会自动识别： ``` .github/workflows/main.yml ``` ![微信截图_20240117153735](ipfs://Qmd9ZyfaX8Qba56qXkLSPvkHJiDsaMNZvPCWwcpD9GVKD6) ![微信截图_20240117154035](ipfs://QmdoXQGxMQJHxbTV3oewSTQnM2yjDZVbqEJgGmNAcEZPLJ) 并将下列代码复制到下边的大文本框内（代码也可参考🔗[main.yml](https://github.com/devyujie/devyujie/blob/master/.github/workflows/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 () contributions graph, output a svg animation at - 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 to a branch # the content will be available at https://raw.githubusercontent.com//// , 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 }} ``` ![微信截图_20240117154418](ipfs://QmfGYERHePXoKL54X99EozxB9AHshPt6ZYncpWRgkvjoSj) ![微信截图_20240117154620](ipfs://QmSE9owwoRH9sfMxngvNXJNNYPSZzWBMf5pitdJV2LEuo7) ### 编辑自述文件回到仓库主页，点击 `Edit README`： ![微信截图_20240117155101](ipfs://QmUZGUcFicDXgUq5cfbp3yWE4qAsiBVMaVvAua7u71fXZu) 可以看到已经有一些预置的自我介绍模版，这里我们暂且先不管，因为被注释掉了，实际也不会显示出来： ![微信截图_20240117155401](ipfs://Qma4WDaAioSYFWJH8fdcUnhwcisFrGpWRvE9mwznpVCCG1) 将下列代码复制到文本框内，需要将用户名部分替换成你自己的（也就是替换其中所有的 `DevJayson`），并点击 `Commit changes` 按钮。这段代码的目的是：加载贪吃蛇动画，且贪吃蛇的暗亮风格与你的Github的暗亮风格进行自动适配。 ```

github contribution grid snake animation

``` ![微信截图_20240117160414](ipfs://QmU5u1wYS2zcAiRuQ8yf8ZoGjdF7S4a1LG4fzMDi518z1y) 此时还看不到贪吃蛇，要去手动运行一下（因为设置的是每2小时更新一下），之后就是全自动了。点击 `Action`： ![微信截图_20240117160623](ipfs://QmaGsLsDa5tfHLbSg5Gk16VztTrUJuXcBVPpZX3EJNZRuG) 点击 `generate animation`，点击 `Run workflow`： ![微信截图_20240117160654](ipfs://QmUBq5kRDWyKGZvxDwBke581ji2rxrqMakn73BJ5V9PCjJ) 稍等片刻，显示运行成功，再次回到仓库主页就会看到贪吃蛇动画已被加载： ![微信截图_20240117161112](ipfs://QmctWit2K6jnxgvvfmGSq85dsSQ7Lcae7nGu1hUNQVVwBL) ![微信截图_20240117161218](ipfs://QmaVE6JMguaXUAWouTGDJjUxoQKArzCpB7WNa9JHyjHNgE) > 注：生成的贪吃蛇动画文件在仓库的 `output` 分支存放： > ![微信截图_20240117161444](ipfs://Qmbg5s7E4egiDC8Q15eJnYTcExPY9Ad7C6AFZo1QnjY2PF) ## 🧪博客文章同步 > 如果你有博客网站，且网站带有RSS功能，才可配置此工具利用🔗[blog-post-workflow](https://github.com/gautamkrishnar/blog-post-workflow)在自述文件上展示最近几篇博客文章。 ### 创建文件同样回到仓库主页，点击 `Create new file`： ![微信截图_20240117163150](ipfs://Qmcmk1H32gL34gYNmkAUqav9a6N32herfvKDsugvtjuAJF) 将下列路径复制到文件名文本框内： ``` .github/workflows/blog-post-workflow.yml ``` 将下列代码复制到下边的大文本框内，需要改动最后一行的 `feed_list` 的内容为你自己网站的RSS链接（例如：`https://realyujie.xlog.app/feed`），并点击 `Commit changes` 以完成创建。更多构建参数请参考🔗[这里](https://github.com/gautamkrishnar/blog-post-workflow?tab=readme-ov-file#options)，包括显示文章数量、显示主题等等。 ``` 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" ``` ![微信截图_20240117164207](ipfs://QmNiqF56VmLP6SBx5ae2LAcLck9xzGhugrSoeZ6WzmdVDF) ### 编辑自述文件再次回到仓库主页，点击 `Edit README`： ![微信截图_20240117155101](ipfs://QmUZGUcFicDXgUq5cfbp3yWE4qAsiBVMaVvAua7u71fXZu) 将下列内容放置在README中，程序会自动抓取文章标题、链接等并显示其中，点击 `Commit changes` ： ``` 📕 **Latest Blog Posts** ``` ![微信截图_20240117164728](ipfs://QmcuroCXBEPhiFeihyc4c7sdE32LnVNyqkx25zUzbHcwFD) 此时还看不到文章列表，同样要先要去手动运行一下。点击 `Action`： ![微信截图_20240117165214](ipfs://QmUwfzvKoFdMrN71ygrFVaKehPEBokxZ6vTHMZtbWoitoB) 点击 `Latest blog post workflow`，点击 `Run workflow`： ![微信截图_20240117165232](ipfs://QmccRj2iCVvqXjgr4QjN22KYGX2W5TzezwXjndWMGsVPJb) 稍等片刻，运行成功，回到仓库主页，完美显示文章列表： ![微信截图_20240117165833](ipfs://QmS2kqsnLSTqZs2JUdidBnduGiSuzJwomsqvDWSkdySx1K) ### 其它设置进入仓库设置 `Settings`，点击 `Actions` -> `General`。页面拉到最底部，找到 Workflow permissions，选项改为 `Read and write permissions`，勾选 `Allow GitHub Actions to create and approve pull requests`，并点击保存 `Save`： ![微信截图_20240117170028](ipfs://QmVG3a7DoHg2tsf8wesXYs5L4EUrhHobCujdpX9SsQ2y5d) ![微信截图_20240117170502](ipfs://QmbULGhXNpTpETzEFCQ19GJJnRJmh15qMJBgp93zjPXLSw) 至此，此工具也配置完毕。回到Github个人主页，即可显示刚刚配置的两个小工具： ![微信截图_20240117171721](ipfs://QmbE99bgdJAueoh9AwfeFxeXzohZ489x7TpZsFfXzp5zrK) > 为了写教程，此篇文章使用的是博主的Github小号配置的。 > 如果你的开源贡献不多，那么贡献图也会和博主小号一样，可能只显示几个点或者压根没有，慢慢丰富贡献之后，就会越来越好看。 ## 其它还记得开始被注释掉的自我介绍吗，可以取消注释，并适当修改以显示，可以参考博主大号的🔗[自述文件](https://github.com/devyujie/devyujie/blob/master/README.md?plain=1)。