hexo部落格搭建時遇到的一些問題

weixin_33763244發表於2015-09-06
Hexo

之前的WP部落格荒廢了好久之後終於感覺該做點正事了，所以這幾天花了點時間重新弄了下hexo，畢竟是比較符合前端的一個部落格框架。比起wp來說，hexo輕量級的多，而且易部署（指速度優化方面），也不需要一個專門的伺服器來放置（這個其實是我選擇hexo的最終原因。手裡雖然有vps，但是因為跑著ss加上國內ping值太高，最終肯定影響國內速度，所以就一直沒用來放blog）當然沒有後臺也就意味著不能隨時隨地寫了就發，這個相對WP來說是弱勢，但我感覺還好，畢竟不會常常在外面跑，而且寫部落格基本都是在電腦前，再不濟也可以先把MD檔案寫完後拷回去釋出。

先大概說下我目前blog的部署方式：

  • github和gitcafe雙線路部署，國內線路解析到gitcafe，國外線路解析到github。

  • 自己的域名且未備案（個人部落格不建議備案）

  • 域名解析採用dnspod國際版（這個很重要，後面會解釋）

  • 使用QQ的自定義域名郵箱

  • 圖片採用七牛儲存分流

  • 多說評論有一定優化（顯UA以及自定義樣式等）

然後下面說下我部署過程中遇到的部分問題以及相應的解決方法,由於我自己是Windows 7環境，所以下面很多解決方法可能對*nix黨不適用，還請注意。問題的排列按照最基礎的node安裝，git配置，域名配置，hexo安裝，hexo優化美化的順序來，不過會跳過很多可以直接百度到的內容，所以建議參考Hexo常見問題解決方案以及hexo你的部落格如果你遇到的問題我這裡沒提到的話，你可以去這兩篇文章搜下解決方案。

npm安裝hexo速度過慢

由於某些大家都知道的緣故，npm官方源在國內的下載速度極其慢，用官網的npm install hexo-cli -g速度非常感人，所以不推薦這種方式。這裡我推薦用淘寶的npm分流——cnpm
安裝過程很簡單：
npm install -g cnpm --registry=https://registry.npm.taobao.org
然後等著裝完即可，之後的用法和npm一樣，無非是把npm install改成cnpm install,但是速度比之前快了不止一個數量級(不過下文為了方便理解，還是會用預設的npm安裝，如果你發現速度不好的話，請自行替換成'cnpm')

npm安裝tips

  1. npm安裝的時候有時候會出各種錯，而最常見的無非是許可權問題、網路連線、包名輸錯。注意看cmd視窗的報錯資訊即可。
    windows黨請注意安裝的時候將cmd用管理員方式開啟（這個是我見過報錯最多的），想必npm ERR! Please try running this command again as root/Administrator.各位也不是第一次見了

  2. hexo外掛安裝的時候先cd到blog根目錄，並且安裝引數不要帶-g。 （即不要全域性安裝，因為全域性安裝的時候外掛會被裝到node的根目錄下去，而不是blog目錄），hexo的外掛需要在blog目錄下才能工作

  3. 有部分hexo外掛用普通的install可能會出現安裝完的版本和最新版本有區別，而且怎麼也升級不上去的情況(npm update無效)，這種情況下請手動指定版本安裝：
    語法：
    npm install [@<scope>/]<name>@<version>
    例子：
    npm install hexo@3.1.1 --save

git多網站ssh部署方案

因為是gitcafe和github多線路部署，加上不想每次更新的時候都輸帳號密碼，所以https傳輸肯定不行了，只能是ssh傳輸。不過大部分教程都是單網站部署。所以特地把這個單獨拿出來。建議參考gitcafe的這篇部署教程，一般人看完應該就不需要看我這底下的內容了，我這裡步驟都複製以上教程，僅對部分地方加點我個人感覺比較重要的註釋
git客戶端安裝的時候可以選擇要不要整合到cmd裡，有些人可能和我一樣沒有整合，導致cmd對部分linux下的命令無法解析（比如~)
強烈建議以下操作在git bash裡進行。不要在cmd裡敲git命令！
強烈建議以下操作在git bash裡進行。不要在cmd裡敲git命令！x2
強烈建議以下操作在git bash裡進行。不要在cmd裡敲git命令！x3
因為很重要所以說三遍

  1. 生成新的 SSH 祕鑰
    記得把以下命令中的 YOUR_EMAIL@YOUREMAIL.COM 改為你的 Email 地址
    ssh-keygen -t rsa -C "YOUR_EMAIL@YOUREMAIL.COM" -f ~/.ssh/gitcafe

上面最末尾的./ssh/gitcafe中的'gitcafe'即為存在本地的金鑰檔名，所以這裡是可 以自定義的。
金鑰檔案本地存放路徑為git的home引數對應路徑下的.ssh資料夾，一般是"C:/Users/[username]/.ssh"，如果沒有找到的話到git bash裡輸入$HOME回車然後自行 去對應目錄查詢即可

  1. 生成過程中會出現以下資訊，按螢幕提示操作，並記得輸入 passphrase 口令。

$ ssh-keygen -t rsa -C "YOUR_EMAIL@YOUREMAIL.COM" -f ~/.ssh/gitcafe
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/username/.ssh/gitcafe.
Your public key has been saved in /c/Users/username/.ssh/gitcafe.pub.
The key fingerprint is:
15:81:d2:7a:c6:6c:0f:ec:b0:b6:d4:18:b8:d1:41:48 YOUR_EMAIL@YOUREMAIL.COM

這將在 ~/.ssh/ 目錄下生成 gitcafe 和 gitcafe.pub 檔案，記住千萬不要把私鑰檔案 gitcafe 透露給任何人。

passphrase的作用是在金鑰傳輸的過程中加一個解金鑰的過程，使得即使金鑰檔案不小心洩露了，別人也不能直接利用金鑰操作你的git帳號，但是由於我個人處理不了ssh-agent自動填充的問題，導致每次更新git都要輸passphrase，所以我就沒加了，上面的過程裡是直接兩次回車過去了。

  1. 在 SSH 使用者配置檔案 ~/.ssh/config 中指定對應服務所使用的公祕鑰名稱，如果沒有 config 檔案的話就新建一個，並輸入以下內容：

Host gitcafe.com www.gitcafe.com
  IdentityFile ~/.ssh/gitcafe

由於是gitcafe和github雙站，所以這裡需要再參考上面的語法另外建立一個github的規則

  1. 新增 gitcafe.pub 中的內容到 GitCafe 網站。

    具體請參考[如何安裝和設定 Git](http://gitcafe.com/GitCafe/Help/wiki/%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%85%E5%92%8C%E8%AE%BE%E7%BD%AE%20Git)中的第三節。

  2. 最後測試配置檔案是否正常工作

ssh -T git@gitcafe.com
如果連線成功的話，會出現以下資訊。
Hi USERNAME! You've successfully authenticated, but GitCafe does not provide shell access.

對於這一步，我的建議是測試命令裡再加個-v引數,即

ssh -vT git@gitcafe.com

因為比起"ssh -T"返回的模糊資訊相比，"-v"會把整個傳輸過程中的操作都顯示出來，哪一步出錯很明顯就可以看出來，利於出現問題的除錯

  1. 完成

    測試通過後，你就可以使用獨立的一套公祕鑰來使用 GitCafe 了。Enjoy！

單域名多線路解析

這個解決方法來自v2ex的"wy315700",感謝指點
由於網站未備案，所以不能直接放在七牛上（不過如果全部放在七牛，也就失去了雙線路的部署意義，所以我個人感覺沒必要全站七牛)
先科普一些域名相關的小知識：

  1. 關於A解析和CNAME解析的區別：

A解析：只能填IP地址，IP地址如果換了的話就需要換解析記錄
CNAME解析：解析到另一個域名，即使被指向的域名的ip發生變化，也不需要更改解析記錄。CNAME優先順序高於A解析（至少在DNSPOD是這樣的）

  1. 域名的nameserver（一般簡稱"NS"）

nameserver的作用是指定域名的dns解析服務商，比如同時在萬網和dnspod給"www.a.com"做了解析，那麼哪個解析起作用，就是由NS來決定的。這個在域名註冊商的域名管理的裡可以更改。NS記錄建議只寫一個dns解析商的，多NS可能會有問題，可以參考這篇文章

DNSPOD國內版本目前只對國內線路做細分，沒有海外線路的選擇，所以不推薦，建議用dnspod的國際版

操作流程：

  1. 註冊dnspod國際帳號

  2. 域名服務商那裡更改ns記錄為dnspod國際版的nameserver，預設為

    a.dnspod.com.
b.dnspod.com.
c.dnspod.com.

  3. 在dnspod新增域名解析：

    先加一條cname解析國內線路給gitcafe，然後再加一條預設線路的cname給github即可完成雙線路解析

  4. github自定義域名需要在專案根目錄下新增一個CNAME檔案，檔案內容為自定義域名。CNAME檔案建立完之後扔到blog/source目錄下即可 (不能直接扔到public下，理由見下文)
    gitcafe需要在專案做設定，具體參考官方wiki

自定義域名郵箱

比如i@chitanda.me這種郵箱，目前我用的QQ的域名郵箱，免費，不過我這邊會遇到有時候gmail丟件的問題，所以準備看看過段時間轉zoho。
具體實現很簡單，就是域名解析里加條mx記錄，不做詳細解釋，可以參考QQ域名郵箱的幫助（由於通配的mx記錄和cname會有語法衝突，有些dns解析商是不支援這種寫法的，但是dnspod對語法要求不嚴格，可以這麼寫。所以這也是我推薦dnspod的另一個緣故）
另外有些域名服務商可能免費送了mail服務，也可以用自帶的那個。我由於域名註冊在name.com上，它們沒送，所以只能另外想辦法

hexo部署相關問題

首先需要明確一點，public目錄下的檔案每次'hexo -g'的時候就會被重新生成，所以不要往這裡面放任何東西，不然每次都要另外加。
而blog/source和blog/theme/[theme-name]/source裡的檔案是不會被另外處理的，所以有些需要新增在網站根目錄的檔案（如favicon，谷歌百度的站點認證檔案之類的）可以直接扔到這兩個資料夾底下，具體選哪個路徑要視情況而定

_config.yml編譯不通過

yml語法極度嚴格，不通過往往是空格問題，記得所有設定引數屬性末尾都要加空格

給網站新增favicon

這個和主題有關，預設可能沒有，瀏覽器開啟後根據開發者工具裡可以看到當前主題下'favicon'的具體路徑和要求檔案格式，對應做一個就可以了。有時候是'png'但也有時候強制要求'.ico'，可以去位元蟲d等網站線上製作。

github和gitcafe雙線路解析

安裝hexo-deployer-git的0.0.4版！
安裝hexo-deployer-git的0.0.4版！
安裝hexo-deployer-git的0.0.4版！
很重要所以說三次。我之前安裝的時候預設都是0.0.3版，哪怕其實0.0.4已經出來了。而即使是完全正常的配置，0.0.3版都會提示"fatal: Unable to create 'XXXXXX/.git/index.lock': File e
xists."（固定版本安裝辦法可以看上文）
檢視當前已安裝版本：

npm ls hexo-deployer-git

附正確配置：

deploy:
  type: git 
  message: "xxxxx"
  repo: 
    github: git@github.com:chitanda/chitanda.github.io.git,master
    gitcafe: git@gitcafe.com:chitanda/chitanda.git,gitcafe-pages

跟在","後面的是分支名字。注意傳輸地址應該是ssh格式的，不要弄成了https的地址

多說評論框自定義

其實從評論質量來說的話，disqus可能更好點（畢竟是gfw認證網站，相比多說門檻稍微高一點，可以過濾部分人群），不過拖累網頁載入速度，所以我就換成多說了。
多說樣式可以後臺自定義css，本站的多說css來自Next.Mist主題製作者的樣式
顯UA功能需要改多說的js，具體參考此文
單說"Next"主題下改完embed.js後需要做的事情：
"Next"主題內嵌多說，所以需要更改主題檔案:
開啟/themes/next/layout/_scripts/comments/duoshuo.swig，更改"embed.js"的檔案路徑即可。這裡我是把js扔到7牛上去了，你也可以直接放到主題裡然後更新到gitpage上去。

圖片資源利用七牛分流

由於git-page自帶空間只有300M，看起來部落格夠用了，但是總覺得憋得慌，對於全圖片直接扔上去這種事個人沒太大信心，所以決定圖片用七牛分流（雖然這樣某種意義上對雙線路部署的做法產生了消極影響，不過考慮到七牛的CDN速度以及資本主義國家的網速加上未雨綢繆的300M空間，最終還是決定圖片傳到七牛上去）

我最初的辦法是用hexo的一個外掛(hexo-qiniu-sync)

但是後來發現這個外掛效率不高，一開整個hexo的反應都慢了，而且最主要一點是失去了MD檔案的通用性，所以最終棄用該方法。
另外採用了一個本地同步檔案到七牛的外掛：qiniu4blog，使用很簡單，具體可以看文件。

多PC的情況下blog備份問題

~~本來想用網盤的自動備份工具，但是考慮到blog的posts資料夾在寫文章時的更新頻率，我又放棄了這種做法。
另外由於"_config.yml"裡有七牛的金鑰資料，所以整個blog檔案扔到git上也是不可取的。個人建議還是打個包直接另一臺電腦解壓吧(一般來說拷貝source資料夾，theme資料夾，靜態資原始檔夾以及站點配置檔案即可)。~~
上面刪除線內的是我對備份的最初想法，然後實際使用後發現有至少兩個缺點：

  1. 麻煩，每次另一臺電腦上都要從百度雲下載更新資料夾手動覆蓋

  2. hexo s開啟本地伺服器狀態的時候，會對資料夾進行監視，動態編譯生成的檔案，而百度雲的自動備份會在你每次儲存檔案的時候都生成一個.cfg檔案，導致hexo編譯失敗，然後就會停止本地伺服器解析，又要手動開啟一次（寫文章的時候隨時順手CTRL+S是個好習慣）

以上兩個原因導致了"百度雲備份"這個方案被否決，所以最終還是回到了git備份的路子。由於blog全站備份，所以建議放私有倉庫，另外根目錄下_config.yml儘量不要放上去（有些外掛比如我現在在用的"hexo-qiniu-sync"就有七牛的key，所以不建議同步到git上）
這裡寫起來篇幅可能比較長，所以我另外寫了一篇文章單獨來講同步：
hexo部落格多PC間同步解決方案

可以參考。

需要注意的事，不管這臺電腦上之前有沒有安裝過hexo，安裝完成後都是不需要hexo init的——這個操作會把config初始化。。
直接在複製過來的blog檔案裡執行hexo的命令即可。不過hexo外掛都需要重新安裝下。

給github新增README

眾所周知hexo會把資料夾內的所有md檔案解析成html，而github的readme只支援MD格式。（所以想在這裡直接插html繞過限制的就只能說殘念了）
網上之前很多方法，不過都沒有說到點子上，因為即使把README.MD檔案放到source或者theme對應的source資料夾下，再加上layout:false，hexo還是會把檔案解析掉。
另外有一種不怎麼優雅的解決方法是把'README.MD'的字尾去掉，改成'README',不過這樣的話github只能支援部分解析，不會當做一個完整的MD檔案來處理，樣式上和期待值有差別

正確的解決方法其實很簡單：

**把'README.MD'檔案的字尾名改成"MDOWN"然後扔到blog/source資料夾下即可，這樣hexo不會解析，github也會將其作為MD檔案解析

效果可參考我這個github的主頁

文章新增程式碼塊有註釋時的高亮

建議對應程式碼塊語法選擇相應的註釋符號。比如html用<!-- -->,css用/* */，否則可能會出現程式碼不高亮或者高亮有問題的情況。

MarkDown裡 table 的語法

MD寫法：


| 連結 | 結果 | 原因 |
|:-----|:---:|----------:|
|文字內容| **`是`** |同協議同域名同埠|
|文字內容| **`是`** |同協議同域名同埠|
|文字內容| **`是`** |同協議同域名同埠|

  1. 最上面一行是表格第一列的值。第二行的冒號位置決定表格內文字的對齊方式。有水平居中、水平靠左對齊、水平靠右對齊三種.

  2. 切記表格要與上面的文字內容空一行。否則解析不出來

  3. 每列的寬度是根據對應列裡最長的文字來決定的

輸出結果：

連結 結果 原因
文字內容 是 同協議同域名同埠
文字內容 是 同協議同域名同埠
文字內容 是 同協議同域名同埠

以上是之前我之前部署的時候有遇到過的一些問題，後面會視情況再不定時更新下。希望對看到這篇文章的人有所幫助

相關文章