Hexo5 起手式

發表於 更新於 分類於
覺得以後可能會有再重新架站的可能，來把第一次架 Hexo 需要的基礎設定整理起來，避免惹怒自己 !?

版本

  • Windows 10
  • Next version 8.7.0
  • hexo version 5.4.0
  • hexo-cli: 4.3.0

安裝步驟

開啟 PowerShell

  1. npm install -g hexo-cli
    • 安裝後才可使用 hexo 的指令。
    • Mac 如果安裝後出現錯誤訊息 zsh: command not found: hexo 可加入 sudo → sudo npm install -g hexo-cli。
  2. hexo init 要生成的資料夾名稱，生成專案資料夾。
    • 做初始化生成此資料夾前，記得使用 cd 移動至要放置資料夾的路徑 cd 要放置的資料夾路徑 ( 例如桌面 cd Desktop，再開始下方指令，執行第一次即可 )。
    • 我把此專案放在磁碟 G:，命名 echocarrietHexo。
  3. 記得先 cd 移動到剛剛生成的專案資料夾 → 啟動部落格 hexo serve
    • 它有自己的模擬伺服器，所以輸入此指令就可開啟。
    • 停止指令 ctrl+c
    • 也可把此專案於 vscode 開啟，並於終端機執行 hexo serve。
      Hexo起手式0
      // 生成專案後裡面的檔案 ▲

部屬到 GitHub

GitHub 上的分支用途

  • main 分支 : 編譯過的檔案。
  • hexo 分支 : 原始檔 ( 換電腦可直接把整個檔案 clone 下來 )。

一般 hexo deploy -g 只會上傳編譯檔到 GitHub，這邊想要保留原始資料，所以下方會另外開一個 hexo 分支來存放。

步驟開始

  1. 到 Github 新增 reponsitory ，名稱以 github 名稱為主，不要亂加字 。

    • ⭕ 正確 : 以使用者帳號後方接 .github.io ( 以我的帳號 echocarriet 為例 → echocarriet.github.io ）
    • ❌ 錯誤示範 : echocarriet12.github.io、echocarriet.github.io/blog

  2. 替 Hexo 安裝部署套件

    1. npm install hexo-deployer-git --save

      • Hexo 只提供部落格的架設，所以要部屬到 github 又不想額外安裝套件，需輸入此指令。

    2. 開啟專案中的 _config.yml ( 系統設定檔 ) ，搜尋 # Deployment ，改成下方程式碼，儲存後進入步驟 5 輸入部屬指令就可部屬到遠端伺服器主機上。

      • repo : 填入步驟 1 ，於 github 新增的 repository 網址。
        • HTTPS → https://github.com/[你的 GitHub 帳號]/[你的 GitHub 帳號].github.io.git
        • SSH → [email protected]:echocarriet/echocarriet.github.io.git
      • branch : 分支可寫 main ( 新版 ) 或 master。
      1
      2
      3
      4
      deploy:
      	type: git
      	repo: https://github.com/echocarriet/echocarriet.github.io.git
      	branch: main
      1
      2
      3
      4
      deploy:
      	type: git
      	repo: [email protected]:echocarriet/echocarriet.github.io.git
      	branch: main

  3. 進入步驟 4 前，須先到 專案 / _config.yml 大約第 16 行的 url ( 搜尋 #URL ) 把路徑改為 Github 儲存庫名稱。( # 請小心後面不要多一個「/」否則會出現問題 )

    1
    2
    3
    4
    5
    6
    # URL
    ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
    url: http://example.com

    # 修改為
    url: https://echocarriet.github.io

  4. hexo deploy -g （ 縮寫 hexo d -g ），輸入部屬指令，並生成靜態頁面。

    • 每編輯完一篇文章要上傳 gh-page ，就執行一次 hexo d -g。

  5. 當畫面顯示 Branch 'master' set up to track remote branch 'main' from 'https://github.com/echocarriet/echocarriet.github.io.git'. ，表示部署成功。進入echocarriet.github.io 即可開啟部落格囉 ！

  6. 1 ~ 5 步驟，上傳到 GitHub rep 的為編譯過的資料，這邊我想要上傳把原始資料都上傳上去，使用分支備份的方式，從下方步驟 7 開始吧 !

  7. 於 main 分支做版本控制 : git init → git add . → git commit -m '說明'

    1. 查詢目前在哪個分支 git branch
    2. main 分支上傳到 GitHub 為編譯後的資料。

  8. 開 hexo 分支 ( 上傳到 GitHub 的完整原始資料 ) : git checkout -b hexo

  9. 日後新增或更新文章請先到 hexo 分支處理，再回到 main 分支做合併。

    1. 如果 GitHub 還未有 hexo 分支，先執行 ( 目前位於 main 分支 ) :
      1. git add .
      2. git commit -m '說明' ( 沒有新增或修改東西可略過前兩個步驟 )
      3. git remote add origin <資料庫Url>
      4. git push origin hexo
    2. 以新增文章為例 :
      1. git checkout hexo
      2. hexo new '文章名稱'
      3. git add .
      4. git commit -m '說明'
      5. git checkout main
      6. git merge hexo
      7. 合併後，接下來就可以把 main 與 hexo 分支的資料分別上傳到 GitHub 囉，請看下個步驟 。
    3. main 分支上傳 GitHub :
      1. hexo deploy -g，會把編譯過的資料推到 GitHub 的 main 分支。
        1. 每編輯完一篇文章要上傳 gh-page ，就執行一次 hexo d -g。
      2. git push origin hexo，會把原始資料上傳到 GitHub 的 hexo 分支。
      3. 如果 main 與 hexo 分支要推上去的資料不同，就不要進行 merge 再使用 git checkout 分支 切換到那個分支進行 i 、ii 指令的推送。

安裝 Hexo 框架的 next 主題

這邊把部落格放置在 github 上

  1. npm install hexo-theme-next
    1. 新版安裝可透過 nvm 指令 ( 如果在 hexo serve 狀態可先輸入 control + c 再輸入上方指令 )
  2. 開啟專案內的 _config.yml 檔案，找到 theme: 修改為 next。
    VS Code 終端機輸入 hexo s ( hexo serve 縮寫指令 )
    1. Hexo 框架的的 next 主題 ( 此主題整合滿多第三方套件、也有程式碼高量 ）

更改 Hexo 框架中 next 主題的主題風格

  1. 指令 → cp node_modules/hexo-theme-next/_config.yml _config.next.yml
    • 會自動從路徑 : 專案 / node_modules / hexo-theme-next 拷貝一份它的設定檔 config.next.yml 出來，如果沒看到可以到專案內的 node_modules 資料夾內找。
      Hexo起手式1
    • _config.yml 為整個 Hexo 的系統設定檔，檔案內有個 theme : 後方可更換要修改的主題名字，這邊使用 theme: next 主題。
      Hexo起手式2
      Hexo起手式3
    • 開啟主題設定檔 config.next.yml ，搜尋 #Scheme 有四個主題風格可選，要更換主題風格只要於前方加入或移除 ＃ 即可開啟或關閉風格。( 目前使用 #scheme: Pisces 主題 )
      Hexo起手式4

Hexo 主題新增標籤及分類頁面

輸入指令，新增標籤與分類

  1. 指令 hexo new page tags ，於路徑 : 專案 / source 出現 : _posts 與 tags 資料夾。
    Hexo起手式5

  2. 指令 hexo new page categories ，於路徑 : 專案 / source 出現 : categories 資料夾。
    Hexo起手式6

修改剛建立的標籤與分類頁面

  1. tages 路徑 : 專案 / source / tages ，開啟 index.md，加入

    1
    type: "tags"

  2. categories 路徑 : 專案 / source / categories ，開啟 index.md，加入

    1
    type: "categories"

  3. 路徑 : 專案 / _config.next.yml 搜尋 menu: ，把 #categories 與 #tags，前方 # 井字號拿掉。就會出現在側欄囉 !

    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      #home: / || fa fa-home
      #about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      categories: /categories/ || fa fa-th
      #archives: /archives/ || fa fa-archive
      #schedule: /schedule/ || fa fa-calendar
      #sitemap: /sitemap.xml || fa fa-sitemap
      #commonweal: /404/ || fa fa-heartbeat

    Hexo起手式7

  4. 新增文章時 front-matter 就會有 tags 與 categories 了，如果沒有的話再到路徑 : 專案 / scaffolds / post.md 添加。

    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: { { title } }
    date: { { date } }
    tags:
    categories:
    description:
    ---

添加多個標籤與添加分類注意事項

  1. 每篇文章只會有一個 categories

    • hexo 主題一篇文章只會有一個分類。以下方為例，hexo 不會產生 HTML & CSS 、 Float 浮動兩個分類，而是「 HTML & CSS 下的 Float 浮動 」分類。
    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: 第三篇文章
    date: 2021-08-02 19:55:23
    categories:
    - HTML & CSS
    - Float浮動
    description:
    ---

  2. 設置多個標籤 tags，可嘗試下方寫法。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    ## 寫法一
    ---
    title: 第三篇文章
    date: 2021-08-02 19:55:23
    tags: [vue,BS]
    ---

    ## 寫法二
    ---
    title: 第三篇文章
    date: 2021-08-02 19:55:23
    tags:
    - vue
    - BS
    ---

修改文章永久連結的格式

套件 : hexo-abbrlink

路徑 : 專案 / _config.yml

  1. 安裝 hexo-abbrlink

    • npm install hexo-abbrlink --save

  2. 進入 _config.yml 搜尋 # URL ，調整 permalink 永久連結格式。

    1
    2
    3
    4
    5
    6
    # URL
    ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
    permalink: :year/:month/:day/:title/

    # 調整後
    permalink: :category/:year:month:day/:abbrlink/

  3. 在最末端加入一段 abbrlink 設置

    • ‼️ 以上動作還沒改完之前請不要執行 hexo serve，否則你會崩潰。
    1
    2
    3
    4
    # abbrlink config
    abbrlink:
      alg: crc32 # 演算法：crc16(default) and crc32
      rep: dec # 進位制：dec(default) and hex

  4. 以上步驟都走完，開啟文章頁面遇到無法正常顯示永久連結，可執行 hexo clean。

Category 分類調整

請參考文章中 Category 調整 做設定。

專案下的檔案說明

文章：認識 Hexo 目錄結構

  • 專案/_config.yml : 系統設定檔
  • 專案/_config.next.yml : 主題設定檔
  • 專案/source/_posts 資料夾 : 所有文章
    • 整個資料夾不想被編譯 : 於 _posts 資料夾底下的某資料夾 ( 例，命名測試文章區 )，如果不想被編譯 ( 還不想被公開 ) ，可於資料夾命名加下底線 _→\_測試文章區，如此一來就可避免被編譯到 public。
      另外 source 下的主要資料夾只有 _posts，所以只有 _posts 加下底線還是會被編譯出來。
    • 單一文章不想被編譯 : 例如 _posts 資料夾底下的 第二篇文章.md 不想上傳上去，可直接加上下底線 _ → \_第二篇文章.md ，如此一來就可避免被編譯到 public。
  • 專案/scaffolds 資料夾 : 預設模版的資料夾
    • draft.md 草稿
    • page.md 頁面
    • post.md 文章

遇到部落格無法開啟之類的問題

如果部落格遇到不能開之類的問題可嘗試使用此指令，去清掉記憶體 ( 路徑 : 專案/db.json )，不建議直接手動刪除 db.json 檔案內的東西，請使用指令 hexo clean，執行完後 db.json 檔案會不見。

Hexo 常用指令

1
2
3
4
5
6
$ hexo deploy #部署
$ hexo clean #清除
$ hexo generate #生成靜待網頁
$ hexo new '文章名稱' #新增文章
$ hexo nex page 'ssss' #新增頁面
$ hexo serve #開啟伺服器

參考資訊

  1. 六角學院直播 - 架設自己的部落格超 Easy | Hexo 5
  2. 試著學 Hexo - 部署你的第一個部落格
  3. 試著學 Hexo - 你不能不學的 Git 基本指令
  4. 試著學 Hexo - 認識 Hexo 目錄結構
  5. Hexo 新增標籤及分類頁面
  6. Hexo 配置 / 網址
  7. Hexo 自訂 / 永久連結 ( permalink 永久連結 )
  8. Hexo Url 優化(SEO) ( 搜尋 permalink )
  9. Hexo-永久連結設定