Git個人網站完整攻略

當前越來越多的大牛轉戰GitHub的時候，我們也應該考慮搭建自己的一個Blog來記錄自己的學習和成長經歷了。

• 一則，作為未來的碼農是需要自己與國際，至少是與主流的程式碼託管相接觸的。

• 二則，我想自己在校的時光也許需要重新好好的珍惜一下來之不易的生命中可能最閒暇的時光了，雖然是8:00-23:30的長時間的學習。但是心沒有疲憊…

• 其實為什麼網上有那麼多的教程還是想自己寫一下呢？ 可能只是記錄自己的不容易和自己的堅持到底，最重要的是獲取知識的來源和獲取的渠道，當然這花了我不少的時間去弄明白這些問題。

• 最終的效果如圖：

GitHub網站搭建前篇

軟體的配置&基礎知識的瞭解.

安裝Git和node.js

我們要明確藉助的平臺是GitHub的免費網路空間，以及建站所必須要藉助的建站工具。

• 首先我們需要註冊一個GitHub的賬號，進入https://github.com/進行註冊，建議使用自己最常用的郵箱。
• 之後，去百度一下獲取git工具，選擇自己的電腦平臺版本，linux以及各種發行版，很可能由於站點更新，使用sudo install 無法進行安裝，需要更新站點列表方可，但是由於站點的不穩定，我試過很久也是沒有成功獲取git工具的，但是在windows平臺上還是很好用的，window連線地址
  https://git-scm.com/download/gui/win。
• 之後需要一個node.js的軟體，安裝完成之後。自己在dos視窗下輸入命令列檢視，如下所示：
  
  目的是保證自己的安裝時成功的，也不需要配置什麼環境變數之類的。

/*命令列為：*/
git --version
node --version

• windows使用者特別提示安裝markdownpad2，並且啟用。具體可以檢視https://jingyan.baidu.com/article/380abd0a1c856d1d90192cd9.html。
• 特別提示：請選擇格式為common mark格式，並且嚴格遵守格式編寫文件，因為hexo解析格式非常苛刻，否則會亂碼。
• 選擇格式如圖描述：

利用Hexo工具搭建部落格

• Hexo是當前相對比較成熟的搭建部落格軟體，我們利用它搭建會極大的節省自己的時間花費。
• 比如我們可以在桌面新建一個檔案下，比如：GaoMingBlogV0.0.1，這也是我比較喜歡的方式。然後進去該資料夾，之後，右鍵進行如下操作：，點選進入。

/*一行一行執行*/
npm install hexo-cli -g --save
hexo init
npm stall
hexo g
hexo s

具體步驟和解釋如下：

• 在該視窗中輸入：

npm i hexo-cli -g --save

當然這個利用node.js安裝hexo的命令列有多種方式，比如hexo-cli可以使用hexo代替，–save可以為–save-dev，g引數與save可以調換位置等等。但是我建議使用標準的這種格式去安裝hexo。

• 繼續視窗中輸入：

hexo init	# 作用是初始化建立一個網站框架，模版是用的自帶的hexo的landscape模版。
npm install  # 初始化外掛，該步驟不建議省略，但可以略過.

• 此時的目錄結構

_config.yml # 站點配置檔案
package.json # 外掛檔案記錄/依賴的外掛集描述.
scaffolds # 腳支架資料夾，記錄建立檔案模版格式資訊.
source	# 網頁檔案
   ├──_drafts # 文章草稿
   └──_posts # 文章，預設新建的文章都是在這個資料夾下.
themes # 主題.

• 繼續利用hexo s啟動伺服器。

# hexo g 目的是為了將markdown檔案解析成靜態的html檔案，我們本地可以略過，也可以不略過。
hexo s # 啟動hexo自帶的網站本地伺服器，預設為http://localhost:4000
hexo s -p 8000 #如上，此處修改埠號8000.

• 如圖所示
• 在當前的git視窗，快捷鍵Alt+F2可以調出建立一個與當前視窗一樣的新視窗.
• 最後一步在本地瀏覽器-必須是高階瀏覽器，個人推薦使用googl的chrom瀏覽器進行如此的網站瀏覽。
• 當前網站的效果：

hexo主題更換和設定&三方外掛

hexo主題的更換

• 我想大多數人都是都不太喜歡預設的landscape主題，所以更換需要，是必須的。具體操作如下：
• 第一步：利用git工具克隆next主題:

git clone https://github.com/iissnan/hexo-theme-next themes/next

• 第二步：利用站點_config.yml檔案，區別於主題_config.yml檔案，open with markdown，將theme： landscape配置選項改為theme: next!
• 
• 第三部重新整理http://localhost:4000/即可檢視到新的主題。若只有框架，而沒有渲染的效果，請按照具體提示修復。
• 以下我給出我的一個修復步驟：
  • 第一步：一般這種情況都是網路不穩定，資料過來異常出現問題的，所以Alt+F2再開一個視窗，npm init重新試一遍，最常見的就是外掛出現問題，可以使用npm映象，臨時使用方法：帶npm開頭的命令列最後新增：

  --registry=https://registry.npm.taobao.org行.
  比如:npm i node-renderer --save --registry=https://registry.npm.taobao.org
  

  • 可能存在外掛最新版本無法再伺服器中直到，但是又自動獲取不了具體的某可用版本，故而可能需要帶版本號安裝。
  • 我個人正常執行的外掛包資訊–儲存在站點根目錄的package.json資料夾下，如下：
  • 
  • 帶外掛包版本安裝格式以hexo-renderersass的0.3.2舉例：

  npm i [email protected] --save --registry=https://registry.npm.taobao.org
  

  • 若不成功，多數是網路的問題，建議多試幾次。直到最後一行提示如下，則表明成功：

  [email protected]
  

  • 若還是不成功，請繼續嘗試：

  npm i node-sass --save --registry=https://registry.npm.taobao.org
  

  • 本人就是由於網路的問題不知道重複了多少次，不知道原因，教程也沒有說，重複多次驗證的。
  • 若還是不成功請刪除站點資料夾，重新建立一個家世以上步驟。
  • 分享我的被網路坑的經歷-masspassant，目前已經成功，我問了妹子喜歡哪個，妹子覺得next好一點，故而maupassant作為我的B計劃被我壓縮放百度雲盤：
  • step1：提示載入不到hexo-renderer-sass,但是實際上我是安裝，並且成功提示的。
  • step2:利用bing在js論壇裡找到需要重新安裝hexo-sass最新版.
  • 以為網路問題多執行了幾次，確定網路故障排除，開始執行提示的修復npm，然後成功檢測出了hexo-renderer-sass.
  • 完成。
• Tip： 保證每一步必須正確，才能繼續走，錯到懵逼了，請直接刪除，重新來過。

網頁配置高階篇

• 參考連結一：https://www.jianshu.com/p/21c94eb7bcd1
• 參考連結二：https://www.jianshu.com/p/344cf061598d
• 終結版,參考Hexo官方文件https://hexo.io/zh-cn/docs/
• 終結版，參考Next文件http://nextjs.frontendx.cn/

網站的釋出和網站的原始碼上傳到github

由於本人實在懶散，外加還有許多書需要看，所以有以下溫馨提示

• 進入自己的github主頁之後，務必將自己名字改為自己的常用id，比如：LiMing，並且配置SSH key，可以百度，本人給明簡要卻完整的步驟.
• 登入進入個人主頁：
• 
• 
• 點選setting進入個人簡介設定：
• 設定名字如：LiMing，切記再點選Update profile.
• SSH配置如下：
• 
• 
• 
• 點選兩次generate-生成按鈕
• 複製好該段，建議自己手動點選複製，不要使用Copy To Clipboard。
• 
• 站點部署那裡以上兩作者沒有講述明白，導致的是本地有效果，上傳無渲染效果，僅有框架，所以請開啟站點配置檔案_config.yml
• 我們假設名字叫做LiMing相關資訊配置為：
• 
• 

請在自己GitHub上建立一個庫，Repositories名字叫做LiMing.github.io,這是我們的blog生成的網頁，是通過hexo命令列部署的:

hexo g && hexo deploy

部落格原始碼，就是用來生成blog的原始碼我們如果也要儲存在GitHub上怎麼辦？

• 在blog上隨便建立個庫：MyBlogSource
• 如圖設定，因為我們需要儲存自己的依賴外掛，所以不要ignor…
• 點選：Greater repository.
• 之後利用git bash就是上面安裝的git工具克隆下來，把MyBlogSource裡面的.git,LICENSE等複製到我們部落格檔案根目錄下 覆蓋複製即可。
• 之後配置好id+郵箱：

git config user.name "LiMing"
git config user.emal "[email protected]" //假設你註冊設定的郵箱為：[email protected]
git add . //第一次很慢，第二次之後就很快了，因為是同步。
git commit -m "StoreModel!"
git push origin master

• 若是你想用以前的.git資料夾，只需要把其中的config修改一下即可，如：

總結

• 需要自己慢慢的體會其中的細節問題，因為所有的大的框架百度都有，但是小細節問題我想，就是我們失敗甚至於放棄的原因，這篇文章我破例開啟評論，不懂可以追問。

更新github全家