嗨大家好,延續上一篇透過Wakatime,紀錄你的開發時間。今天手把手教大家,如何透過Wakatime,豐富自己的Github Profile。並且也附上Github Profile的其他相關教學。
當中包含了「定時更新自己的Youtube播放列表」,「定時更新自己的部落格文章連結」…等等豐富的內容嚕。
建立Github Profile
About your profile,其實就是各個Github帳號的個人頁面。做好一份Github Profile,也讓自己的個人品牌大加分。
以下是各個精美的範例:
https://github.com/timburgan (超炫砲,下棋的Github profile)
https://github.com/katmeister (簡單俐落的Gif)
https://github.com/M0nica (漂亮的大Banner)
https://github.com/ashbakernz (透過程式碼,自我介紹)
看完上述的Github Profile,有沒有發現Github Profile其實是一個簡易的個人網頁。在這裡可以展現自己的個人特色。
這裡是我的Github Profile >>> Steven Cheng Github Profile
步驟1. 新增Github Repository
新增一個Github Repository >>> https://github.com/new
![新增Github Repository](__GHOST_URL__/content/images/2021/06/F1D15779-53BB-43F3-B4D4-B9C856DB4CD2_1_105_c-1.jpeg)
注意!紅色方框的repository 名稱,要跟你Github 帳號名稱一樣, 這樣就會判定是一個Github Profile的專案。才可以將這一份的README.md檔案顯示在你的Github Profile上。像我這邊就必須輸入"steven130169"。
下方的「Add a README file」,記得要打勾。
新增Repository 完畢後,會呈現類似下圖的畫面。在畫面的右方,會呈現一個綠色區塊,告訴你說" is a special repository." 這才代表成功。如果沒有呈現的話,代表你的repository 名稱沒有與你的帳號相同。
![Github Repository README](__GHOST_URL__/content/images/2021/06/E22E7210-8EDC-4C1F-8C47-1D44EEF4057A.png)
步驟2. 編輯Github Profile
完成之後,點擊「Edit README」。
![Github Profile Edit README](__GHOST_URL__/content/images/2021/06/08CBC111-9986-4833-AC0E-C30F3A91AD6A_1_105_c.jpeg)
進入編輯頁面。
![Github Profile 編輯頁面](__GHOST_URL__/content/images/2021/06/7FFCCEE7-7FAB-4C4C-B004-B593149B24A5_1_105_c.jpeg)
在編輯完成之後,記得要按下commit,這樣才代表儲存完畢。
![Github Profile commit](__GHOST_URL__/content/images/2021/06/F2FF7DB4-E59D-4670-942B-6A04F204E367_1_105_c.jpeg)
步驟3. 確認編輯後的Github Profile
在網址列輸入:https://github.com/你的帳號名稱 。
Example: https://github.com/steven130169
確認一下,完成後的結果如何嚕。
![Github Profile Page](__GHOST_URL__/content/images/2021/06/image-2.png)
Wakatime 嵌入教學
我們將透過waka-readme-stats,這個open source專案,讓我們的Profile可以呈現精美的每週開發時間分配的圖表。不過,首先還是要讓你的wakatime,有記錄這樣在嵌入的時候才會有感覺。歡迎參考: >> wakatime 介紹
Github Profile 呈現如下圖
![wakatime readme stats](__GHOST_URL__/content/images/2021/06/6F513220-296B-489A-A8D3-D4B274CBE7D4_1_105_c.jpeg)
步驟1. 在你的readme.md 標記要呈現wakatime的區域
在希望wakatime呈現的地方,加入以下程式碼。並且儲存。
<!--START_SECTION:waka-->
<!--END_SECTION:waka-->
步驟2. 新增Github Action
點擊剛剛新增的Github Profile Repository > Action
![點擊 Github Action](__GHOST_URL__/content/images/2021/06/3932879F-C8F5-4469-AAB5-BB3A5F01ECE1_1_105_c.jpeg)
接著點擊 new workflow > set up a workflow yourself > 進入編輯workflow 畫面
紅色區塊,輸入你的檔案名稱例如:wakatime-workflow.yml
![編輯workflow](__GHOST_URL__/content/images/2021/06/F469BCFA-BBDE-476C-B9DB-4203A0429528_1_105_c.jpeg)
步驟3. 複製以下程式碼
name: Waka Readme
on:
workflow_dispatch:
schedule:
# Runs at 12am UTC
- cron: "0 0 * * *"
jobs:
update-readme:
name: Update this repo's README
runs-on: ubuntu-latest
steps:
- uses: anmol098/waka-readme-stats@master
with:
WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}
LOCALE: "en"
SHOW_COMMIT: "True"
SHOW_DAYS_OF_WEEK: "True"
SHOW_EDITORS: "True"
SHOW_OS: "True"
並且複製貼上到程式碼編輯的橘色區域。
當中的「WAKATIME_API_KEY」我們在下個步驟進行設定。
步驟4. 設定Wakatime API Key
進入Github Profile Repository Settings > 側邊欄的Secrets > 點擊New repository secret
在Name(紅色區域) 輸入「WAKATIME_API_KEY」
在Value (橘色區域) 輸入 WAKATIME 的API Key,從你的wakatime複製貼上。
![設定Wakatime API Key](__GHOST_URL__/content/images/2021/06/96FDA195-DD04-426F-868D-D920BC50EA02_1_105_c.jpeg)
設定完成之後,記得點擊「Add secret」儲存。
步驟5. 嘗試觸發Workflow 驗證是否成功
回到Github Action workflow
點擊剛剛新增的workflow 檔案 > 點擊 run workflow
![wakatime run workflow](__GHOST_URL__/content/images/2021/06/9A9A367C-0110-4E41-8DA2-4D8819F4E3F2_1_105_c.jpeg)
Github workflow 成功完成後,就可以回到你的Github Profile,確認一下呈現的效果。
定時更新部落格文章嵌入教學
接著跟大家分享另外一個Github Profile Workflow,讓你的Github Proflie 可以定時更新,放上你最新的部落格文章連結。如下圖紅色區域
![更新Github個人部落格](__GHOST_URL__/content/images/2021/06/FA763546-36CD-40F9-87FC-D70838C5CD6A_1_105_c.jpeg)
使用的Github專案連結在此>> https://github.com/gautamkrishnar/blog-post-workflow
使用方式,其實跟Wakatime的嵌入非常相像。
步驟1. 在readme.md 標記要呈現Blog 文章連結的區域
# Blog posts
<!-- BLOG-POST-LIST:START \-->
<!-- BLOG-POST-LIST:END \-->
步驟2. 新增一個workflow 檔案
檔案名稱命名隨意,只要不要重複即可。
複製貼上以下程式碼
name: Latest blog post workflow
on:
schedule: # Run workflow automatically
- cron: '0 0 * * *' # Runs every day, on the day
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:
- uses: actions/checkout@v2
- uses: gautamkrishnar/blog-post-workflow@master
with:
feed_list: "https://blog.chiwencheng.com/news/rss" # your blog url
注意!feed_list 區域要更換成你自己的Blog RSS網址
其他更細節的Github workflow 設定可以參考此網站>> https://github.com/gautamkrishnar/blog-post-workflow
步驟3. 嘗試觸發Workflow 驗證是否成功
設定完畢之後,當然要嘗試觸發看看,確認Workflow 可以正常執行。
當中支援可以定時更新的內容相當的多,包含youtube 播放列表、youtube 頻道的更新、reddit、stack overflow…等等,都可以串。
其他更詳細的Workflow 設定可以直接參考我的專案內容>> https://github.com/steven130169/steven130169/tree/main/.github/workflows
好看的icon
獨特的Github Profile 不能沒有icon ,以下分享我自己所使用的icon 網址。
社群網站icon
https://icons8.com/ 這個網站有各式各樣的icon,我的connect with me 區域就是從這個網站來的。
各式程式語言與IDE icon
https://github.com/Ileriayo/markdown-badges
在這裡有大神幫你製作好的各式各樣的程式語言、IDE、framework的精美圖片。
讓你可以放置在你的language and skill 區域。
其他美化Github Profile 的工具
- 各式各樣的label https://github.com/badges/shields#backers
- 填寫完畢後,自動有產出你的Github Profile https://rahuldkjain.github.io/gh-profile-readme-generator/
- 展現你的github 貢獻 https://github.com/anuraghazra/github-readme-stats
- 歡迎嵌入這邊的gif https://gifer.com/en
如果這篇文章帶給你很多收穫,歡迎請我喝杯咖啡>> 立即贊助🤗
支持我可以持續的創作。
歡迎在0 Comments按個愛心,並且按下「訂閱」這樣就可以每週收到我的即時電子報!
有任何問題,也歡迎在留言區留言。
你還可以許願,花個5分鐘幫我填寫下問卷,讓我知道你更喜歡什麼樣類型的文章!!!
問卷網址如下https://forms.gle/iVmPmnvJW22bpxbc8
搶先發佈留言