定製你的GitHub主頁

前言

昨天花了點時間，美化了下的個人GitHub主頁和我的網站首頁，本文就跟你們分享下個人實現過程，歡迎各位感興趣的開發者閱讀本文。

在線體驗

先跟你們展現下我最終實現的效果，在線體驗地址：我的網站首頁、GitHub主頁。

效果圖以下所示：

實現過程

接下來，咱們來看下具體的實現過程（爲了方便起見，下屬過程演示用的是個人小號）

建立倉庫

首先，登陸你的GitHub帳號：

• 登陸後，建立一個和你用戶名相同的倉庫，以下所示。

• 填寫倉庫介紹、設置公開權限、添加README.md文件

• 最後點擊 Create repository按鈕，便可完成倉庫建立。

界面美化

咱們建立完倉庫後，進入本身的我的主頁，即：github.com/你的用戶名。

咱們能看到的頁面以下所示，紅框圈起來的部分就是咱們剛纔建立倉庫的README.md文件裏的內容。

建立倉庫時，默認在README.md文件裏添加了：Hi there 👋。

所以，咱們只須要修改咱們剛纔建立的倉庫中的README.md文件中的內容，咱們的主頁內容就會跟着更新。

• md文件中是支持html語法的，所以咱們能夠按照本身的想法去設計頁面。

• 因爲考慮到讀者程序員居多，設計靈感並非豐富，社區中有個開源倉庫整理了一些比較好看的md主頁設計，你們能夠參考這些內容CV過來，修改修改就是本身的了，倉庫地址：awesome-github-profile-readme。

• 個人主頁設計中用到了項目展現卡片，這個也是個開源倉庫提供的，倉庫地址：github-readme-stats。

• 個人主頁設計中還包含了內容收縮效果，這裏用的是HTML5的<details><summary><summary/></details>標籤。

• 社區粉絲展現模塊，這裏我想實現的效果須要寫一些css樣式，可是GitHub不支持，所以這裏就只放了一張圖片。

提取美化完的界面

當我把本身的GitHub主頁美化完成後，我還想把這些效果搬到個人我的網站首頁去。一開始想着，找個markdown轉html的工具應該就行了，因而試了幾個在線轉換的，轉出來的效果都不理想。

我看了看美化後的整個GitHub主頁，越看越溫馨，有了一個念頭，我直接把整個主頁扒下來，改一改，這樣就完美的拿到了我須要的東西了🤓。

那麼，如何把這個網站的內容扒下來，我想你們應該都有本身的一套方法，這裏我說下個人方法吧：

• 右鍵 ---> 查看網頁源代碼
• 將源代碼複製到編輯器裏
• 把代碼中的外鏈所有下載下來，放到項目文件夾裏
• 替換外鏈爲項目文件夾引入
• 因爲扒下來的東西是html文件，所以能夠寫css樣式，粉絲列表也就能夠完美展示了。

最後，跟你們看下個人我的網站首頁界面（PC端和移動端）：

代碼地址

• GitHub主頁代碼地址
• 我的網站首頁代碼地址

寫在最後

• 文中若有錯誤，歡迎在評論區指正，若是這篇文章幫到了你，歡迎點贊和關注😊
• 本文首發於掘金，未經許可禁止轉載💌