基於Hexo搭建靜態部落格

關於靜態部落格

通常來講，建立個人部落格有2種方式：
第一，直接在第三方部落格平臺註冊部落格空間，如：部落格園，簡書，CSDN等，這種方式建立的部落格，所有資料都存放在部落格平臺。
第二，自建部落格系統，這種方式就是自己實現與部落格平臺相同的功能，需要涉及多個部分，如：購買雲主機，註冊域名，CDN，圖床等。

自建部落格系統也分為2種方式：
其一，使用傳統方式建立部落格系統，整個系統包含多個元件，如：資料庫，管理後臺，前臺部落格展示，有諸多非常優秀的開源方案可以選擇，如：Wordpress，Halo等等。由於前端部落格頁面是動態從資料庫查詢資料來渲染展示的，可以把這種傳統的部落格稱之為動態部落格。即：所有部落格相關的資料都儲存在資料庫中，對資料庫是強依賴。
其二，採用靜態部落格框架將靜態檔案（如：Markdown語法格式的檔案）轉換為HTML檔案，這樣可以直接將這些動態生成的HTML檔案佈署到Web伺服器即可，不需要依賴資料庫，當然也不需要管理後臺，所有部落格文章都是靜態檔案。目前已經有許多優秀的靜態部落格框架，如：Hugo，Hexo等等。把這種無需依賴資料庫系統，也不需要管理後臺建立的部落格稱為靜態部落格。

當然，所謂「動態部落格」和「靜態部落格」，他們各有利弊。相比較而演，動態部落格的使用門檻低，只需要關注寫部落格本身即可。而靜態部落格的搭建需要一定的程式設計技能基礎，但是客製化非常靈活，資料管理和備份也非常方便。

環境準備

先安裝好Node.js，並設定使用淘寶映象源。

npm config set registry https://registry.npm.taobao.org

安裝Hexo

執行如下命令安裝Hexo：

npm install -g hexo-cli

初始化

執行如下命令初始化部落格：

# 初始化一個名稱為iblog的部落格目錄，將來所有關於部落格的引數設定，以及寫部落格文章都在該目錄下進行
hexo init iblog
cd iblog
npm install

完成上述操作後，在部落格資料夾下將會看到如下目錄結構：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

themes目錄儲存主題相關的檔案，所有安裝的主題都儲存在該目錄下。
source目錄儲存部落格文章靜態檔案，其中 _drafts儲存草稿，_posts儲存正式文章，這可以在新建資源時指定型別。
_config.yml是部落格的全域性組態檔（注：通常主題也會有一個名為 _config.yml的組態檔）。

至此，一個靜態部落格的基本基本雛形已經完成了，接下來則需要對部落格進行主題設定，並開始寫部落格文章了。

設定主題

主題決定了部落格的展示樣式和支援的功能。

安裝hexo-theme-3-hexo主題。
主題詳細設定：3-hexo使用說明 。

寫部落格

在部落格根目錄下執行如下命令新建一篇部落格：

hexo new post "這是第一篇靜態部落格文章"

生成靜態頁面

寫好文章後，在部落格根目錄下執行如下命令生成靜態頁面：

hexo generate

執行完上述命令之後，將會在部落格根目錄下生成一個名為 public的目錄，該目錄儲存著動態生成的HTML檔案，將 public目錄下的內容託管到nginx即可存取。

在本地寫部落格時，可以在部落格根目錄下執行 hexo server命令，啟動本地Web服務進行檢視。

一些常用的外掛

• hexo-deployer-rsync ：通過rsync將本地生成的靜態檔案上傳到伺服器指定目錄，執行命令 hexo deploy時呼叫該外掛
• hexo-deployer-git：將本地生成的靜態檔案上傳到指定git倉庫，執行命令hexo deploy時呼叫該外掛

如何搭建部落格編輯環境

靜態部落格本質上只是一個文字檔案，所以理論上只需要一個文字編輯器即可。但是為了方便偵錯，最好還是在新的主機上安裝如下環境，會給寫部落格帶來比較好的體驗。

• 安裝Node.js並設定使用國內映象源（本站點使用的Node版本為v16.15.1）
• 安裝Hexo框架
• 安裝一個順手的Markdown編輯器
• 安裝Git使用者端（將本地寫的部落格文章儲存到遠端Git倉庫）

每次寫新的部落格文章時，從git倉庫拉取最新的部落格資料，在部落格根目錄下執行如下命令安裝依賴：

npm install

在部落格根目錄下執行如下命令建立一篇新的部落格文章：

hexo new post "部落格文章標題"

編輯部落格文章並儲存

在部落格根目錄下執行命令：

# 簡寫：hexo s
hexo server

在本地啟動Hexo框架伺服器進行偵錯預覽。

將新寫的部落格文章提交到git倉庫。

最後在部落格根目錄下執行如下命令將最新的部落格文章釋出到Web伺服器（本質：重新生成靜態檔案，並上傳到Web伺服器目錄）。

# 簡寫：hexo d
hexo deploy

Hexo常用命令

# 初始化部落格目錄
hexo init 部落格名稱

# 新建部落格文章：執行該命令後將會在部落格根目錄/source/_posts路徑下新建一個markdown檔案
# 編輯該markdown檔案即可
hexo new post '文章標題'

# 將markdown檔案轉換為html頁面（儲存到部落格根目錄/public路徑），將來佈署到web伺服器的是這些轉換後的html頁面
hexo generate
或
hexo g

# 啟動本地Web伺服器，預設啟動在4000埠，開啟瀏覽器即可看到整個部落格站點的所有文章
hexo server
或
hexo s

# 將部落格根目錄/public路徑下轉換生成的html頁面上傳到指定主機
# 這個功能需要先在部落格根目錄/_config.yml檔案設定佈署引數，如下範例將通過rsync將檔案上傳到指定伺服器目錄
# deploy:
#  type: rsync
#  host: 192.168.10.122
#  user: zhangsan
#  root: /data/www/html
hexo deploy
或
hexo d

# 清空部落格根目錄/public路徑下的所有資料
hexo clean

可以將上述命令寫一個指令碼中，方便呼叫。

如下指令碼範例可用於一鍵佈署最新部落格站點（deploy.sh）：

#!/bin/bash
hexo clean
hexo g
hexo d