使用 Hexo 與 NexT 打造自己的部落格

發表於 更新於 分類於

用了一陣子 Meduim 還有 HackMD 後，覺得應該要開啟自己的架站之旅，初試啼聲先使用模板來架站看看。

前言

接下來會分成多篇敘述，歡迎點擊 tag 觀看連載！

安裝 Hexo

  • npm install -g hexo-cli

Image

創建 Hexo 環境

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

Image

hexo server 用來確認是否成功套用預設主題 & 畫面
Image

參考資料：Hexo 官方文件 - 建立

設置主題

Hexo 版本

  • hexo：6.2.0
  • hexo-server：3.0.0

NexT 版本

  • NexT：^8.12.1

NexT

安裝

  1. npm install hexo-theme-next@latest
  2. 搜尋_config.yaml 關鍵字為 theme: 改為 theme: next
  3. cp node_modules/hexo-theme-next/_config.yml _config.next.yml

參考資料：新版 NexT 特色

在 GitHub Pages 上部署 Hexo

  1. 建立 GitHub Repo

    肉身實測， repo 必須要跟 GitHub UserName 一致
    Image

  2. 安裝 npm install hexo-deployer-git --save
  3. 清空 _config.yml 的現有資料，並新增以下組態:
    1
    2
    3
    4
    5
    deploy:
      type: git
      repo: https://github.com/<username>/<project>
      # example, https://github.com/hexojs/hexojs.github.io
      branch: gh-pages
  4. 執行 hexo clean && hexo deploy
  5. 瀏覽 <GitHub 用戶名>.github.io 檢查你的網站能否運作

參考資料：一鍵部屬

若是使用 GitHub Actions 則是使用此教學

架設 Hexo+GitHub、Hexo