快轉到主要內容
  1. 文章/

[Hugo]如何初步建立網站

· loading ·
Hugo 網站開發 靜態網站 部落格 Blowfish
Bukun
作者
Bukun
慢慢學習,持續成長
目錄
Hugo - 系列文章請點此查看!
➡️ 1: 本文

Hugo 是一款高效的靜態網站生成器,非常適合建立個人部落格或公司官網。
本篇文章將從零開始,逐步建立一個 Hugo 網站。
如果有任何問題,可以在 Hugo 官方論壇 上尋求幫助。

安裝 Hugo
#

首先,需要在電腦上安裝 Hugo,根據作業系統選擇適合的方法。

macOS
#

使用 Homebrew 安裝
#

brew install hugo

如果需要 Hugo 的 extended 版本(用於處理 SCSS/SASS),使用:

brew install hugo_extended

Windows
#

使用 Scoop 安裝
#

scoop install hugo

或使用 Chocolatey 安裝
#

choco install hugo -confirm

驗證安裝
#

安裝完成後,使用以下指令確認是否成功安裝:

hugo version

若能看到 Hugo 的版本資訊,表示安裝成功。

hugo v0.142.0

建立 Hugo 專案
#

要建立新的 Hugo 網站,執行:

hugo new site my-blog

這將會建立一個新的 Hugo 專案,目錄結構如下:

my-blog/
├── archetypes/      # 預設文章模板
├── content/         # 文章內容
├── layouts/         # 版型檔案
├── static/          # 靜態資源 (圖片、CSS、JS)
├── themes/          # 佈景主題
├── config.toml      # 站點設定檔案

選擇佈景主題
#

Hugo 可以使用不同的佈景主題來快速建立網站。從 Hugo Themes 挑選適合的主題,例如 blowfish,然後執行下載指令:

cd my-blog
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

並在 config.toml 中設定主題:

theme = "blowfish"

設定網站基本資訊
#

config.toml 中,新增以下內容來設定網站基本資訊:

baseURL = "http://localhost:1313/"
languageCode = "zh-TW"
title = "我的 Hugo 網站"
theme = "ananke"

建立第一篇文章
#

使用以下指令建立一篇 Markdown 文章:

hugo new posts/my-first-post.md

然後用文字編輯器打開 content/posts/my-first-post.md,並填寫內容:

---
title: "我的第一篇 Hugo 文章"
date: 2025-02-06
draft: true
---

這是我的第一篇 Hugo 文章!

啟動本地開發伺服器
#

當有了佈景主題和文章後,可以使用以下指令啟動本地伺服器來預覽網站:

hugo server -D

然後打開瀏覽器,訪問 http://localhost:1313/,你將會看到目前快速建立的網站!

總結
#

現在已經成功建立了一個 Hugo 網站,可以開始撰寫部落格文章。
下面文章將更深入設定自訂主題 ,讓網站更具特色!
如果有問題歡迎下面留言討論!

Hugo - 系列文章請點此查看!
➡️ 1: 本文