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

weixin_33763244發表於2015-09-06

之前的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. 每列的寬度是根據對應列裡最長的文字來決定的

輸出結果:

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

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

相關文章