Hugo 入門指南：從零開始架設你的靜態網站
Hugo 入門指南：從零開始架設你的靜態網站
什麼是 Hugo？
Hugo 是一款基於 Go 語言 開發的靜態網站生成器，以其 高效能 和 易用性 著稱。透過 Hugo，你可以快速建立部落格、技術文件網站或個人作品集，而無需使用後端伺服器或資料庫。
Hugo 的優勢
- 極速生成：Hugo 可在 毫秒級 內產生靜態頁面，特別適合大型網站。
- 簡單易學：基於 Markdown 撰寫內容，讓編輯變得直覺。
- 靈活的模板：支援多種 佈景主題，可自訂網站外觀。
- SEO 友善：內建 SEO 優化，如 Open Graph、Sitemap 及 JSON-LD 支援。
安裝 Hugo
1. 確認 Go 環境
Hugo 依賴 Go 語言，但大部分 Hugo 用戶不需要手動安裝 Go，因為 Hugo 提供 獨立二進位檔。
2. 下載 Hugo
Windows
使用 Chocolatey 安裝：
choco install hugo -confirm
macOS
使用 Homebrew 安裝：
brew install hugo
Linux
透過 Snap 安裝：
sudo snap install hugo
安裝完成後，執行以下指令確認：
hugo version
若成功安裝，應該會顯示 Hugo 版本號，如：
hugo v0.123.0
建立第一個 Hugo 網站
1. 創建新專案
使用 Hugo 指令建立新網站：
hugo new site my-blog
cd my-blog
2. 選擇佈景主題
Hugo 支援多種 佈景主題，可至 Hugo Themes 瀏覽並選擇適合的主題。例如，安裝 ananke 佈景主題：
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
3. 建立第一篇文章
hugo new posts/hello-world.md
這會在 content/posts/ 資料夾內建立 hello-world.md，開啟並編輯：
---
title: "Hello World"
date: 2024-11-16
draft: true
---
這是我的第一篇 Hugo 文章！
4. 啟動本地伺服器
hugo server
瀏覽 http://localhost:1313/ 即可看到網站內容。
Hugo 部署方式
當網站內容準備好後，可以使用 Hugo 生成靜態頁面並部署至 GitHub Pages、Vercel 或 Netlify。
1. 生成靜態頁面
hugo -D
Hugo 會將靜態檔案輸出至 public/ 資料夾。
2. 部署至 GitHub Pages
cd public
git init
git remote add origin https://github.com/你的帳號/你的倉庫.git
git branch -M main
git add .
git commit -m "部署 Hugo 網站"
git push -u origin main
然後到 GitHub 設定 GitHub Pages，選擇 main 分支，即可讓網站上線。
總結
Hugo 是一款 高效、靈活且易於上手 的靜態網站生成器，適合架設個人部落格、企業網站或技術文件。本篇介紹了 安裝 Hugo、建立新網站、使用佈景主題 及 部署方式，希望能幫助你快速上手 Hugo！🚀
延伸閱讀
---