前言
先問一個問題，如何讓別人覺得你是一個很厲害的程序員？
Github 就是一個很好的通行證！作為一個長期混跡于 Github 的 CV 程序員，
我很清楚，看到別人的開源項目有萬顆 Star，一聲巨佬不過分！
當(dāng)然，本篇文章不是介紹如何獲取萬顆 Star，而是如何讓你的 Github Profile 更專業(yè)一點(diǎn)，如果你還不了解 Github Profile，沒關(guān)系，簡單來說，Github Profile 就是我們在 Github 上的個人簡介。
如果說 Github 是一個程序員的門面，那么 Github Profile 妥妥就是 Github 的門面，一個好的 Profile 會將一個 Github 賬戶逼格拉滿～
好了，展示一下我的 Profile：
接觸過 Profile 的前端同學(xué)可能會緩緩打出一個問號：
確實，很多前端同學(xué)借助 Html 標(biāo)簽可以寫出更加好看和炫酷的 Profile，我的 Profile 亮點(diǎn)是獲取和展示我的最近博客文章列表和照片都是自動化的！ 這一切都會定期執(zhí)行。
這種自動化操作依賴的是 Github Action，如果你還不清楚什么是 Github Action，可以看一下我之前的文章：
一、思路
這段時間，學(xué)了一些自動化的技術(shù)，又了解了 Github Action，看到了國外的一些老哥將 Github Action 玩的風(fēng)生水起，這個項目聚集了五花八門的國內(nèi)外優(yōu)秀開發(fā)者的 Profile：awesome-github-profile-readme
我的想法是，作為一個逼格的程序員，能不能把自己最近更新的博客鏈接和照片展示在我的 Profile 上。
1. 獲取最新博客鏈接
看了幾個大佬的開源項目后，翻到國外一個小哥的開源 Action blog-post-workflow，它可以將支持 rss 的博客聚合地址解析為博客列表，就像這樣：
這也太簡單了！我離成功展示博客列表只差一步，結(jié)果是我想簡單了，因為國內(nèi)的博客平臺根本就不支持 rss。
沒有 rss 的條件我們就創(chuàng)造一個，好家伙，我又發(fā)現(xiàn)了一個寶藏庫 rsshub，通過它，可以為國內(nèi)博客等平臺創(chuàng)建 rss 鏈接。我本來打算使用 DIYgod 大佬自己服務(wù)器的平臺鏈接，不過貌似掛了，試了幾個大佬自己搭建的 rsshub，也不行，既然都不行，那我只能自己搭建了！
正當(dāng)我苦于沒有服務(wù)器的時候，轉(zhuǎn)念一想，Github Action 不就自帶服務(wù)器嗎！簡單了解了 rsshub 以后，我了解到，可以使用 docker compose 去部署 rsshub，之后就能通過 rsshub 獲取某平臺的 rss鏈接。
2. 展示我的最新照片
展示照片的方案來自于 thmsgbrt，他的方案是使用 Puppeteer 去爬某平臺的個人賬戶，之后將獲取的照片鏈接通過 mustache 生成模板，寫入到 README 中，最后自動將變更的文件提交到 Github 倉庫中。
既然大佬已經(jīng)寫完了這部分，我就直接復(fù)制他的代碼，將他的賬號替換成自己的賬號，最后將他的模板改成自己的模板就行！
二、實戰(zhàn)
Github Action 的流程圖：
需要注意的是，這里有兩個問題。我將爬取照片當(dāng)做 Job1，生成博客鏈接當(dāng)做 Job2，Job 是 Github Action 中的重要概念。
第一個，Job1 和 Job2 兩個過程一定要分兩個 Job 做，不然會因為 Git 驗證失敗而不通過。
第二個，Job1 要先做完，因為 Job1 會重新生成 README，如果 Job2 放第一個，會被 Job1 覆蓋掉。
具體 Github Action 的 workflow是這樣的，詳細(xì)的注釋我都標(biāo)注了：
# workflow 名稱
name: CI
on:
# push 的時候觸發(fā)
push:
branches: [ master ]
# 每周二觸發(fā)
schedule:
- cron: '0 21 * * 2'
workflow_dispatch:
jobs:
# 獲取照片 Job1
social:
timeout-minutes: 10
# 服務(wù)器選擇
runs-on: ubuntu-latest
steps:
# 獲取代碼
- uses: actions/checkout@v2
# 設(shè)置 node 環(huán)境
- 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
內(nèi)容不長，我們挨個解釋一遍。
1. 觸發(fā)時機(jī)
Push 代碼的時候觸發(fā)更新不用說，防止更新完代碼出bug。
另外一個就是每周二會自動觸發(fā)更新 Profile 的任務(wù)，因為我更新文章一般放在周一。
2. 獲取照片
存取照片我選擇的國外的一個社交平臺，大家看我的 Profile 就知道用的什么平臺了，比較方便。
這里就兩個注意點(diǎn)。
一是將 index.js 中我的社交媒體賬號替換成你的。
二是記得將這里的模板改成自己的，不然你的 Profile 會跟我的一樣。
3. 更新博客
更新博客 action 來自于 blog-post-workflow，這個 action 幾乎支持所有外國主流博客平臺，無需部署 rsshub，不巧的是，國內(nèi)的博客平臺大部分都不支持 rss。
部署 rsshub 的代碼在 docker-compose.yml 中，感興趣可以自己看一下，無需改動。
blog-post-workflow 的使用僅需兩步，第一步將下面?zhèn)€的內(nèi)容
# Blog posts
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->
寫入到你的 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: "你的地址"
這里也有兩點(diǎn)值得注意一下。
第一點(diǎn)，如果你僅僅想自動更新博客，并且你的博客地址支持 rss，那么你要做的內(nèi)容就很輕松了，只需在 Profile 中放入一個 README，再將上述的代碼替換成你的博客地址后放入到你的 workflow 中就大功告成。
第二點(diǎn)，如果你想和我一樣，更新的是國內(nèi)博客平臺的文章，就需要使用我的 workflow，并在 rsshub 官網(wǎng)上查相應(yīng)平臺的鏈接。
這步做完，你就可以一勞永逸！
三、更多Profile中炫酷的組件
Github 上一些可以用在 Profile 上的組件，簡單介紹幾個。
1. github-readme-stats
github-readme-stats 可以展示我們 Github 的一些詳細(xì)信息，比如項目 Star 的總數(shù)、Commit 數(shù)等，主題和內(nèi)容也可高度自定義，具體的可以查看：github-readme-stats。
2. wake readme
wake readme 幫助我們展示提交代碼所用的語言，需配合 Github Action 食用，地址：wake readme
3. shields.io
shields.io 可以幫助我們做出各式好看的角標(biāo)，并且不會讓我們失望！教程可以自行搜索，地址：shields.io
如果你想找到一些角標(biāo)的捷徑，可以在 Badges4-README.md-Profile 尋找，比如前端框架的庫：
4. awesome-github-profile-readme
上面介紹都是組件，awesome-github-profile-readme 搜集了很多國內(nèi)外優(yōu)秀開發(fā)者的 Profile，地址是https://awesomegithubprofile.tech/。
如果覺得自己的 Profile 差點(diǎn)意思，可以從大神的方案中獲取靈感！
四、總結(jié)
借助 Github Action，真的可以玩出花來，比如國內(nèi)的大佬利用它來每天在某網(wǎng)站上自動簽到，畢竟，Github Action 每個月免費(fèi)的2000分鐘必須得薅！
記得剛畢業(yè)那會兒，Github 上有一個 Page 可以搭建自己的個人博客，當(dāng)時看到一個國內(nèi)小哥的博客很不錯，既展示了文章，又展示了自己平時照片，我也學(xué)著他的做法做了一個。
當(dāng)時還不了解 CI/CD，上傳博客、更新博客鏈接、上傳照片、修改前端頁面每一步都是手動完成，而大神除了創(chuàng)建新的博客文檔，后面的每一步可能都是自動化技術(shù)實現(xiàn)的。
哎，人菜癮大還愛玩~
如果你有更好玩的想法，評論區(qū)交流！
