HUGO
Menu
GitHub 87548 stars Mastodon

快速開始

在幾分鐘內創建一個 Hugo 站點。

在本教程中,您將:

  1. 創建一個站點
  2. 添加內容
  3. 配置站點
  4. 發布站點

前提條件

開始本教程之前,您必須:

  1. 安裝 Hugo(extended 或 extended/deploy 版本,v0.146.0 或更高版本)
  2. 安裝 Git

您還必須熟悉命令行操作。

創建站點

命令

如果您是 Windows 用戶:

  • 不要使用命令提示符(Command Prompt)
  • 不要使用 Windows PowerShell
  • 請從 PowerShell 或 Linux 終端(如 WSL 或 Git Bash)運行這些命令

PowerShell 和 Windows PowerShell 是不同的應用程序

驗證您已安裝 Hugo v0.146.0 或更高版本。

hugo version

運行以下命令創建一個使用 Ananke 主題的 Hugo 站點。下一節將解釋每個命令。

hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

在瀏覽器中訪問終端顯示的 URL 查看您的站點。按 Ctrl + C 停止 Hugo 開發服務器。

命令解釋

quickstart 目錄中創建項目的 站點骨架

hugo new site quickstart

將當前目錄更改為項目根目錄。

cd quickstart

在當前目錄中初始化一個空的 Git 倉庫。

git init

Ananke 主題克隆到 themes 目錄中,作為 Git 子模塊 添加到您的項目。

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

將一行配置追加到站點配置文件中,指定當前主題。

echo "theme = 'ananke'" >> hugo.toml

啟動 Hugo 開發服務器以查看站點。

hugo server

Ctrl + C 停止 Hugo 開發服務器。

添加內容

向您的站點添加新頁面。

hugo new content content/posts/my-first-post.md

Hugo 在 content/posts 目錄中創建了文件。用編輯器打開它。

+++
title = '我的第一篇文章'
date = 2024-01-14T07:07:07+01:00
draft = true
+++

注意 front matter 中的 draft 值為 true。默認情況下,Hugo 在構建站點時不會發布草稿內容。了解更多關於 草稿、未來和過期內容 的信息。

在文章正文中添加一些 Markdown 內容,但不要更改 draft 值。

+++
title = '我的第一篇文章'
date = 2024-01-14T07:07:07+01:00
draft = true
+++
## 介紹

這是 **粗體** 文本,這是 *斜體* 文本。

訪問 [Hugo](https://www.hugodoc.com) 網站!

保存文件,然後啟動 Hugo 開發服務器查看站點。您可以運行以下任一命令來包含草稿內容。

hugo server --buildDrafts
hugo server -D

在終端顯示的 URL 查看您的站點。在繼續添加和更改內容時保持開發服務器運行。

當您對內容滿意時,將 front matter 中的 draft 參數設置為 false

Hugo 的渲染引擎遵循 CommonMark Markdown 規范。CommonMark 組織提供了一個有用的 在線測試工具,由參考實現提供支持。

配置站點

使用編輯器打開項目根目錄中的 站點配置 文件(hugo.toml)。

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = '我的新 Hugo 站點'
theme = 'ananke'

進行以下更改:

  1. 設置生產站點的 baseURL。此值必須以協議開頭並以斜槓結尾,如上所示。
  2. languageCode 設置為您的語言和地區。
  3. 設置生產站點的 title

啟動 Hugo 開發服務器查看您的更改,記得包含草稿內容。

hugo server -D

大多數主題作者會提供配置指南和選項。請務必查看您主題的倉庫或文檔站點以獲取詳細信息。

The New Dynamic,Ananke 主題的作者,提供了配置和使用的 文檔。他們還提供了一個 演示站點

發布站點

在這一步中,您將 發布 您的站點,但不會 部署 它。

當您 發布 站點時,Hugo 會在項目根目錄的 public 目錄中創建整個靜態站點。這包括 HTML 文件以及圖片、CSS 文件和 JavaScript 文件等資源。

發布站點時,您通常 希望包含 草稿、未來或過期內容。命令很簡單:

hugo

要了解如何 部署 您的站點,請參閱 托管和部署 部分。

尋求幫助

Hugo 的 論壇 是一個活躍的用戶和開發者社區,他們回答問題、分享知識並提供示例。快速搜索超過 20,000 個主題通常就能找到答案。在提出第一個問題之前,請務必閱讀 請求幫助 指南。

其他資源

有關學習 Hugo 的其他資源,包括書籍和視頻教程,請參閱 外部學習資源 頁面。


Last updated: January 1, 0001
Improve this page