阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

如果您是 GitHub 新手或主要使用私人 GitHub 儲存庫,那麼您可能還沒有 GitHub 個人資料。

GitHub 個人資料有助於為存取您個人資料的人提供基本資訊。擁有良好的個人資料甚至可以幫助您脫穎而出,尤其是當您開始為開源專案做出貢獻並且人們開始注意到您時。

在本文中,我將展示如何建立您自己的 GitHub 設定檔。我還將分享從哪裡獲得個人資料的靈感。最後,我將分享資源和技巧,幫助您建立出色的 GitHub 個人資料!

建立您的 GitHub 個人資料

在開始自訂 GitHub 個人資料之前,您首先需要建立一個。

這是一個簡短指南來自 GitHub,了解如何設定您的個人資料。

但您需要做的就是:

  • 建立一個新的儲存庫,與您的 GitHub 使用者名稱相同。

  • README.md 檔案新增至您的新儲存庫。

例如,我的 GitHub 使用者名稱是 kshyun28。要建立我的個人資料,我需要建立一個也名為 kshyun28 的儲存庫,然後新增一個「README.md」檔案。

範例 GitHub 設定檔儲存庫

設定「儲存庫」和「README.md」檔案後,透過前往您的 GitHub 個人資料(網址為 https://github.com/YOUR-USERNAME )來驗證您的個人資料是否可見。

就我而言,它將是 https://github.com/kshyun28

自訂您的 GitHub 個人資料

現在您已經有了 GitHub 個人資料,是時候發揮創意了!

這裡的關鍵是讓你的個性在你的個人資料上展現。你的 GitHub 個人資料不必像 LinkedIn 那樣太正式。

我還建議從簡單開始。這有助於您的 GitHub 設定檔啟動並執行。當您有新想法時,您可以隨時改進您的個人資料。

GitHub 風格的 Markdown、格式和 HTML

為了自訂 GitHub 設定檔的“README.md”,您將使用 GitHub Flavored Markdown。如果您以前寫過 Markdown 內容,那麼格式化對您來說應該很容易。

如果你是第一次用Markdown 寫作,你可以去GitHub 的文件 來熟悉可用的格式化選項。

您也可以使用 HTML 作為您的個人資料的其他格式選項。

我發現以下 HTML 標記很有用:

  • 不間斷空格:nbsp;

  • div 居中對齊:<divalign="center"></div>

您可以使用大多數 HTML 標籤,但 GitHub Flavored Markdown 會過濾掉以下 HTML 標籤:

  • <標題>

  • <文字區域>

  • <樣式>

  • <xmp>

  • <iframe>

  • <無嵌入>

  • <無框架>

  • <腳本>

  • <明文>

💡:要了解更多訊息,請參閱與 HTML 區塊相關的 GitHub Flavored Markdown Spec

尋找靈感

為了幫助您入門,我建議您查看其他很棒的 GitHub 設定檔以獲取想法。你可以造訪 awesome-github-profile-readme,我在製作個人資料時找到了靈感。

由於設定檔是開源的,您可以將一些好主意用於您的精彩設定檔!

您也可以查看我的個人資料以獲取一些想法。 😉

新增徽章

要為您的個人資料加入徽章,您可以查看 markdown-badges。該存儲庫有多種徽章可供選擇,從程式語言到 Netflix 等串流平台。

如果您找不到所需的內容或想要建立自訂徽章,可以前往 shields.io,這就是 markdown-badges 使用。

這是我在個人資料中使用 markdown-badges 的範例。

Markdown 徽章範例

新增圖標

要在您的個人資料中加入“技能”或“技術堆疊”部分,我建議使用 skill-icons,它提供漂亮的圖標。

如果您的圖示不受支持,您可以造訪 simpleicons,其中包含超過 2900 個流行品牌的 SVG 圖示。

這是一個範例,我在個人資料的技術堆疊部分使用了 skill-icons

圖示範例

使用表情符號

在 GitHub Flavored Markdown 中,您可以使用表情符號。要查看支援的表情符號的完整列表,您可以存取此 emoji-cheat-sheet

如果您想自己取得支援的表情符號列表,可以使用 GitHub 的 Emoji API

在瀏覽器上造訪 https://api.github.com/emojis 應該會顯示所有支援的表情符號的 JSON 回應。

{
  "+1": "https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8",
  "-1": "https://github.githubassets.com/images/icons/emoji/unicode/1f44e.png?v8",
  "100": "https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png?v8",
  "1234": "https://github.githubassets.com/images/icons/emoji/unicode/1f522.png?v8",
  "1st_place_medal": "https://github.githubassets.com/images/icons/emoji/unicode/1f947.png?v8",
  "2nd_place_medal": "https://github.githubassets.com/images/icons/emoji/unicode/1f948.png?v8",
  "3rd_place_medal": "https://github.githubassets.com/images/icons/emoji/unicode/1f949.png?v8",
  "8ball": "https://github.githubassets.com/images/icons/emoji/unicode/1f3b1.png?v8",
  ...

這是我在個人資料中使用表情符號的範例。

表情符號範例

新增 GitHub 統計訊息

要為 GitHub 活動加入卡片和統計訊息,我建議使用 github-readme-stats。您可以使用不同的版面配置和主題自訂統計卡。

以下是我將 GitHub 統計資料新增至我的個人資料的範例。

GitHub 統計資訊範例

新增引號

在您的個人資料中加入隨機引用可以為訪客增添一抹亮色。我發現 github-readme-quotes 對於這樣做很有用。

這是我的個人資料上的樣子。我個人喜歡加入引號,為我的個人資料訪客提供一些價值。

報價範例

提高可存取性

自訂您的個人資料時,請確保它可供盡可能多的人查看。並非每個人都可以查看或載入圖像。有些人有殘疾,而有些人的網路連線速度很慢。

提高個人資料的輔助功能的一種方法是向圖像加入描述性「替代文字」。

<!-- Markdown Image -->
![Image Alt Text](image-source)
<!-- HTML Image Tag -->
<img alt="Image Alt Text" src="image-source" />

然後,要測試您的個人資料的可存取性,您可以嘗試停用網頁瀏覽器上的圖像載入。這是有關如何停用 Google Chrome 映像載入的指南

這是我的個人資料在 Google Chrome 上停用圖片載入後的樣子。

GitHub 設定檔可存取性範例

更多想法

要為您的個人資料加入更多資訊圖表,我建議查看 metrics。這是 GitHub 上最受好評的存儲庫之一,其中包含“github-profile”主題,因此我不能忽略它。

然後我發現了這個漂亮的資源 beautify-github-profile,在這裡您可以找到更多自訂個人資料的方法。

如果您也喜歡冒險,可以在此處探索「github-profile」主題。預設情況下,儲存庫會按星數排序。

請隨意探索有「github-profile」主題的儲存庫。您甚至可能會發現那些使用頻率不高但正是您所需要的。

GitHub 簡介 成就

雖然這與自訂 GitHub 設定檔的「README.md」無關,但我覺得有必要包含它。

如果您前往 GitHub 個人資料,您會注意到左側邊欄上有一個「成就」部分。

GitHub 個人資料成就

收集這些成就很有趣,並且可以改善您的整體 GitHub 檔案。

要了解有關可用成就以及如何獲得這些成就的更多訊息,請查看 GitHub 個人資料成就列表

結論

回顧一下,我們演練如何建立 GitHub 個人資料。然後我展示瞭如何使用 GitHub Flavored Markdown 和 HTML 格式化您的個人資料。之後,我分享了您可以從哪裡獲得個人資料的靈感。最後,我提供了有關如何自訂個人資料的提示和資源。

我希望這可以幫助您製作精彩的 GitHub 個人資料。我很想看看你能想出什麼辦法!

感謝您的閱讀,請隨時發表評論或與我聯繫此處


原文出處:https://dev.to/kshyun28/how-to-make-your-awesome-github-profile-hog


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈