上篇文章分享了如何在網站安裝 Google Analytics（GA）來分析網站的瀏覽數據，而這篇文章要教大家如何設定 Google Search Console，以及上傳網站的 Sitemap（網站地圖），讓自己的網站可以被搜尋。

驗證自己的網站是否能被 Google 搜尋

在 Google Search 的搜尋框輸入 site:你的網址，ex: site:dean9703111.github.io

如果搜尋結果為「請使用 Google Search Console」，就代表你的網站尚未被 Google 收錄，別人也無法從 Google 找到你的網站。

設定 Google Search Console

點擊「請使用 Google Search Console」便會進入如下頁面：

因為目前的網域是使用 GitHub 的，所以要選擇「網址前置字元」，並貼上自己 GitHub 的網址。

如果你有跟著上一篇文章乖乖設定 GA，就會直接驗證通過。

上傳 Sitemap 到 Google Search Console

點擊「前往資源」後，選擇左側的「Sitemap」，直接貼上 sitemap.xml 點擊提交就好了！

Hugo 專案的 Sitemap（網站地圖）通常是放在「public/sitemap.xml」這個位置，裡面會存放網站所有可點擊的路徑。

剛提交的 sitemap 可能會看到如下的畫面，狀態顯示「無法擷取」。

關於這個問題，Google 官方有給了一些解決方案，網路上也看到有遇到相同問題的人。但如果你的 Sitemap 結構沒有擅自更改，通常是 Google 的奇怪 Bug，可能等一段時間什麼事都沒做就自動恢復了。

但因為筆者有購買自己的網域，所以沒有等他到的狀態轉為成功；由於 SEO 是跟著網址走的，所以這邊是「強烈」建議購買一個自己的網域，相對來說比較不會遇到這些奇怪的狀況（下圖是筆者換成自己的網域，試一次就成功了）。

驗證能否在 Google 搜尋到自己的網站

在 Google Search 的搜尋框輸入 site:你的網址，如果搜尋得到，就代表你設定成功了！

把 Sitemap 提交後，可能要等一段時間文章才會被 Google 收錄；你可以稍微等等，又或是手動把網址輸入到 Google Search Console 上，並要求他「建立索引」（檢索是有可能發生錯誤的，可以多提交幾次嘗試看看）。

結語

以上就是 Hugo 架站的完整教學，做到這邊就完成一個 60 分的網站了。

之所以會說是 60 分，是因為還有許多可以優化的地方，下面舉幾個案例：

1. 網站外型優化：目前套用的是預設模板，可能有些設計跟你的期待不符，但這塊優化就需要一些網頁前端（Frontend）的基礎能力了，ChatGPT 是你成長的好夥伴。
2. Open Graph：如果你把部落格文章分享給朋友，會發現連結沒有縮圖；我們需要增加 OG 標籤，才能讓網站在社群上被漂亮分享。
3. canonical URL：接下來筆者打算將 Medium 文章搬到自己的部落格，為了讓 Google 了解相同內容的狀況下哪篇文章才是本尊，就需要設定這個參數，否則你部落格的流量可能會被其他網站搶走。

接下來會找時間繼續分享這些細節，不想錯過的朋友可以先追蹤筆者的 FB 喔！

我是林鼎淵，如果覺得這邊文章對你有幫助，歡迎追蹤筆者的 Facebook 與 YouTube，我會持續分享實用的新知識 💡

將網站部署到 GitHub Pages 後，如果想知道訪客的行為和網站的成效，就要安裝 Google Analytics（GA）。

Google Analytics 是一個功能強大的免費工具，可以讓你了解訪客的來源、行為，以及網站上的哪些內容最受歡迎。

如果你想持續優化網站的 SEO，GA 就像一個指南針，告訴你正確的執行方向！

註冊 Google Analytics 帳號

可以用 Google 帳號登入 Google Analytics: https://analytics.google.com/

接下來會要你填寫一些資訊，下面是參考：

• 帳戶名稱: 隨意填
• 屬性名稱: 可以填 GitHub 帳號

另外產業類別等其他選項，依照自己實際狀況填寫即可，到最後一步的時候，我們直接選擇「網站」來做設定。

網址的部分選擇貼上先前建立的 GitHub Pages 的網址，然後給他取一個名字就好

取得 Google Analytics 提供的追蹤碼

這邊我們直接點擊剛剛建立的資源。

然後選擇「查看代碼操作說明」。

點擊右側的「手動安裝」，然後將下方程式碼複製下來。

將 Google Analytics 追蹤碼放到 Hugo 模板

然後把畫面切到 Hugo 專案，打開「themes/liva-hugo/layouts/partials/head.html」，滑到最下方，在 </head> 標籤上方貼上程式。

然後將原本 google analitycs 的程式刪除。

然後打開「hugo.toml」，搜尋「Google Analitycs」，將這兩行刪掉，這樣就能移除舊版 GA 的設定了。

測試 Google Analytics 是否設定成功

使用 Hugo 指令產生新的 public 資料夾，然後將資料夾底下的檔案拖到 GitHub Pages 的 Repository，如果對步驟不熟悉，可以先回顧上一篇文章。

將版本更新推送到 GitHub 後，先前往自己部署的 GitHub Pages 的網頁刷新一下。

接著回到 GA 管理的頁面，點擊「首頁」，如果看到「已啟用資料收集功能」就大功告成了！你會在下方看到活躍的使用的人數！

有時 GA 的反應沒那麼快，可能會顯示「尚未收到資料」；你可以多重新整理頁面幾次，通常等個 5 分鐘就會收到資料了。

結語

完成上面的設定後，你就可以透過 GA 的報表來觀察部落格網頁的流量了～

但現在網站還無法在 Google 被搜尋到，所以下一篇文章要分享如何設定 Google Search Console。

我是林鼎淵，如果覺得這邊文章對你有幫助，歡迎追蹤筆者的 Facebook 與 YouTube，我會持續分享實用的新知識 💡

設定好網站的基礎資訊，以及準備好第一篇部落格文章後，跟著教學的步驟操作，就可以將網站部署到 GitHub Pages 了！

在 GitHub 新增一個自己名字的 Repository

登入 GitHub 後，用 自己的帳號名稱.github.io 來新增一個 Repository。

以筆者來說，就是用 dean9703111.github.io，這將會是你日後個人品牌的部落格網址；另外記得要選擇「Public」才能讓大家看得到。

小提醒：如果你帳號建立時跟筆者一樣沒想太多，導致字數超長，這在日後也是可以更新成自己的網域喔！

把 Hugo Public 下的資料夾搬到剛剛建立的 Repository 下

先前我們都是用 hugo server 來啟動網站，現在只需要執行 hugo 即可。

然後直接將生成的「public」資料夾下的內容搬到剛剛建立的 Repository 下即可。

將變更 Push 到 GitHub 上面

接下來可以使用任何你習慣的版控工具來將變更推到 GitHub 上面，下面筆者是用 VSCode 來輸入 commit（描述調整），以及做 git push。

到 GitHub 確認確認部署狀況

回到 GitHub 網頁，如果右下角的「Depoyments」是綠色勾勾，基本上就沒問題了！

接者瀏覽網址（這是筆者的）: https://dean9703111.github.io

就可以順利看到自己的網站與發表的文章嚕！給自己拍拍手！現在可以將個人網站分享給其他人嚕～

結語

儘管看起來很美好，但其實還有如下細節需要設定:

1. Google Analytics: 用來追蹤網站流量成效
2. Google Search Console: 讓自己的網站在 Google 可以被搜尋到
3. 個人網域: 購買個人網域可以讓品牌看起來更專業，且轉換平台時 SEO 不會被綁架

這些細節，筆者也會在後續的文章與大家分享。

我是林鼎淵，如果覺得這邊文章對你有幫助，歡迎追蹤筆者的 Facebook 與 YouTube，我會持續分享實用的新知識 💡

完成 Hugo 外觀的基礎建設後，接下來就可以開始撰寫部落格文章了。

這篇文章會先簡述常見的 Markdown 語法，讓大家了解如何在文章設定大標題、小標題、引述、圖片…等資訊。

然後示範為文章加上「分類（category）、標籤（tag）」，讓我們能輕鬆管理自己部落格的文章。

最後分享筆者推薦的檔案命名規則，以及文章資料夾結構。

使用 Markdown 語法來撰寫文章

過去我們使用 Word，會需要使用上面的工具列來設定文章的標題、列表、粗體、斜體。

而 Markdown 則是用「符號」來設定，範例如下：

「#」開頭的就是標題，數量越少，字體越大，層級越高

# 大標題 h1

#### ▋小標題 h4

這邊就是描述的內容，你可以使用「-」的符號層級:

- 文字的格式
  - 要增加子階層，多兩個空格就可以
  - **粗體**
  - *斜體*
  - ~刪節線~

> 引用的寫法

假使想顯示單行程式，可以用 1 個反引號「`」包起來。

console.log('單行程式');

如果想在某個區塊展示程式或是文字，可以將他們用 3 個連續的反引號包起來「```」

// 可以放程式語言、文字
console.log('程式碼區塊');

用 [超連結](網址) 的結構，就能在文字插入超連結，比如放上筆者的 Facebook 連結。

用 ![img](/images/path) 的結構，則可插入圖片。

讀者可以到「content/blog」底下新增一個「test.md」的文章，測試不同符號對排版的影響。

掌握分類、標籤文章的技巧

從「content/blog」底下隨便點開一篇文章，你會發現最上方有些參數可以設定，下面向大家解釋每個參數代表的意義。

---
title: "文章標題"

# 文章撰寫的時間（新的文章會優先顯示）
date: 2025-01-16T22:07:47+08:00

# 文章是否為草稿，若設定為 true 就不會顯示在頁面上
draft: false 

# 部落格文章封面縮圖
image: "images/post/post-3.jpg"

# 文章的簡短介紹
description: "這是分享文章連結時，會顯示的簡短描述"

# 文章的分類
categories: 
  - "Hugo 架站教學" # 方便使用者在右側篩選（若是新增的分類，就會需要重啟 Hugo 才會生效）
tags:
  - "Hugo" # 這裡的標籤，會在首頁呈現（若是新增的標籤，就會需要重啟 Hugo 才會生效）
  - "Web"
  - "自架站"
  - "教學"

# post type
type: "post" # 原則上維持不變，因為目前都是要貼部落格文章
---

設定 shortscodes 插入 Youtube 影片、IG 貼文

如果想在自己的部落格插入其他社群媒體的元素，可以使用 shortscodes 的方案。

下面是插入 Youtube 影片，以及插入 IG 貼文的範例。

• Youtube 原始 URL: https://www.youtube.com/watch?v=yVfafM70bzY

用 n8n 在 Google Sheet 自動建立 SEO 關鍵字矩陣

• IG 原始 URL: https://www.instagram.com/p/Cu9zfv0vMoR/

View this post on Instagram

用 ChatGPT 生成建議的英文檔名，使用「年月」作為資料夾結構

Hugo 會使用 Markdown 文件的檔名作為網址，如果使用中文命名，那網址就會變得很長。

比如複製這段網址:「http://localhost:1313/blog/中文的網址」，貼上時就會因為編碼變成一長串無法辨識的字「http://localhost:1313/blog/%E4%B8%AD%E6%96%87%E7%9A%84%E7%B6%B2%E5%9D%80/」

如果不知道這篇文章的英文檔名如何取，可以用下面的 Prompt，請 ChatGPT 幫你一把。

幫我將下面的文章標題轉為簡短易懂的英文檔名，單字間使用「-」作為區隔:
1. 挑選合適的主題，在本地安裝並啟動 Hugo
2. 設定 Hugo 部落格網站的基礎參數（自我介紹、圖片、網站 Logo、Email、社群媒體...）
3. 在 Hugo 用 Markdown 撰寫第一篇文章，掌握分類、標籤文章的技巧

另外 content 底下的文章，我建議使用「年月」的方式作為資料夾，比如「202501」。因為文章分類的部分，在「categories、tags」已經有設計了，用年月的結構，反而更容易檢視自己發文的頻率。

另外放置部落格圖片的 assets/images 也是一樣的道理，建議使用「年月/文章檔名」的結構來做存放，這樣更方便管理。

重點：網址的結構在一開始就要決定好，因為網址就像是身分證；一但調整，過去累積的 SEO 就會歸零。

結語

這邊先恭喜大家完成部落格網站的雛形，下一篇文章會帶大家將網站部署到 GitHub Pages，完成這個步驟後，就可以把漂亮的網站分享給朋友了！

我是林鼎淵，如果覺得這邊文章對你有幫助，歡迎追蹤筆者的 Facebook 與 YouTube，我會持續分享實用的新知識 💡

如果還沒安裝好 Hugo 的朋友，可以參考上一篇文章「挑選合適的主題，在本地安裝並啟動 Hugo」

這篇文章將帶你完成 Hugo 網站的基礎設定，包括安裝 VSCode 外掛、調整網站參數、自訂 Logo 與菜單 Menu 等實用技巧，帶你一步步打造更符合個人風格的網站！

安裝 VSCode 外掛（Extension）

Hugo 的基礎設定，大多都在附檔名為「.toml」的設定檔中調整。但預設的字體顏色都一樣，這會增加閱讀與編輯的難度。

建議讀者可以先去 VSCode 的「Extension」搜尋「Toml」，然後找一個使用量最高的外掛來安裝。

安裝完畢後，附檔名為「.toml」檔案的都有分色了。

調整網頁的網址、名稱

打開「config/_default/hugo.toml」，將下面的參數調整成自己的：

• baseURL: 放上自己 Github 的網址，ex: https://xxx.github.io
• languageCode: 原本是英文，我調整為中文（zh-tw）
• title: 調整為自己的網頁名稱，ex: 林鼎淵

調整完後重啟 Hugo，因為在 Local 開發，因此進入的網址會變成「http://localhost:1313」，且網頁上面名稱改變。

將 Logo、作者名稱、Email 調整成自己的

打開「hugo.toml」，搜尋「default parameters」，將下面的參數調整成自己的：

• logo: Hugo 圖片默認放在「assets」資料夾下，到「assets/images/logo.png」，將 logo.png 替換成自己的。
• author: 填上自己的名字，ex: 林鼎淵
• description: 這是網址時，網頁預覽會出現的文字描述，你可以簡述這個部落格會分享的內容
• email: 放上自己的聯絡資訊

另外我這邊將「mobile、location」註解了。

接著搜尋「social site」的區塊，你可以在「link」放上想要導流的社群媒體連結，而不需要的直接移除就好（我僅保留 Facebook、GitHub、Linkedin）。

調整完後，點擊「Contact」可以看到剛剛的調整。

關閉 Newsletter 的功能

Newsletter 是提供使用者訂閱的功能，而這個功能需要與資料庫串接，而靜態網站並沒有資料庫，所以我們要關閉這個功能。

打開「hugo.toml」，搜尋「news letter」，把 enable 變成 false

回到剛剛的頁面，就會發現「Newsletter」的區塊移除了。

調整語言資料夾

打開「config/_default/languages.toml」，你會發現 Hugo 預設有多國語言的設計，一開始默認文章放在「content/english」底下。

你可以沿用這個多國語言的設計，但筆者估計自己沒有這麼多的心力，所以把 contentDir 的「english」這層直接移除了；並將 languageCode 調整為「zh-tw」，設定如下：

# --------------------------
# English language
# --------------------------
[en]
languageName = "En"
languageCode = "zh-tw"
contentDir = "content"
weight = 1

調整自我介紹的內容（About Me）

因為我們上一步將「english」這層資料夾移除，所以要把下面的資料往「content」移，這樣相對路徑才能順利抓到檔案。

接著打開「content/about/_index.md」，調整下面的設定：

• image: 到「assets/images/author.png」，將 author.png 替換成自己的。
• description: 這是網頁預覽時會出現的文字描述。
• 把最下方的文字調整成自己的自我介紹。

調整完後，點擊「About」可以看到剛剛的調整。

調整 or 隱藏自我介紹下方的 My Gallery 相簿集

自我介紹下的「My Gallery」設定路徑在「data/gallery.yml」，你可以將裡面的照片調成為自己的宣傳照，或是將 enable 改為 false 來隱藏這個區塊。

調整、移除不需要的菜單（Menu）

打開「config/_default/menus.en.toml」後，會看到設定會分成 main 跟 footer 兩塊：

• name: 網頁顯示的名稱
• URL: 網頁的路徑
• weight: 排序權重（從左到右）

這邊我就將 main menu 調整如下（移除 contact、name 改為中文、weight 調整）:

# main menu
[[main]]
name = "關於我"
URL = "about/"
weight = 2

[[main]]
name = "文章"
URL = "blog/"
weight = 1

調整網頁的 Logo

如果想使用自己的 Logo，可以輸入以下指令建立對應的靜態文件資料夾：

mkdir static/images

然後在裡面放上自己的「favicon.png」就好了，Logo 僅能用「.png」的檔案喔！

如果發現刷新沒有反應，可能是因為 Cache 問題，安裝 Chrome 外掛 Clear Cache 能有效解決。

結語

成功將網站資訊調整為自己的後，下一步就要開始準備發表文章了。

Hugo 是使用 Markdown 語法來撰寫文章。下一篇文章將跟大家分享如何用 Markdown 撰寫文章，並掌握分類、標籤文章的技巧。

我是林鼎淵，如果覺得這邊文章對你有幫助，歡迎追蹤筆者的 Facebook 與 YouTube，我會持續分享實用的新知識 💡

如果你跟筆者一樣選擇用靜態網站來經營個人品牌，強烈建議收藏這系列用 Hugo 架站的文章。我會從挑選主題、安裝 Hugo 開始，一步步帶你客製化網頁參數，最終將網站部署到 GitHub Pages，並加上 Google Analitycs 來追蹤流量！

什麼是 GitHub Pages？

GitHub 是一個程式碼版本控制的平台，而 GitHub Pages 則是它的一個副產物。

如果你上傳一個副檔名為「.html」的檔案，GitHub Pages 就會把它轉換成漂亮的網頁，並且這個網頁是可以透過 Google 搜尋找到的。

如果你是程式小白也不用擔心，因為筆者接下來會帶大家會「Hugo」這個工具，來產生個人品牌網站的 html 程式碼。

什麼是 Hugo？

「The world’s fastest framework for building websites」

進入 Hugo 官網後，你會看到這段宣傳標語，它號稱自己是全世界最快的個人網站架設工具。

挑選自己喜歡的主題（Theme）

Hugo 有提供豐富的主題供大家選擇，大家只要點擊「Themes」便可瀏覽各主題的預覽圖。

因為筆者的目標是建立個人品牌的部落格，所以選擇旁邊「Blog」的分類，然後就可以像是逛街般挑選自己喜歡的主題了。

看到心儀的主題後，在下載（Download）前，你可以先往下滑。

部分的主題有提供 Demo，可以觀看這個網站具體呈現的效果如何。

因為對個人品牌來說，「文章」是最大重點，所以可以多關注「封面、文字、圖片、程式碼、目錄、標題」等資訊呈現的方式。

因為挑來挑去沒找到合適的，所以筆者選擇了跟古古課程相同的主題（liva）。

安裝 Hugo，從零開始建立自己的個人網站

下面的操作步驟為 Mac 環境，使用 Windows 的朋友請參考官方文件的操作步驟

STEP 1：打開終端機（Terminal）。

STEP 2：安裝 Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

STEP 3：用 Homebrew 安裝 Hugo

brew install hugo

安裝完成後，輸入 hugo version 確認自己有順利安裝

STEP 4：安裝 Hugo 的 liva 主題

git clone https://github.com/gethugothemes/liva-hugo.git

STEP 5：調整資料夾結構，並建立放置主題的 themes 資料夾

mv liva-hugo/exampleSite brandSite
mkdir brandSite/themes
mv liva-hugo brandSite/themes

啟動 Hugo

執行下面指令就可啟動 Hugo

cd brandSite
hugo server

進入 http://localhost:1313/liva/examplesite/ ，如果看到下面的畫面，就恭喜你成功嚕（想關閉用 Ctrl + C 即可）！

排除 Hugo 啟動時的錯誤

但如果讀者遇到這段錯誤也不要害怕：「Error: command error: failed to load modules: failed to download modules: binary with name “go” not found in PATH」，安裝 Go 即可。

brew install go

結語

做到這邊就完成 Hugo 的初始化了，但現在網頁的內容都是主題預設的；筆者會在下一篇文章分享設定部落格網站的基礎參數（自我介紹、圖片、網站 Logo、Email、社群媒體…）的技巧。

在文章的最後，要特別感謝古古的後端筆記，許多操作步驟與設計邏輯，筆者都是參考她在 Hahow 開設的「Github 免費架站術！輕鬆打造個人品牌」這堂課，如果想知道更詳細的操作細節，歡迎到 Hahow 上支持選購。

我是林鼎淵，如果覺得這邊文章對你有幫助，歡迎追蹤筆者的 Facebook 與 YouTube，我會持續分享實用的新知識 💡