Hexo 簡易調教指南(一):軟體安裝及網站建構

上一篇「10分鐘內從安裝Hexo到佈署至GitHub Pages」教大家用短短 10 分鐘來建立屬於自己的網站。這次我想進階一點,將我所用到的功能介紹給大家

第一章基本上是以「10 分鐘架設Hexo網站」為基礎,並修改、增加一些內容。

介紹

Hexo 是其中一款靜態網站建立工具,靜態網站和動態網站最大的不同就在於前者的內容是固定的,而後者的內容則是會因使用者的不同而產生變化。因此,靜態網站在單純發布文章的情況下具備了高安全性、載入速度快、調整彈性大等優點。

前置準備

使用軟體

安裝以下軟體(使用預設值安裝):

  1. Git(必備,選擇最新版本)
  2. Node.js(必備,選擇 v12 LTS 的最新/任一版本皆可)
  3. Visual Studio Code(非必備,有自己慣用的編輯器可以不裝)

建立專案

首先要有一個 GitHub 帳號以便部屬網站到 GitHub Pages,如果已經有帳號可以直接跳到 Step 2

Step 1: 註冊一個 GitHub 帳號

Step 2: 點選右上角的「+」→「New repository」

Step 3: 在 Repository name 填入「<username>.github.io」,接著點選「Create repository」

開始安裝

Hexo 常用指令

先介紹幾個常用的指令

hexo generate # 產生靜態網頁檔案
hexo clean # 清除靜態網頁檔案和快取
hexo server # 開啟伺服器
hexo server --draft # 開啟伺服器並顯示草稿
hexo server -p 4000 # 開啟伺服器並使用自訂的端口(數字自訂)
hexo new [layout] <titile> # 新增文章或頁面
hexo deploy # 部屬網頁
# 除了第二個指令之外的縮寫都是第一個英文字母(例如:hexo generate 的縮寫為 hexo g)
# 第二個指令的縮寫則是hexo cl

安裝 Hexo

首先在想要儲存網站資料的地方點選滑鼠右鍵,選擇「Git Bash Here」

輸入下列指令可以檢查 Node.js 以及 npm 的版本

node -v
npm -v

確認都沒有問題之後,就可以輸入下列指令來安裝 Hexo

npm install -g hexo-cli

建立存放網站資料的資料夾(如果不輸入資料夾名稱的話就會在目前路徑建立檔案)

hexo init <自訂資料夾名稱>

把路徑切換至剛剛建立的資料夾

cd <資料夾名稱>

安裝額外的模組

npm install

上述指令都執行後就大功告成了,輸入 hexo ghexo s 建立網站資料和開啟伺服器

然後在瀏覽器輸入 http://localhost:4000 就可以預覽網站了

提示:按下 Ctrl + C 可以關閉伺服器

安裝主題

上一篇介紹了 ICARUS 這一個主題,這一次要安裝的主題為 NexT

Hexo 的主題提供 npm 和 git clone 兩種安裝方式。為了方便更新主題,建議大家使用 npm 來安裝

安裝的方式很簡單,在終端機輸入下列指令就可以了

npm install hexo-theme-next

打開網站根目錄中的 _config.yml,找到 theme 後把 landscape 改成 next

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next #原本為 landscape,修改為 next

將 theme 修改為想要套用的主題名稱

最後回到終端機執行 hexo ghexo s,沒有意外的話就能在終端機內看到「NEXT」字樣,網站主題也會變成跟下圖一樣

成功安裝並執行的畫面

總結

這系列本來在一月多就開始動工了,結果到了五月才發表,真的是拖了非常久呢

下一篇會介紹如何設定網站,敬請期待

更新時間不定…

參考資料

試著學 Hexo :: 第 12 屆 iT 邦幫忙鐵人賽

文件 | Hexo

Zespia