寫在前面
不知在什麼時候起，Github 支援建立同名倉庫來達到美化 Github 主頁的功能, 關注的很多大神也自己設計開發了自己的主頁，很有特點，今天就為大家帶來 Github 個性主頁如何開發~
更多文章在我的Github及個人公眾號【全棧道路】上，歡迎觀賞【前端知識點】，如有受益，不要錢，小手點個Star
閱讀本文您將收穫
- 如何進行個性化Github個人主頁建立
- 如何美化Github個人主頁
下方先放上個人 Github 主頁 ，筆者是球迷，所以主頁也是按照個人興趣喜好來設計的，如果和您審美有差距，請直接關閉。若有幫助，請記得三聯哦~
開發
建立 Github 倉庫
- 在 Github 中建立與個人 ID 同名的倉庫
- 記得勾選下方「Add a README file」，倉庫會自動建立
readme檔案，我們需要設計的個人主頁，就需要在這個檔案中進行開發。readme檔案為MarkDown格式，開發時可以使用HTML+CSS或MarkDown語法相結合，可以實現更多的個性化樣式。
- 建立倉庫後你就可以得到一個預設的
Hi there主頁資訊，現在我們只需要修改readme檔案就可以進行個人主頁美化啦~
編輯 readme 檔案
預設的 readme 檔案僅僅有一些基礎介紹，我相信大多數開發者都是不滿足於此
readme檔案使用MarkDown語法進行編寫，當然你可以使用MarkDown結合HTML語言進行編寫，這樣生成的readme檔案風格多樣。
個性化設計
我們在很多大佬的 github 個人主頁中經常能看到各種個性化的主頁徽章或統計，那這些個性化的圖表、統計、徽章都是怎麼生成的，接下來我就為大家提供一些自己在開發主頁過程中用(bai)到(piao)的小元件。
Github 徽章
- 大佬文章中經常使用到的這種
badge(徽章) ，其實都是一個個的SVG圖片進行處理的，只需要通過shields.io 就可以自定義生成自己需要的badge。 - 在網站下方的
YOUR BBADGE中就能自定義badge，填寫相關資訊之後，點選Make Badge就能獲得badge的圖片地址。
- 網站還支援自定義複雜
badge,可以實現新增icon等功能，感興趣就去試一下吧~
Github 統計
Github 有很多動態生成的官方統計資訊，利用這些統計資訊我們可以更清晰地展現個人 Github 中的提交、分類、熱門等資訊。
- GitHub Readme Stats 官方中文文件可以讓你更快速地設定自己的主頁，只需要將圖片連結地址寫入readme檔案中，你就可以設定這些多彩且豐富的資訊卡片
- 我在我的個人主頁中用到的三個統計圖片分別是
// github - stats
https://github-readme-stats.vercel.app/api?username=programmer-zhang&theme=dark&show_icons=true
// most - used-language
https://github-readme-stats.vercel.app/api/top-langs/?username=programmer-zhang&layout=compact&hide=html&theme=dark
// total - contribution
https://github-readme-streak-stats.herokuapp.com/?user=programmer-zhang&theme=highcontrast
複製程式碼
Github Icon
善於利用
Icon可以讓我們的Github主頁更加簡潔，同時圖示是個國際公用的語言，很多工具和框架相比文字描述，使用圖示更加一目瞭然，這裡我將提供一些我自己使用的圖示，這些圖示同樣都是 svg 圖示，如有需要請自取，點個贊就行~
- 圖中我使用的圖示地址都在我的
Github中，請點選這裡自取，programmer-zhang
Github Emoji-cheat-sheet
很多情況下，文字並不能完美表達我們的意思，所以加上些
Emoji表情能夠更傳神地表達意思，這部分為大家帶來能夠輕鬆在Github中使用的Emoji表情。
- 全部的
Emoji-chat-sheet圖示都在後面這個網址中，emoji-cheat-sheet 提供了很多Emoji表情，使用方式也特別的簡單粗暴，直接將Emoji後面的標識複製在MarkDown檔案中即可，提交到遠端後，在網頁中預覽就能看到表情了。
寫在最後
如果你覺得這篇文章對你有益，煩請點贊以及分享給更多需要的人！
歡迎關注【全棧道路】及微信公眾號【全棧道路】，獲取更多好文及免費書籍！
有需要【百度】&【位元組跳動】&【京東】&【猿輔導】內推的也請留言哦，你將享受VIP級極速內推服務~
