Hexo+GitHub博客搭建實戰

更多請看：

為什麼要自建博客？www.zhihu.com

第二個問題：為什麼選擇Hexo+GitHub？

首先，成本低。

不需要自己購買伺服器或者虛擬主機，取而代之的是使用GitHub-Pages提供的免費空間，對於寫技術博客綽綽有餘。

不需要自己購買域名，Github默認提供形如username.github.io的域名。當然，也可以使用購買的域名，操作也是非常簡單，之後的文章會提到。

如果你是一名學生，那麼只有兩個字形容Hexo+GitHub：完美！

其次，門檻要求低。

縱觀本篇教程，實現簡單；如果某個步驟出錯了，百度或者google都能找到解決方案，當然也歡迎評論反饋。

那麼就準備正式開始吧。

在搭建博客之前，我們首先需要先完成本地環境的搭建工作。

搭建環境

1、安裝 Node.js: https://nodejs.org/en/

windows下點擊鏈接，下載安裝即可;Linux下更加簡單，在終端下輸入sudo apt-get install nodejs即可。

2、安裝 Git: https://github.com/waylau/git-for-win

windows下點擊上述鏈接安裝即可；Linux在終端輸入sudo apt-get install git即可。

詳細教程可參考廖雪峰老師的Git教程： https://github.com/waylau/git-for-win。我也寫了個Git的簡易入門教程，鏈接：Git入門使用指南。

本篇教程中不涉及太多Git的操作，因此無須觀看Git相關教程也可輕鬆完成搭建。

3、安裝完成後，在開始菜單里找到「Git」->「Git Bash」，按下圖設置，名稱和郵箱是Github上的。

4、安裝Hexo。所有必備的應用程序安裝完成後，即可使用 npm安裝Hexo。

$ npm install -g hexo-cli

至此，本地環境已經搭建完成。接著我們配置一下GitHub，主要操作為創建博客倉庫。

配置Github

首先註冊、登錄 https://github.com/ ，其中自己的Username很重要（之後的創建倉庫以及博客github.io域名會用到）。

然後右上角選擇 Create a new repository： https://github.com/new

其中倉庫名稱Repository name一項填寫格式為：yourname.github.io(yourname與你的註冊用戶名一致,這個就是你博客的域名了)

倉庫創建完成後，開始生成添加秘鑰。

在終端(Windows:cmd/Linux:Terminal)下輸入：

ssh-keygen -t rsa -C "Github的註冊郵箱地址"

一路Enter過來就好，待秘鑰生成完畢，會得到兩個文件id_rsa和id_rsa.pub，用任意文本編輯器打開id_rsa.pub，Ctrl + a複製裡面的所有內容，然後進入

將複製的內容粘貼到Key的輸入框，Title的內容可以隨意（比如ubuntu home），點擊Add SSH key按鈕即可。

若沒有配置GitHub，就執行第三步（初始化博客），會出現如下錯誤：

本地環境安裝了，遠程的GitHub倉庫也有了，此時我們可以專心在本地搭建博客啦。

初始化博客

在電腦F盤（自己隨意）目錄下新建文件夾test，進入test，按住Shift鍵點擊滑鼠右鍵，點擊「在此處打開命令窗口」：

輸入：

hexo init blog

稍微等待下，速度有點慢。成功提示：

INFO Start blogging with Hexo!

因為你初始化hexo之後source目錄下自帶一篇hello world文章, 所以直接執行如下命令:

$ hexo generate # 啟動本地伺服器 $ hexo server # 在瀏覽器輸入 http://localhost:4000/就可以看見網頁和模板了 INFO Start processing INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

在瀏覽器中輸入localhost:4000，便可以看到網站初步的模樣。不要激動，我們還要把網頁發布到Github上去。

通過上面的初始化博客的步驟後，我們在本地已經具有博客的雛形了。此時，只需要再稍加配置就可以部署至遠程的GitHub了呢。

配置博客

在blog目錄下，用sublime/notepad++等文本編輯器打開_config.yml文件，修改參數信息。

特別提醒，在每個參數的:後都需要有一個空格

修改網站相關信息

title: wangwlj的博客 subtitle: 積跬步以至千里！ description: 網頁描述 author: wangwlj language: zh-CN timezone: Asia/Shanghai

language和timezone都是有輸入規範的，詳細可參考 語言規範和時區規範。

配置部署

代碼中的qwerty200696，修改成自己的。

deploy: type: git repo: https://github.com/qwerty200696/qwerty200696.github.io.git branch: master

branch是項目的分支，我們默認用主分支master。

此外，可將_config.yml中的repo修改為如下標準格式：

repo: https://用戶名:密碼@github.com/用戶名/用戶名.github.io.git

這樣做的好處就是每次hexo deploy提交時不需要輸入賬號密碼。

配置統一資源定位符

如果有個人域名的話可以設置，否則跳過即可。如果是github.io的網址，也是可以填上的。

url: https://qwerty200696.github.io

對於root（根目錄）、permalink（永久鏈接）、permalink_defaults（默認永久鏈接）等其他信息保持默認。

上述配置博客中的配置部署部分，將本地博客與遠程的倉庫地址緊緊聯繫在了一起。當然，之前配置GitHub時的SSH也是同樣的作用，二者缺一不可。讓我們再回顧一下發表文章的流程吧。

發表文章

1.新建一篇博文，在CMD中輸入:

$ hexo new "我的測試文章"INFO Created: F: estlogsource\_posts我的測試文章.md

2.根據上述提示路徑找到該文章，打開，使用Markdown語法編輯文章。

該語法介紹可以查看：Markdown 語法說明 (簡體中文版)

在文章的一開始處，可以按如下格式添加文章標題，日期，分類、標籤以及描述等。

--- title: title #文章標題 date: 2017-09-08 23:47:44 #文章生成時間 categories: "Hexo教程" #文章分類目錄 可以省略 tags: #文章標籤 可以省略 - 標籤1 - 標籤2 description: #你對本頁的描述 可以省略---

3.接著在blog目錄下，輸入如下的一系列(三個)命令：

F:testblog$ hexo cleanINFO Deleted database.INFO Deleted public folder.$ hexo generateINFO Start processingINFO Files loaded in 1.48 s#省略INFO 29 files generated in 4.27 s$ hexo serverINFO Start processingINFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

打開http://localhost:4000/，可以在本地預覽網站的初步樣子。

最後一步，發布到遠程，執行hexo deploy：

F: estlog $ hexo deploy INFO Deploying: git INFO Clearing .deploy_git folder... INFO Copying files from public folder... #省略

執行hexo deploy時如果出現錯誤，請到文末查看具體解決方案。

正常情況下，會跳出Github登錄，直接登錄；如果沒有問題，在瀏覽器輸入博客地址： http://qwerty200696.github.io。

然後就可以看到已經有內容了。（有可能稍有延遲）

其中的hexo deploy是新命令哦，它與hexo server的區別在於：hexo server可以在本地實時預覽，hexo deploy是將本地的改動同步到GitHub遠程倉庫。

最後再來簡單地總結一下吧。

總結

發布文章的步驟：

1、hexo new 創建文章(當然也可以通過其他方式手動創建Markdown文件)

2、Markdown語法編輯文章

3、部署（所有打開CMD都是在blog目錄下）

hexo clean #清除緩存 網頁正常情況下可以忽略此條命令hexo generate #生成hexo server #啟動服務預覽，非必要，可本地瀏覽網頁hexo deploy #部署發布

其中的部分命令可以簡寫：

1. hexo n 「我的博客」 == hexo new 「我的博客」 #新建文章
2. hexo g == hexo generate # 生成
3. hexo s == hexo server # 啟動服務預覽
4. hexo d == hexo deploy # 部署

到此為止，相信你已經對博客的整體流程有了一定的把握，想要對博客進一步優化嗎？

歡迎進入博客優化篇：

Hexo搭建的GitHub博客之優化wangwlj.com

出錯匯總

安裝hexo時出錯

unable to verify the first certificate（無法驗證第一證書）

查找到解決方案：

參考網址：npm報錯

依據解決方案所述，在命令行輸入如下命令，來取消ssl驗證：

npm config set strict-ssl false

之後安裝就會成功了，顯示如下：

hexo deploy出錯之一

deploy not found： git

解決方案：執行如下語句後， 再部署即可：

npm install hexo-deployer-git --save

參考自：https://www.v2ex.com/t/175940

hexo deploy出錯之二

安裝完成之後的第x天，同步文章到github時，即運行如下命令：

hexo deploy

fatal: unable to access https://username:password@github.com/username/username.github.io.git/: SSL certificate problem: unable to get local issuer certificate FATAL Somethings wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html Error: fatal: unable to access https://username:password@github.com/username/username.github.io.git/: SSL certificate problem: unable to get local issuer certificate at ChildProcess.<anonymous> (D: estlog2
ode_moduleshexo-utillibspawn.js:37:17) at emitTwo (events.js:106:13) at ChildProcess.emit (events.js:191:7) at ChildProcess.cp.emit (D: estlog2
ode_modulescross-spawnlibenoent.js:40:29) at maybeClose (internal/child_process.js:920:16) at Process.ChildProcess._handle.onexit (internal/child_process.js:230:5)

解決方法：執行如下語句：

$ git config --global http.sslVerify false

參考自：git獲取代碼提示SSL certificate problem: unable to get local issuer certificate

參考自： hexo提交報錯 unable to access

之後再次運行發布指令hexo deploy，終於成功：

參考文獻

1. 教你免費搭建個人博客，Hexo&Github
2. hexo生成博文插入圖片

推薦閱讀：