自架部落格(1) 想自己架部落格？先裝個 Hexo 吧！

發表於 更新於 分類於
身為這個部落格的第一篇文章，當然就是來記錄一下建置的步驟。將介紹如何安裝和預覽。

身為這個部落格的第一篇文章，當然就是來記錄一下建置的步驟。

至於為什麼選 Hexo，其實就只是懶而已，懶得自己刻UI、懶得踩雷。UI、分類、產出靜態網站內容什麼的功能 Hexo 都幫你處理好，只要專注與寫作就好。

當然也有看過其他的部落格套件，像是JekyII, Hugo，但是發現網路上 Hexo 的教學很多，那就不踩雷了，跟著他們做就好。寫部落格最重要的就是內容（雖然我的內容也不怎麼樣），其他都是其次。

將介紹如何安裝和預覽。

主要環境

1
2
OS： Windows 10 專業版
Node.js： 14.17.6

安裝Hexo

依據Hexo官網的說明，需要

  • Node.js 建議 10.0 或以上的版本
  • git

這些都安裝好了之後，就可以透過 npm 來安裝，打開終端機，然後輸入：

1
npm install -g hexo-cli

之後就會開始安裝 Hexo。我安裝的是當時的最新版6.2.0。

建立專案

首次建立專案

使用終端機到你想要儲存這個專案的位置，輸入指令：

1
2
3
hexo init <folder>
cd <folder>
npm install

<folder>就是 Hexo 專案的資料夾名稱，Hexo 會在目前的目錄用這個名稱再建一個新的資料夾，把專案存到這裡面。沒有輸入的話就會在當前的資料夾內建立專案。

圖1：以 src 為例

資料結構說明

安裝完成後，裡面會有這些檔案：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml：Hexo 的配置檔

package.json：npm 的配置檔，基本上可以不用理會

scaffolds：範本資料夾，建立新文章時可依照指定的範本建立檔案

source：存放原始檔案的地方，也就是文章存放的地方

themes：存放主題的資料夾

預覽

建立好之後，當然來預覽一下。

終端機到專案目錄底下，輸入以下指令

1
2
3
hexo server
或
hexo s

之後就會啟動伺服器，預設會是 http://localhost:4000 ，在瀏覽器上輸入這個網址就會看到。使用者個指令除了可以看到部落格的樣子外，還可以修改文章且儲存後，直接預覽變更後的樣子（修改 config 除外）。

圖2：預覽指令

圖3：建置完成

到這裡就大功告成，恭喜安裝 Hexo 並啟動成功。

參考