前言
先问一个问题，如何让别人觉得你是一个很厉害的程序员？
Github 就是一个很好的通行证！作为一个长期混迹于 Github 的 CV 程序员，
我很清楚，看到别人的开源项目有万颗 Star，一声巨佬不过分！
当然，本篇文章不是介绍如何获取万颗 Star，而是如何让你的 Github Profile 更专业一点，如果你还不了解 Github Profile，没关系，简单来说，Github Profile 就是我们在 Github 上的个人简介。
如果说 Github 是一个程序员的门面，那么 Github Profile 妥妥就是 Github 的门面，一个好的 Profile 会将一个 Github 账户逼格拉满～
好了，展示一下我的 Profile：
接触过 Profile 的前端同学可能会缓缓打出一个问号：
确实，很多前端同学借助 Html 标签可以写出更加好看和炫酷的 Profile，我的 Profile 亮点是获取和展示我的最近博客文章列表和照片都是自动化的！ 这一切都会定期执行。
这种自动化操作依赖的是 Github Action，如果你还不清楚什么是 Github Action，可以看一下我之前的文章：
《从Github Action入门自动化技术也太轻松了吧！》
一、思路
这段时间，学了一些自动化的技术，又了解了 Github Action，看到了国外的一些老哥将 Github Action 玩的风生水起，这个项目聚集了五花八门的国内外优秀开发者的 Profile：awesome-github-profile-readme
我的想法是，作为一个逼格的程序员，能不能把自己最近更新的博客链接和照片展示在我的 Profile 上。
1. 获取最新博客链接
看了几个大佬的开源项目后，翻到国外一个小哥的开源 Action blog-post-workflow，它可以将支持 rss 的博客聚合地址解析为博客列表，就像这样：
这也太简单了！我离成功展示博客列表只差一步，结果是我想简单了，因为国内的博客平台根本就不支持 rss。
没有 rss 的条件我们就创造一个，好家伙，我又发现了一个宝藏库 rsshub，通过它，可以为国内博客等平台创建 rss 链接。我本来打算使用 DIYgod 大佬自己服务器的平台链接，不过貌似挂了，试了几个大佬自己搭建的 rsshub，也不行，既然都不行，那我只能自己搭建了！
正当我苦于没有服务器的时候，转念一想，Github Action 不就自带服务器吗！简单了解了 rsshub 以后，我了解到，可以使用 docker compose 去部署 rsshub，之后就能通过 rsshub 获取某平台的 rss链接。
2. 展示我的最新照片
展示照片的方案来自于 thmsgbrt，他的方案是使用 Puppeteer 去爬某平台的个人账户，之后将获取的照片链接通过 mustache 生成模板，写入到 README 中，最后自动将变更的文件提交到 Github 仓库中。
既然大佬已经写完了这部分，我就直接复制他的代码，将他的账号替换成自己的账号，最后将他的模板改成自己的模板就行！
二、实战
Github Action 的流程图：
需要注意的是，这里有两个问题。我将爬取照片当做 Job1，生成博客链接当做 Job2，Job 是 Github Action 中的重要概念。
第一个，Job1 和 Job2 两个过程一定要分两个 Job 做，不然会因为 Git 验证失败而不通过。
第二个，Job1 要先做完，因为 Job1 会重新生成 README，如果 Job2 放第一个，会被 Job1 覆盖掉。
具体 Github Action 的 workflow是这样的，详细的注释我都标注了：
# workflow 名称
name: CI
on:
# push 的时候触发
push:
branches: [ master ]
# 每周二触发
schedule:
- cron: '0 21 * * 2'
workflow_dispatch:
jobs:
# 获取照片 Job1
social:
timeout-minutes: 10
# 服务器选择
runs-on: ubuntu-latest
steps:
# 获取代码
- uses: actions/checkout@v2
# 设置 node 环境
- name: Install node
uses: actions/setup-node@v1
with:
node-version: 14.x
# 添加依赖
- name: Install dependencies
run: npm install
# 生成文件
- name: Generate README file
run: node index.js
# push 代码，需要自己的 Github token
- name: Push new README.md
uses: mikeal/publish-to-github-action@master
env:
GITHUB_TOKEN: ${{ secrets.AC_TOKEN }}
# 更新博客 Job2
blog:
timeout-minutes: 10
runs-on: ubuntu-latest
needs: social
steps:
- uses: actions/checkout@v2
# 使用 docker compose 部署 rsshub
- name: Start containers
run: docker-compose -f "docker-compose.yml" up -d --build
- name: Install node
uses: actions/setup-node@v1
with:
node-version: 14.x
- name: Install dependencies
run: npm install
# 将注释替换成更新博客链接
- uses: gautamkrishnar/blog-post-workflow@master
with:
feed_list: "http://localhost:1200/juejin/posts/3526889033444855"
- name: Stop containers
if: always()
run: docker-compose -f "docker-compose.yml" down
内容不长，我们挨个解释一遍。
1. 触发时机
Push 代码的时候触发更新不用说，防止更新完代码出bug。
另外一个就是每周二会自动触发更新 Profile 的任务，因为我更新文章一般放在周一。
2. 获取照片
存取照片我选择的国外的一个社交平台，大家看我的 Profile 就知道用的什么平台了，比较方便。
这里就两个注意点。
一是将 index.js 中我的社交媒体账号替换成你的。
二是记得将这里的模板改成自己的，不然你的 Profile 会跟我的一样。
3. 更新博客
更新博客 action 来自于 blog-post-workflow，这个 action 几乎支持所有外国主流博客平台，无需部署 rsshub，不巧的是，国内的博客平台大部分都不支持 rss。
部署 rsshub 的代码在 docker-compose.yml 中，感兴趣可以自己看一下，无需改动。
blog-post-workflow 的使用仅需两步，第一步将下面个的内容
# Blog posts
写入到你的 README 文件中，第二步在 workflow 文件中直接使用：
name: Latest blog post workflow
on:
schedule: # Run workflow automatically
- cron: '0 * * * *' # 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
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@v2
- name: Pull in dev.to posts
uses: gautamkrishnar/blog-post-workflow@master
with:
feed_list: "你的地址"
这里也有两点值得注意一下。
第一点，如果你仅仅想自动更新博客，并且你的博客地址支持 rss，那么你要做的内容就很轻松了，只需在 Profile 中放入一个 README，再将上述的代码替换成你的博客地址后放入到你的 workflow 中就大功告成。
第二点，如果你想和我一样，更新的是国内博客平台的文章，就需要使用我的 workflow，并在 rsshub 官网上查相应平台的链接。
这步做完，你就可以一劳永逸！
三、更多Profile中炫酷的组件
Github 上一些可以用在 Profile 上的组件，简单介绍几个。
1. github-readme-stats
github-readme-stats 可以展示我们 Github 的一些详细信息，比如项目 Star 的总数、Commit 数等，主题和内容也可高度自定义，具体的可以查看：github-readme-stats。
2. wake readme
wake readme 帮助我们展示提交代码所用的语言，需配合 Github Action 食用，地址：wake readme
3. shields.io
shields.io 可以帮助我们做出各式好看的角标，并且不会让我们失望！教程可以自行搜索，地址：shields.io
如果你想找到一些角标的捷径，可以在 Badges4-README.md-Profile 寻找，比如前端框架的库：
4. awesome-github-profile-readme
上面介绍都是组件，awesome-github-profile-readme 搜集了很多国内外优秀开发者的 Profile，地址是https://awesomegithubprofile.tech/。
如果觉得自己的 Profile 差点意思，可以从大神的方案中获取灵感！
四、总结
借助 Github Action，真的可以玩出花来，比如国内的大佬利用它来每天在某网站上自动签到，毕竟，Github Action 每个月免费的2000分钟必须得薅！
记得刚毕业那会儿，Github 上有一个 Page 可以搭建自己的个人博客，当时看到一个国内小哥的博客很不错，既展示了文章，又展示了自己平时照片，我也学着他的做法做了一个。
当时还不了解 CI/CD，上传博客、更新博客链接、上传照片、修改前端页面每一步都是手动完成，而大神除了创建新的博客文档，后面的每一步可能都是自动化技术实现的。
哎，人菜瘾大还爱玩~
如果你有更好玩的想法，评论区交流！