Hexo 架設筆記

發表於 更新於 分類於 ， 閱讀次數： 文章字數： 940 所需閱讀時間 ≈ 3 分鐘

自用筆記備忘錄，記錄在學習中所使用的語法

1. 前言

Hexo : 快速、簡單且強大的網誌框架

原先使用的Jekyll已經忘得差不多了，所以改用Hexo從頭架設一次

一樣選擇放在gitHub的個人網頁，作為靜態網站的站點再合適不過。

2. 環境搭建

建置時使用的版本：

git version 2.38.1.windows.1
Node.js npm-10.2.4

hexo: 7.1.1
hexo-theme-next@8.19.1

  1. 首先確認已經安裝完成以下的軟體

    • Node.js (Node.js 版本需不低於8.10，建議使用 Node.js 10.0 及以上版本)
    • Git

  2. 可以在 cmd 終端中使用 git -v 以及 node -v 確認版本

2.1. 選擇當前資料夾並進入終端(cmd)

  1. 利用 npm 安裝 hexo npm install hexo-cli -g

    npm： Node.js package manager | 套件管理工具

  2. 安裝完 hexo 後，就可以進入專案的資料夾進行初始化，在資料夾的路徑中輸入 cmd 進入對應的終端中
  3. 使用 hexo init ，Hexo 會生成所有您需要的檔案
  4. 進行 npm 初始化：npm install
  5. 進行 git 初始化：git init

    git: 使用命令行的版本控制軟體

  6. 安裝hexo的next主題：npm install hexo-theme-next

    🎉 Elegant and powerful theme for Hexo.

2.2. 撰寫 _config.yml,_config.next.yml 文件

  1. Hexo 的配置
  2. NexT 的配置

2.3. 安裝功能插件

  1. 安裝部屬用插件：npm install hexo-deployer-git --save

    – save: 儲存變更到 pack 管理文件之中
    blog 部屬用的靜態文件將存放於 public

  2. 安裝hexo的字數統計插件：npm install hexo-word-counter --save
  3. 安裝 abbrlink 插件：npm install hexo-abbrlink --save

    讓發表的文章擁有永久網址，與 google 優化 SEO 有關

  4. 安裝本地搜尋：npm install hexo-generator-searchdb --save
  5. 安裝 gitalk 留言板：
    需要建立 GitHub OAuth APP
    ^[十分鐘超詳細替 Hexo NexT 開啟 Gitalk 留言版]
    ^[NexT Comment Systems]
    ^[如何取消頁面的留言板]

2.4. Google 搜尋引擎最佳化 (SEO「Search Engine Optimization」)

  1. 安裝 Sitemap 插件：npm install hexo-generator-sitemap

    Sitemap 用來記錄該網站中所有 url 路徑，以及每一個路徑最後修改的時間戳。

  2. 設定 Google Analytics

    網頁來訪狀況分析服務

  3. 在 Google Search Console 設定加入網站連結

    認證網站所有權，以及上傳 SiteMap 文件

3. 開始使用 Hexo 撰寫 Blog

  • new 新增文章 hexo n ""

    預設模板為 post.md

1
hexo new [layout] <title>
  • clean 清除靜態檔案與快取 hexo cl

    修改檔案後建議執行一次，清除已經部屬過的 public 資料夾

1
hexo clean
  • generate 產生靜態檔案 hexo g hexo g -d

    用 source 裡的資料生成靜態的網頁架構

1
hexo generate
  • server 啟動伺服器 hexo s

    在本地端啟動 Hexo 伺服器

1
hexo server
  • 將檔案部屬到 GitHub hexo d

    需要安裝並設定 hexo-deployer

1
hexo deploy
  • 渲染時顯示草稿 hexo s --draft
  • 新建一篇草稿 hexo new draft ""
  • 將草稿發表 hexo publish "<filename>"

4. 版本更新

  1. 檢查目前所安裝的版本是否過期 npm outdated
  2. 安裝最新的版本 npm install hexo-theme-next@latest
  3. 安裝特定版本 npm install hexo-theme-next@8.0.0

5. 個人客製化的學習歷程

::: Refernce :::

  1. Hexo 官方網站
  2. Hexo NexT 主題
  3. 試著學 Hexo - 序章
  4. Github + Hexo 新手搭建手冊(含各種TIPS與問題解決) [2019]