雖然 Hexo 要完成架設 Blog 僅僅是幾秒鐘的時間就完成，但是在細部調整時還是會遇到不少困難，以下記錄了一些問題排除，也簡介該如何運用 Hexo 的主題做出個人化的配置修改。

1. 啟動本地伺服器（hexo server）時出現告警

• 使用版本：
  Hexo: 5.4.0

• 錯誤訊息：

  $ hexo -s                              
  (node:87224) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:87224) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
  (node:87224) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
  (node:87224) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
  (node:87224) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
  (node:87224) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
  

• 參考資料：爬了一些文章，大概從 2020 年起就有相關的資訊，後續改版會不會修正不得而知，最後參考好一則博部落格的文章解決。

• 發生原因：Hexo 依賴的 nib@1.1.2 套件指定使用較舊版本的 stylus，這個套件已經停止維護，所以需要自己修改解決。

• 解決方式：

  1. 編輯 package.json 專案設定檔，加入以下設定指定最新的 stylus 版本：

  "resolutions": {
    "stylus": "^0.54.8"
  }
  

  2. 執行指令 yarn install 安裝完就完成了。（** npm install 無效 **）

• 注意事項：如果透過指令安裝了其他的主題，該設定可能會被覆蓋，再次出現告警，只要再次執行 yarn install 應該就能修復。

2. 讓 Hexo 在 Github Page 專案中與其他檔案共存

• 問題說明：在 Hexo 發佈到 Github 時會覆蓋掉整個專案目錄，如果想要在裡面放自己寫好的其他靜態頁面，或是專案根目錄存放 README.md 來打造華麗的頁面（可以參考Will 保哥 的 Github）都會因為 deploy 這個動作被蓋掉。

• 解決方式：

  1. 先將要跟著一起部署到 Github 的檔案放到 source 資料夾裡面。
  2. 修改 _config.yml 設定檔，找到 skip_render 這個字眼，並加入檔名或是資料夾名稱

  skip_render: 
    # 單檔案
    - README.md
    # 整個資料夾（包含底下所有檔案）
    - mypage/*
  

3. Hexo 套用主題

1. 到 Hexo Themes 尋找喜歡的版型。
   (如果點進去發現連結已經失效，就換一個吧！)

2. 範例頁面通常有這個主題的 Github 連結，本次以 Hueman 這個主題為例，找到小貓的圖示就可以順利到達他的 Github 專案。

3. 接著就來找他的說明文件（Hueman 是放在 Github 首頁的最底下），每個主題因為撰寫人不同，擺放位置都不太一樣。

4. 找到安裝方式（有些主題可能放在首頁，有些是寫在文件裡）。

5. 開始安裝，有些主題是用 git clone 的方式讓你將專案複製下來，有些可以使用 npm install 的方式安裝，就看文件怎麼寫，還要注意以下幾點：

   • 使用 git clone 的方法可能會需要在終端機切換當前目錄位置，需看清楚文件說明。
   • 安裝步驟可能還有其他的額外設定，請將文件看完確保沒有遺漏。

6. 修改 Hexo 裡面的 _config.yml 設定檔，把 theme 的內容改成主題的名稱。

   thene: hueman
   

7. 完成修改後可以先執行一次 hexo cl && hexo g && hexo s 來重建頁面並啟動本地伺服器檢查是否成功。

4. Hexo 個人化樣式設定

1. 佈景主題的設定方式大致有兩種：

   • 編輯在 themes/主題名稱 的 _config.yml 檔案（通常是使用 git clone 下載的主題）。
   • 在網站根目錄建置 _config.主題名稱.yml 來編輯（部分使用 npm 安裝的主題），這種類型的主題在安裝完後網站資料夾不會新增任何檔案，而是整個套件都被放在 node_modules 裡面，可以到裡面找到主題的_config.yml 檔案，複製到自己網站根目錄，並變更檔名為 _config.主題名稱.yml 來做修改。

2. 本次介紹的 Hueman 主題屬於前者，所以可以開啟 themes/hueman/_config.yml 這個檔案來修改，至於修改方式當然就是參考專案文件啦！

3. 如果有些顏色想改掉，但是配置裡面沒有，可以在主題的資料夾裡面搜尋關鍵字 variable，通常會用這個名稱來存放各種顏色、單位樣式，以 Hueman 為例，可以找到 _variables.styl 這個檔案，應該大部分的顏色都能在這邊更改了！

4. 如果是版面配置想要做顏色以外的調整，可以搜尋關鍵字 style，以 Hueman 為例，可以找到 style.styl 這個檔案，來加入自己想設定的樣式了（需要具備自行撰寫 css 的能力）。