使用Hugo網站生成器來快速建立屬於自己的網頁

之前寫過找對架設網站的目的方向很重要！新手的一年網站經營心得一文，裡面提到關閉自架網站後，我轉而使用方格子跟 Medium 搭配 Notion 筆記軟體來記錄分享學習思考的內容，但發現因為使用習慣問題－對於已經寫在 Notion 的筆記還要再複製貼上排版進方格子跟 Medium 這件事，讓我在記錄分享這塊有點偷懶XD

九月份左右整理自己 github 內專案時，看到朱騏老師【懶人包】使用 Hugo 5 分鐘內快速架設個人網站，號稱現在最快的自架網站方式一文中推薦的 Github 免費架站術！輕鬆打造個人品牌這堂hahow課，花了兩個晚上聽完並實作建立好網站板型架構，並經過後續三個月的測試後，終於確定這是對現在的我最沒有壓力分享及記錄的方式。

Github 免費架站術！輕鬆打造個人品牌這堂課中，古老師手把手教你如何使用 Hugo 網站生成器產生html網頁架構，並放在github pages上，建立起屬於自己的個人網頁。老師講解的非常清楚，同時也可以參考其它同學的網站作品，來完整自己對自己個人網站的設計。另外可以先用筆記軟體notion像word一樣方便記筆記後，由它自動產出md格式的文章再用hugo等，使記錄分享想法更方便~

下面簡記是課程內容及我自己做的一些調整~

課程內容與調整

使用的版型: cleanwhite

第一章: 認識github跟github pages並簡單實作

複習github跟github pages相關知識

第二章: 認識及安裝hugo

hugo 的功用就是幫你產生 html 程式碼
安裝及設定 hugo
1. 下載 hugo 及喜歡的 hugo themes
2. 解壓縮並把 hugo themes 裡的 exampleSite 拉出來放到 D槽
3. 新增 themes 資料夾，並放進剩下的 hugo themes
4. 把 hugo.exe 拉過來放到跟 themes 同一層 → 在位址列打開 cmd，然後輸入 hugo server
用 vs code 開啟 hugo 並修改config
- 下載toml套件
- baseURL=”https://sysherrylee.github.io/”
- 連結社交網站

第三章: 使用markdown寫一篇文章

markdown介紹 → 這邊我使用notion紀錄想法並匯出成markdown
其它: hugo特有支援－shortcodes，非標準的markdown語法，用來插入各種類型檔案，譬如說 youtube 影片

第四章: 新增功能

評論功能 → 這邊我使用 github utterances 而非第三方網站功能 disqus，簡單維護
google analytics → GA4設定及分析，值得反覆觀看的一集
google search console → 讓使用者可以透過google搜尋找到你的網站，影片介紹包含如何設定sitemap及界面分析，若想知道更多可以搜尋SEO這個關鍵字
google adsense → 可以新增google廣告賺點廣告收入
這邊自己再新增 pagefind 搜尋功能 → hugo 完之後，再輸入 npx pagefind --site public 建立網頁索引即可，設定操作可參考 Static Search on Hugo: The Journey to Pagefind v1.0 — Liam Bigelow // HugoConf 2023，可以使用 github action 減少生成索引的步驟

第五章: 客製化版型

可以修改html、css等部分，譬如說時間格式
可以新增自己的履歷等
md部分的渲染可以以notion來處理