Vinc3nt's Life

製作獨特的 Github Profile、用 WakaTime 紀錄你的日常

2024-03-28
tools
github
wakatime
productivity
最後更新:2025-01-26
7分鐘
1321字

Github 帳號可以說是現代工程師的行業身份,也是名片。

使用者可以在 Github Profile 編輯並添加詳細的資訊,帳號的貢獻、活動歷程也會呈現在此頁面。

這樣還不夠,我們花費了更多的努力在 commit 之外的地方,也需要被呈現。Github 很貼心的提供了 Profile README,使用者可以透過 Markdown 的格式,如同寫專案 README 一樣自由的編輯。

由我們人工自己編輯也太累了,尤其是日常的資料收集。其實其他人早就有這個想法,並提供解決方案: 我們可以使用 WakaTime 這個服務收集我們 Github 和 editor/IDE 的資料,並進一步輸出統計數據;而 Github Workflow 可以幫助我們定期自動化的抓取數據並更新我們的 Profile 檔案。

接下來,我會逐步講解過程。

創建 Github Profile README

照著 Adding a profile README 的步驟,我們創建了一個與帳號同名的公開倉庫(我的叫 vincent97277)。接下來我們來添加一些自動化內容。

Blog Post

對我來說,Blog 文章可以呈現我對問題、需求的思考、解決流程,是極為重要的展示面。作為 Profile 的一部分在適合不過了。

使用 Github Action - Blog Post Workflow 可以幫我們輕易的更新最新的部落格文章到 Profile。不需要自己重複造輪子。

設置 Github Workflow

Prep Work

如果你之前沒有推送 Workflow 的設置,需要先進行 Github 驗證1


依照 Blog Post Workflow - How to use 操作:

  • 將與帳號同名的 repo 克隆到本地
  • 修改 README 檔,加入以下字段:
    1
    # Blog posts
    2
    <!-- BLOG-POST-LIST:START -->
    3
    <!-- BLOG-POST-LIST:END -->
  • 新增 .github/workflows/blog-post-workflow.yml 檔案,加入以下內容:
    1
    name: Latest blog post workflow
    2
    on:
    3
    schedule: # Run workflow automatically
    4
    - cron: '0 0 * * *' # Runs every hour, on the hour
    5
    workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly
    6
    permissions:
    7
    contents: write # To write the generated contents to the readme
    8
    9
    jobs:
    10
    update-readme-with-blog:
    11
    name: Update this repo's README with latest blog posts
    12
    runs-on: ubuntu-latest
    13
    steps:
    14
    - name: Checkout
    15
    uses: actions/checkout@v4
    4 collapsed lines
    16
    - name: Pull in dev.to posts
    17
    uses: gautamkrishnar/blog-post-workflow@v1
    18
    with:
    19
    feed_list: "https://blog.vinny987.xyz/rss.xml" # 請換成自己的 rss.xml
  • 提交更改並推送到倉庫,完成設置
  • 到 Github -> Actions -> 選擇 Latest blog post workflow,手動執行 workflow

WakaTime

WakaTime 是一款用於程式碼時間追蹤的開發工具,它可以幫助開發者了解自己在編寫程式碼上花費的時間。透過安裝在你偏好的編輯器或 IDE(整合開發環境)的插件,WakaTime 能夠自動追蹤你在寫程式時的活動,並提供詳細的報告和數據分析。這些資料幫助開發者了解自己的工作習慣,進而提高生產效率。

我們要在 Profile 展示 WakaTime 的統計報告,讓我們開始吧。

設置 WakaTime

設置完成後,到 VS Code 隨意進行一些操作,就可以到 Dashboard 觀看成果。

default 這是我 6 個小時的資料

設置 Github Workflow

Prep Work

在繼續進行之前,你需要取得一個開通了 repouser scope 的 GitHub Access Token:

  • 到 Github -> Settings -> Personal access tokens -> Token (classic) 創建新的 token,並勾選 scope repo, user

接下來,到倉庫 vincent97277 -> Settings -> Secrets and variables -> Actions 創建以下 repository secrets:

  • WAKATIME_API_KEY: WakaTime Token
  • GH_TOKEN: GitHub Access Token

回到 vincent97277 本地環境:

  • 修改 README 檔,加入以下字段:
    1
    <!--START_SECTION:waka-->
    2
    <!--END_SECTION:waka-->
  • 新增 .github/workflows/waka-readme.yml 檔案,加入以下內容:
    1
    name: Waka Readme
    2
    3
    on:
    4
    schedule:
    5
    # Run at 12am UTC
    6
    - cron: '0 0 * * *'
    7
    workflow_dispatch:
    8
    jobs:
    9
    update-readme:
    10
    name: Update Readme with Metrics
    11
    runs-on: ubuntu-latest
    12
    steps:
    13
    - uses: anmol098/waka-readme-stats@master
    14
    with:
    15
    WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}
    5 collapsed lines
    16
    GH_TOKEN: ${{ secrets.GH_TOKEN }}
    17
    SHOW_PROJECTS: "False"
    18
    SHOW_LINES_OF_CODE: "True"
    19
    SHOW_LOC_CHART: "False"
    20
    LOCALE: "en"
  • 提交更改並推送到倉庫,完成設置
  • 到 Github -> Actions -> 選擇 Waka Readme,手動執行 workflow

你可以到 Flags Available 查看該 action 有什麼 Flag 可以用。

成果

Github Profile - vincent97277 是不是專業多了

What’s next

更強大的 readme stats 項目

我有找到一個很多星星的項目 github-readme-stats。 看起來這個項目有更多選項可以設置,可以更加自由的修改內容,甚至可以部署在自己的 Vercel app 以獲得更加即時的更新(Github Workflow 不保證 Cronjob 會即時執行),但就目前的內容已經夠我使用。在這裡紀錄一下,之後如果有新的需求會考慮從這個專案入手。

自建 WakaTime 資料庫

由於 WakaTime 只提供付費使用者查看超過 14 天的資料。如果暫時不付費的情況下,可以直接使用 api 查詢,也可以使用其他人搭建的 Dashboard 解決方案,如 superman66/wakatime-dashboardzzwtsy/wakatime-dashboard-vue。這個項目待未來實作,有興趣的可以參考這篇

參考

Footnotes

  1. Github 驗證:

    • 下載並安裝 Github CLI
    • 使用指令 gh auth status 確認權限,若沒有登入,執行下一步
    • 使用指令 gh auth login 依照指示完成登入
本文標題:製作獨特的 Github Profile、用 WakaTime 紀錄你的日常
文章作者:Vincent Lin
發布時間:2024-03-28