7 min read 按此留言

如何製作一份獨特創意的Github Profile?

如何製作一份獨特創意的Github Profile?

嗨大家好,延續上一篇透過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
新增Github Repository

注意!紅色方框的repository 名稱,要跟你Github 帳號名稱一樣, 這樣就會判定是一個Github Profile的專案。才可以將這一份的README.md檔案顯示在你的Github Profile上。像我這邊就必須輸入"steven130169"。
下方的「Add a README file」,記得要打勾。
新增Repository 完畢後,會呈現類似下圖的畫面。在畫面的右方,會呈現一個綠色區塊,告訴你說" is a special repository." 這才代表成功。如果沒有呈現的話,代表你的repository 名稱沒有與你的帳號相同。

Github Repository README
Github Repository README

步驟2. 編輯Github Profile

完成之後,點擊「Edit README」。

Github Profile Edit README
Github Profile Edit README

進入編輯頁面。

Github Profile 編輯頁面
Github Profile 編輯頁面

在編輯完成之後,記得要按下commit,這樣才代表儲存完畢。

Github Profile commit
Github Profile commit

步驟3. 確認編輯後的Github Profile

在網址列輸入:https://github.com/你的帳號名稱
Example: https://github.com/steven130169
確認一下,完成後的結果如何嚕。

Github Profile Page
Github Profile Page

Wakatime 嵌入教學

我們將透過waka-readme-stats,這個open source專案,讓我們的Profile可以呈現精美的每週開發時間分配的圖表。不過,首先還是要讓你的wakatime,有記錄這樣在嵌入的時候才會有感覺。歡迎參考: >> wakatime 介紹
Github Profile 呈現如下圖

wakatime readme stats
wakatime readme stats

步驟1. 在你的readme.md 標記要呈現wakatime的區域

在希望wakatime呈現的地方,加入以下程式碼。並且儲存。

<!--START_SECTION:waka-->
<!--END_SECTION:waka-->

步驟2. 新增Github Action

點擊剛剛新增的Github Profile Repository > Action

點擊 Github Action
點擊 Github Action

接著點擊 new workflow > set up a workflow yourself > 進入編輯workflow 畫面
紅色區塊,輸入你的檔案名稱例如:wakatime-workflow.yml

編輯workflow
編輯workflow

步驟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 workflow

並且複製貼上到程式碼編輯的橘色區域。
當中的「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
設定Wakatime API Key

設定完成之後,記得點擊「Add secret」儲存。

步驟5. 嘗試觸發Workflow 驗證是否成功

回到Github Action workflow
點擊剛剛新增的workflow 檔案 > 點擊 run workflow

wakatime run workflow
wakatime run workflow

Github workflow 成功完成後,就可以回到你的Github Profile,確認一下呈現的效果。

定時更新部落格文章嵌入教學

接著跟大家分享另外一個Github Profile Workflow,讓你的Github Proflie 可以定時更新,放上你最新的部落格文章連結。如下圖紅色區域

更新Github個人部落格
更新Github個人部落格

使用的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 的工具


如果這篇文章帶給你很多收穫,歡迎請我喝杯咖啡>> 立即贊助🤗
支持我可以持續的創作。

歡迎在0 Comments按個愛心,並且按下「訂閱」這樣就可以每週收到我的即時電子報!
有任何問題,也歡迎在留言區留言。

你還可以許願,花個5分鐘幫我填寫下問卷,讓我知道你更喜歡什麼樣類型的文章!!!
問卷網址如下https://forms.gle/iVmPmnvJW22bpxbc8