1. 程式人生 > >Hexo部落格系列(二)-在多臺機器上利用Hexo釋出部落格

Hexo部落格系列(二)-在多臺機器上利用Hexo釋出部落格

針對在公司及家裡的電腦上都有編輯釋出部落格的可能,或者多人同時維護一個部落格的情況,需要在多臺機器上配置環境好環境,然後將Git倉庫中的部落格更新下來,繼續編輯釋出部落格。
個人是將部落格託管在Gitee(碼雲)的倉庫,將NexT主題託管在Github上的倉庫。
因為部落格原始碼需要放在私有倉庫(Github也已經開發私有倉庫了,Gitlab本來就支援私有倉庫),不開放出來,NexT主題是直接fork的NexT官方主題(https://github.com/theme-next/hexo-theme-next/ ),根據自己的需要進行修改儲存。
下面介紹已有部落格倉庫和主題倉庫的情況下,如何在各臺機器進行配置。

日常寫部落格

正常情況下,僅僅需要到部落格根路徑和主題根路徑,使用git pull拉取最新程式碼。

  • 第一步:clone自己的hexo部落格專案
git clone [email protected]:java4candy/tecchen.git tecchen
  • 第二步:clone自己的next主題專案
git clone [email protected]:java4candy/hexo-theme-next.git tecchen/themes/next
  • 第三步:啟動伺服器
hexo clean && hexo generate && hexo server
  • 第四步:使用瀏覽器進行訪問
    訪問http://localhost:4000/ 即可。

初始化環境

以下僅限在新機器上進行一次性操作。

  • 第一步:clone自己的hexo部落格專案
git clone [email protected]:java4candy/tecchen.git tecchen
  • 第二步:clone自己的next主題專案
git clone [email protected]:java4candy/hexo-theme-next.git tecchen/themes/next
  • 第三步:安裝hexo【一定不要執行hexo init,其實執行後,也會提示資料夾不為空。】
npm install -g

該命令會根據package.json中的dependencies將依賴下載並安裝到node_modules目錄。
可以使用npm ls -dept 0檢視具體有哪些依賴。

+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]
  • 第四步:啟動伺服器
    使用hexo server或者簡寫hexo s啟動伺服器
hexo clean && hexo generate && hexo server
  • 第五步:使用瀏覽器進行訪問
    訪問http://localhost:4000/ 即可。

如果頁面開啟後,部分割槽域空白,則可以按F12,檢視控制檯的js報錯。
由於我配置了圖片放大功能的fancybox,控制檯報錯如下:

如果提示找不到fancybox相關的檔案,則可以根據以下方案進行解決。

方案一:

禁用fancybox,在~\themes\next_config.yml中搜索fancybox,並設定fancybox為false。
fancybox: false

方案二:

根據_config.yml中的註釋提示或者之前開啟fancybox配置的步驟,安裝fancybox3。
連結:https://github.com/theme-next/theme-next-fancybox3
命令:

cd ~\themes\next # 進入到NexT主題根目錄
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

重新整理頁面,成功訪問。