上一篇「10分鐘內從安裝Hexo到佈署至GitHub Pages」教大家用短短 10 分鐘來建立屬於自己的網站。這次我想進階一點,將我所用到的功能介紹給大家
第一章基本上是以「10 分鐘架設Hexo網站」為基礎,並修改、增加一些內容。
介紹
Hexo 是其中一款靜態網站建立工具,靜態網站和動態網站最大的不同就在於前者的內容是固定的,而後者的內容則是會因使用者的不同而產生變化。因此,靜態網站在單純發布文章的情況下具備了高安全性、載入速度快、調整彈性大等優點。
前置準備
使用軟體
安裝以下軟體(使用預設值安裝):
- Git(必備,選擇最新版本)
- Node.js(必備,選擇 v12 LTS 的最新/任一版本皆可)
- 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 g 和 hexo s 建立網站資料和開啟伺服器
然後在瀏覽器輸入 http://localhost:4000 就可以預覽網站了
提示:按下 Ctrl + C 可以關閉伺服器
安裝主題
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 |
最後回到終端機執行 hexo g 和 hexo s,沒有意外的話就能在終端機內看到「NEXT」字樣,網站主題也會變成跟下圖一樣
總結
這系列本來在一月多就開始動工了,結果到了五月才發表,真的是拖了非常久呢
下一篇會介紹如何設定網站,敬請期待
更新時間不定…
參考資料