Hexo 簡易調教指南(五):套件安裝及網站部屬

這次來安裝一些有用的套件,以及將網站部署到 GitHub Pages 上面

套件一覽

Sitemap.xml

網站地圖(Sitemap)的作用是將網站內所有連結收錄在一個 XML 檔案,讓搜尋引擎能夠搜尋網站的內容

輸入以下指令安裝套件

npm install hexo-generator-sitemap --save

開啟 _config.yml 並新增以下選項

sitemap:
  path: sitemap.xml
  #template: ./sitemap_template.xml
  rel: false
  tags: true
  categories: true

設定完成之後,使用 hexo g 指令就會在 public 資料夾內新增 sitemap.xml

搜尋功能

NexT 主題已經內建搜尋功能的選項,不過需要安裝套件才能使用

輸入以下指令安裝套件

npm install hexo-generator-searchdb

開啟 _config.next.yml 移動至第 746 行將 enable 設為 true

local_search:
  enable: true

最後就能在側邊欄看到搜尋按鈕,點選就能夠使用

NexT 內建搜尋介面

文章字數統計

如果想要顯示每一篇文章的總字數和估計的閱讀時間,就需要安裝 hexo-word-counter

輸入以下指令安裝

npm install hexo-word-counter

重新產生網站檔案後就能看到字數和閱讀時間的資訊

(左側為關閉/右側為開啟)文章統計的效果

但是閱讀時間預設是以英文來計算,所以在中文文章中就會看見很奇怪的閱讀時間

解決方法是在 _config.yml 新增以下選項,然後將 awl 設為 2

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 2
  wpm: 275
  suffix: "mins."

如果想要排除程式碼的話,可以將 exclude_codeblock 設為 true

GitHub 部屬工具

Hexo 支援上傳靜態網站檔案到 GitHub,但是要安裝額外的套件才能使用

輸入以下指令安裝 hexo-deployer-git

npm install hexo-deployer-git --save

部屬至 GitHub Pages

由於 GitHub 在八月份的時候關閉使用帳號密碼驗證的方式,所以我們要新增 Token 讓套件能夠上傳網站檔案到 GitHub 專案

開啟 Personal Access Tokens,點選右上角的「Generate new token」

新增 Token

輸入一些資訊

  • Note:Token 的備註
  • Expiration:Token 失效的期限,一般來說選擇「No expiration」即可
  • Select scopes:選擇 repo、workflow 和 gist

設定 Token

然後就會拿到一個 Token 了

Token 應為 ghp 開頭

接著開啟 _config.yml 找到 # Deployment,修改為下方的格式

deploy:
  type: git
  repo: https://oauth2:ghp_xxxxx@github.com/<username>/<username>.github.io.git
  # 將 ghp_xxxxx 更換為剛剛拿到的 Token
  branch: master # 輸入 gh-pages 也可以

依序執行 hexo ghexo d,出現 INFO Deploy done:git 就代表成功了

成功部署會提示 Deploy done

最後只要在瀏覽器輸入 <username>.github.io 就能看到網站

網站成功部署至 GitHub Pages

參考資料

佈署 | Hexo

Added personal token in _config.yml but still can’t access git · Issue #210 · hexojs/hexo-deployer-git