[Blog] 用Hugo架設網誌成功了...嗎？

發布於 May 30, 2023  •  3 分鐘  • 1306 字  • 文章分類: 

blog。

我成功了嗎？ 如果有看到這篇文章就表示我成功了YA！

因為種種原因最後決定嘗試以 hugo 來架設網站，身為一個只會一點點微薄 css 跟 html 語法的人，所有的過程只能依靠 Google 大神（不過後來我有 Bandy 大神幫我，感謝 Bandy 拯救迷途的我QQ），這篇簡單總結一下一個程式小白（也可以稱為是文盲）的我在架設路上遇到的坑吧🥲

首先我用 brew 來安裝 hugo ，目前為止透過終端機按照指示都沒有問題，主題我挑選了 Blist ，過程主要參考 littlebookboy 的 Hugo 貼身打造個人部落格 系列。

以下直接條列式我踩過的坑：

1. 需要安裝 node.js
   按照 Blist 主題的指示很快遇到第一個問題，那就是我沒有 node.js ，沒有就沒有啊，我就安裝嘛，這個我會！

2. 執行 npm install 失敗
   Configuring theme 的第二個步驟我就遇到 npm install 失敗，看了一下應該是權限的問題，在指令前面加上 sudo 解決了，同理第三步的 npm i -g postcss-cli 也要用 sudo 來以管理者的權限執行。

3. zsh: xxx command not found
   接著遇到了 zsh command not found，查了一下是 path 的問題，我後來按照 skyroxas1521 提供的方法解決。

4. Configuration File 更名
   hugo 現在最新版本的 Configuration File 已經從 Config.toml 改為 hugo.toml 了，但目前網路上大部分（幾乎所有）的教學文章都還是以 Config.toml 來說明，所以記得看到 Config.toml 直接在心裡自動轉換為 hugo.toml 🤣

5. 中文字數統計
   我用的主題是包含字數統計跟閱讀時間的，但他預設的語言包用的是英文、德文、法文，所以並沒有特別為中文字符的統計做設定，hugo 預設統計英文字符，如果要統計中文、日文、韓文要在 hugo.toml 中加上一行 hasCJKLanguage = true

6. 不吃行內 html
   如果運行在本機端時發現在 .md 檔案內寫的 html 都沒有反應的話，需要在 hugo.toml 中加上

   [markup.goldmark.renderer]
   unsafe = true

   我不理解為什麼預設是 disable 行內 html啦，也不理解為什麼是 unsafe = true 這個看起來這麼可怕的東西哈哈哈哈哈哈😅

7. Page Bundles
   hugo產出網頁時用到的圖片需要放在 static 這個資料夾下面，但當我寫了兩篇網誌之後我就覺得這個方法很弔詭(?)。放在 static 下的資料在你渲染成靜態網頁時全部都會直接放在 root 資料夾裡面，為了不讓網誌的圖片散落在根目錄下我開了 image 這個資料夾存放，但這很不符合我平常整理檔案的原則，而且如果沒有一開始就把命名規則都規劃好的話，之後文章多了整理或修改都會很麻煩。
   
   後來我發現 littlebookboy Day 13. Hugo Content - Section 與 Page Bundle 這篇文章，也可以參考 hugo 官方的 Page Bundles 。總之，我把 blog 下的每一篇文章都獨立成一個資料夾，資料夾直接命名為你要設定的網址名稱，然後在該資料夾下建立 index.md 來產出內容，圖片跟檔案都放在同一個資料夾內，直接用 markdown 語法放檔案名稱就可以了！

8. 在 List 頁面使用 bundle source 的圖片
   接續上面一項，如果把圖片都放在子資料夾裡面的話，那如果你的主題樣式有需要在 list 放圖片時該怎麼辦？我參考了 jmooring 的回答，以相同的規則命名會在 List 出現的封面圖，我是命名為 xxx-cover，然後在 layout 資料夾中設定 list 的那一個檔案中，將原本的圖片變數改為 {{ with .Resources.GetMatch "*cover.*" }}，就完成了～

9. Gitgub Pages 上的 favicon
   我在 Freepik 找了一個可愛的貓貓用電腦當我的 favicon，但 push 到 GitHub Pages 之後他消失了…🥲 後來發現問題應該是 GitHub Pages 的 favicon 不能放在根目錄下的關係，我在 static 下新增一個資料夾，將原本放在裡面的 favicon 移到子資料夾後改 favicon 路徑再 push 一次就成功顯示囉！
   

10. 想在10點以內完成可能嗎？
    看來是不可能，關於我與 github 的糾纏好像可以獨立成一篇，那就先這樣，我累了QQ

我用這個主題是想要用他的主要佈局架構，css 的細節還沒有調整，目前文章看起來還有點不太順眼，留言也還是預設的樣子，之後再慢慢來吧～

  

• hugo

• blog

• github