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!🚀
延伸閱讀
---