基於Hexo搭建靜態部落格

nuccch發表於2022-12-25

關於靜態部落格

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

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

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

環境準備

先安裝好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

相關文章