Hugo是世界上最受歡迎的靜態網站生成器之一，這是有原因的。它不僅具有超快的構建處理能力，而且還具有強大的模板功能，支援引數和短程式碼。
在本教程中，你學會了如何配置Hugo，建立一個新專案，新增內容檔案，編輯主題檔案，並部署一個完成的靜態網站。我們建議閱讀Hugo的官方文件，以瞭解更多關於Hugo及其更高階的功能，如自定義函式、前臺事務和CSS/JS buildpacks。
你對Hugo和其他靜態網站生成器有什麼看法？請在下面的評論中讓我們知道!
- 什麼是Hugo框架？為什麼它很受歡迎？
- 如何安裝Hugo框架
- Hugo框架命令和配置
- 如何建立一個Hugo網站
- 如何向Hugo網站新增主題
- 如何預覽一個Hugo網站
- 如何向Hugo網站新增內容
- 如何部署一個Hugo網站
什麼是Hugo框架？為什麼它很受歡迎？
Hugo網站主頁
Steve Francia最初在2013年開發了Hugo靜態網站生成器，Bjørn Erik Pedersen在2015年接任該專案首席開發者。Hugo是一個開源專案，這意味著任何人都可以檢視和改進它的程式碼。
作為一個靜態網站生成器，Hugo接收Markdown內容檔案，通過主題模板執行，並生成HTML檔案，你可以很容易地在網上部署–而且它做這一切都非常快。
在2021年，有幾十種，甚至幾百種靜態生成器。每個靜態網站生成器都有其吸引力。Jekyll在Ruby開發者中很受歡迎，雖然它不像其他選項那樣快，但它是最早看到廣泛採用的靜態網站生成器之一。Gatsby是另一個流行的SSG，很適合開發可靜態部署的動態功能的網站。
那麼，在這麼多的SSG中，是什麼讓Hugo脫穎而出呢？
Hugo快如閃電
就原始效能而言，Hugo是世界上最好的靜態網站生成器。與Jekyll相比，Hugo被Forestry證明是35倍的速度。同樣，Hugo可以在10秒內渲染一個10,000頁的網站，而這個任務需要Gatsby花半個多小時來完成。Hugo不僅在構建時間上是最快的SSG，而且它的安裝也很迅速。
Hugo以獨立的可執行檔案的形式出現，而不像Jekyll、Gatsby和其他需要用包管理器安裝依賴的SSG。這意味著你可以立即下載並使用Hugo，而不必擔心軟體的依賴性。
Hugo模板化很容易
在SSG的行話中，”templating” 指的是在HTML頁面中為動態內容插入新增佔位符的過程。要訪問一個頁面的標題，你可以使用 {{ .Title }} 變數。因此，在Hugo的HTML模板中，經常可以看到 {{ .Title }} 被包裹在H1標籤中，像這樣：
<h1>{{ .Title }}</h1>
在構建時，Hugo會自動抓取內容檔案中的標題，並在兩個<h1>標籤之間插入標題。Hugo有各種內建的模板變數，你甚至可以在構建時編寫自定義函式來處理資料。對於模板，Hugo使用Go的內建 html/template 和 text/template 庫。這有助於減少應用程式的臃腫，因為Hugo不需要為模板安裝第三方庫。
如何安裝Hugo框架
Hugo以編譯可執行檔案的形式出現，這意味著你不必為了開始工作而下載和管理許多依賴關係。它可用於MacOS、Windows和Linux。
Important：下面的安裝說明需要一個軟體包管理器，它將為你下載Hugo的可執行檔案。如果你喜歡從原始碼構建Hugo，請參考官方Hugo文件。
如何在MacOS和Linux上安裝Hugo
推薦的macOS和Linux的安裝方法需要Homebrew，一個用於安裝和更新應用程式的軟體包管理器。如果你還沒有安裝Homebrew，你可以在終端執行以下命令來安裝它。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
在Homebrew安裝完畢後，執行下面的命令來安裝Hugo：
brew install hugo
如何在Windows上安裝Hugo
對於Windows使用者，Hugo可以使用Chocolatey或Scoop軟體包管理器來安裝。由於安裝Chocolatey和Scoop的說明比Homebrew要複雜一些，我們建議參考他們的官方文件頁面，這裡和這裡。
在安裝完Chocolatey或Scoop後，你可以用以下命令安裝Hugo（取決於你的軟體包管理器）：
choco install hugo-extended -confirm
scoop install hugo-extended
如何驗證Hugo的安裝是否正確
要驗證Hugo是否已經正確安裝，請執行以下命令：
hugo version
這條終端命令應輸出有關當前安裝的Hugo版本的資訊，像這樣：
hugo v0.85.0+extended darwin/arm64 BuildDate=unknown
Hugo框架命令和配置
在我們深入到用Hugo建立靜態網站之前，讓我們熟悉一下它的各種CLI命令和配置檔案引數。
Hugo CLI命令
hugo check– 執行各種驗證檢查hugo config– 顯示一個Hugo網站的配置hugo convert– 將內容轉換為不同的格式hugo deploy– 將你的網站部署到雲服務提供商那裡hugo env– 顯示Hugo版本和環境資訊hugo gen– 提供對各種生成器的訪問hugo help– 顯示有關命令的資訊hugo import– 讓你從其他地方匯入一個網站hugo list– 顯示各種內容型別的列表hugo mod– 提供對各種模組助手的訪問hugo new– 讓你為你的網站建立新內容hugo server– 啟動一個本地開發伺服器hugo version– 顯示當前的Hugo版本
Hugo CLI也有各種命令列標誌，可以為某些命令指定額外的選項。要檢視Hugo命令列標誌的完整列表（有很多），我們建議使用 hugo help 命令來顯示所有可用命令列標誌的列表。
Hugo配置檔案
Hugo的配置檔案支援三種格式。YAML, TOML, 和JSON。同樣，Hugo的配置檔案是config.yml, config.toml, 或 config.json，你可以在Hugo專案的根目錄下找到它。
Hugo配置檔案
下面是一個典型的YAML格式的Hugo配置檔案的樣子：
DefaultContentLanguage: en theme: - wbolt-static-site contentdir: content layoutdir: layouts publishdir: public paginate: 5 title: Wbolt Static Site description: "This is a static site generated with Hugo!" permalinks: post: :slug/ page: :slug/ tags: "tag/:slug/" author: "author/:slug/"
如果你以前使用過WordPress或其他CMS，一些配置選項可能對你來說很熟悉。例如，wbolt-static-site 是網站主題的名稱，Wbolt Static Site 是SEO元標題， paginate （每頁文章的數量）是5。
Hugo有幾十個配置選項，所有這些你都可以在Hugo的官方文件中探索。如果你在開發Hugo網站時需要做任何全域性配置的改變，有可能你需要編輯這個配置檔案。
如何建立一個Hugo網站
現在我們已經瞭解瞭如何安裝和使用Hugo CLI以及Hugo配置檔案的基本知識，讓我們建立一個新的Hugo站點。
要建立一個Hugo站點，請使用下面的命令（如果你願意，可以把my-hugo-site改成其他名字）：
hugo new site my-hugo-site
建立一個新的Hugo站點
接下來，導航到網站資料夾，你應該看到以下檔案和資料夾：config.toml檔案、archhetypes資料夾、content資料夾、layouts資料夾、themes資料夾、data資料夾和static資料夾。讓我們快速瀏覽一下這些檔案和資料夾中的每一個是什麼。
config.toml檔案
正如我們上面所強調的，Hugo的主要配置檔案包含你的網站的全域性設定。
Archetypes資料夾
archetypes資料夾是你儲存以Markdown格式的內容模板的地方。如果你的網站有多種內容格式，archetype就特別有用。有了Hugo原型，你可以為你網站上的每個內容型別建立一個模板。這可以讓你預先用所有必要的配置設定來填充生成的Markdown檔案。
例如，如果你有一個播客內容型別用於顯示你的播客劇集，你可以在 archetypes/podcast.md 中建立一個新的archetype，內容如下：
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
description: ""
season:
episode:
draft: true
---
有了這個播客archetype，你就可以使用下面的命令來建立一個新帖子：
hugo new podcast/s1e6_interview-with-winsta-ceo.md
現在，如果你開啟新建立的帖子，你應該看到這個：
--- title: "Interview with WBOLT CEO" date: 2021-05-20T13:00:00+09:00 description: "" Season: 1 episode: 6 draft: true ---
如果沒有原型，你將不得不為你建立的每個新帖子手動指定前臺引數。雖然原型一開始可能看起來很複雜，沒有必要，但從長遠來看，它們最終可以為你節省大量時間。
Content資料夾
content資料夾是你真正的帖子內容所在的地方。Hugo同時支援Markdown和HTML格式，Markdown因其易於使用而成為更受歡迎的選擇。除了作為帖子的一般儲存空間外，你還可以使用content資料夾來進一步組織帖子內容。
Hugo將內容資料夾中的每個頂級目錄視為一個內容部分。Hugo中的內容區類似於WordPress中的自定義帖子型別。例如，如果你的網站有帖子、頁面和播客，你的內容資料夾就會有posts, pages 和 podcasts 目錄，這些不同的帖子型別的內容檔案就會在這裡。
Layouts資料夾
layouts資料夾包含定義網站結構的HTML檔案。在某些情況下，你可能會看到一個沒有layouts資料夾的Hugo網站，因為它不一定要在專案的根目錄下，而是可以在主題資料夾中。
與WordPress主題使用PHP製作模板類似，Hugo模板由基本的HTML組成，並由Golang的內建 html/template 和 text/template 庫提供額外的動態模板。生成你的網站的HTML標記所需的各種HTML模板檔案都在layouts資料夾中。
Themes資料夾
對於那些喜歡用更獨立的方式來儲存模板檔案和資產的網站，Hugo支援一個themes資料夾。Hugo的主題與WordPress的主題類似，它們被儲存在一個主題目錄中，幷包含一個主題運作所需的所有模板。
雖然有些Hugo使用者喜歡將主題相關的檔案儲存在專案的根目錄中，但將這些檔案儲存在themes資料夾中，可以更方便地管理和分享。
Data資料夾
Hugo的data資料夾是你可以儲存生成網站頁面所需的補充資料（JSON、YAML或TOML格式）的地方。資料檔案對於那些直接儲存在內容或模板檔案中可能很麻煩的大型資料集是很有好處的。
例如，如果你想建立一個從1960年到2020年的美元通貨膨脹率的列表，這將需要大約80行來表示資料（每年一行）。與其把這些資料直接放在內容或模板檔案中，你可以在data資料夾中建立它，然後用必要的資訊填充它。
Static資料夾
Hugo的static資料夾是你儲存不需要任何額外處理的靜態資產的地方。static資料夾通常是Hugo使用者儲存圖片、字型、DNS驗證檔案等的地方。當Hugo網站被生成並儲存到一個資料夾中以方便部署時，static資料夾中的所有檔案都會被原樣複製。
如果你想知道為什麼我們沒有提到JavaScript或CSS檔案，那是因為它們經常在網站開發過程中通過管道進行動態處理。在Hugo中，JavaScript和CSS檔案通常被儲存在theme資料夾中，因為它們需要額外的處理。
如何向Hugo網站新增主題
下載並安裝一個預製的主題是開始使用Hugo的一個好方法。Hugo主題有各種形狀和大小，其中許多在官方Hugo主題庫中是免費提供的。讓我們繼續，在我們的Hugo網站上安裝流行的Hyde主題。
首先，在終端導航到你專案的主題資料夾：
cd <hugo-project-directory>/themes/
接下來，使用Git將Hyde主題克隆到你專案的themes目錄中。
git clone https://github.com/spf13/hyde.git
接下來，在你的config.toml檔案中新增以下一行來啟用Hyde主題：
theme = "hyde"
在這一點上，Hyde主題已經安裝和配置好了。下一步是啟動Hugo的內建開發網路伺服器，在你的網路瀏覽器中檢視網站。
如何預覽一個Hugo網站
Hugo為開發目的提供了一個整合的網路伺服器，這意味著你不需要安裝第三方的網路伺服器，如Nginx或Apache，就可以在本地檢視你的網站。
要啟動Hugo的網路伺服器，請在你專案的根目錄下執行下面的命令：
hugo server -D
然後，Hugo將建立你的網站的頁面，並使它們在 http://localhost:1313/：
Hugo本地開發伺服器
如果你在你的網路瀏覽器中訪問該URL，你應該看到你的Hyde主題的Hugo網站：
用Hyde主題顯示的Hugo網站
預設情況下，Hugo的本地開發伺服器將觀察變化並自動重建網站。由於Hugo的構建速度非常快，你的網站的更新可以在近乎實時的情況下看到–這在靜態網站生成器的世界裡是很少見的。為了證明這一點，讓我們在Hugo中建立我們的第一個帖子。
如何向Hugo網站新增內容
向Hugo網站新增內容與WordPress或Ghost等成熟的CMS非常不同。在Hugo中，沒有內建的CMS層來管理你的內容。相反，你要按照你認為合適的方式來管理和組織內容。
換句話說，在Hugo中沒有明確的 “正確” 方法來進行內容管理。我們將在本節中分享一種新增和管理內容的方法，但隨著你對Hugo越來越熟悉，你可以隨意改變。
Hugo的內容部分
在Hugo中，你所掌握的第一個內容組織工具是內容版塊。Hugo中的內容區類似於WordPress中的文章型別–你不僅可以把它作為內容過濾器，而且在建立自定義主題時，你還可以把它作為一個標識。
例如，如果你有一個部落格內容區資料夾，你可以用它來儲存你所有的部落格文章，並渲染一個只適用於部落格文章的特定頁面模板。
如何在Hugo中新增文章
考慮到這一點，讓我們為部落格文章建立一個內容部分並新增一些內容。在你專案的content資料夾中建立一個名為 posts的新資料夾–這就是內容部分。
讓我們在post資料夾內建立另一個組織層，建立一個2021資料夾。在這一點上，你的content目錄應該看起來像這樣：
Hugo內容目錄
現在，讓我們來建立我們的第一個帖子。正如我們前面所討論的，Hugo同時支援Markdown和HTML檔案的內容。一般來說，最好堅持使用Markdown檔案，因為它們更容易編寫、格式化和閱讀。
在content/posts/2021資料夾中，建立一個以 .md（Markdown副檔名）結尾的新檔案。你可以隨心所欲地命名這個檔案，但建議命名Hugo內容檔案的語法是YYYY-MM-DD-a-sample-post.md。
除了手動建立內容檔案外，你還可以使用Hugo CLI用下面的命令來建立一個新的帖子（請確保從你的專案目錄中執行該命令）：
hugo new posts/2021/2021-08-30-a-sample-post.md
請注意，上面的路徑中缺少content資料夾。這是因為Hugo假設所有的內容檔案都會預設進入content資料夾。
如果你開啟新建立的內容檔案，你應該看到在檔案的頂部有幾行後設資料，看起來像這樣：
--- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true ---
這種以YAML為格式的後設資料被稱為 “front matter”。自動生成的front matter是使用Hugo CLI的一個重要好處。front matter是一個文章的唯一資料（文章名稱、資料、草稿狀態、標籤、類別等）被儲存的地方。front matter的預設格式可以在每個部分的基礎上使用archetypes進行配置。
現在讓我們給文章新增一些文字。在寫文章時，一定要確保你的內容在前面的內容下面，像這樣：
Hugo部落格文章
一旦你儲存了內容檔案，你應該看到Hugo在終端重建你的網站。在下面的截圖中，你可以看到Hugo在22毫秒內重建了整個網站!
Hugo網站重建
如果你在你的網路瀏覽器中訪問你的Hugo網站，你應該看到新的文章。
Hugo網站有一個文章
如何在Hugo中新增一個頁面
現在我們已經在我們的Hugo網站上新增了一個文章，讓我們來新增一個頁面。大多數內容管理系統，包括WordPress，都區分了文章和頁面。通常，一個帖子是一個過時的內容，而一個頁面由常青或靜態內容組成。
要建立一個頁面，我們首先需要一個page內容部分。要做到這一點，在Hugo的content資料夾中建立一個名為pages的資料夾。之後，使用下面的命令，在你的網站上新增一個新的 “About” 頁面：
hugo new pages/about.md
請注意頁面的命名慣例與帖子的不同之處。與帖子不同，頁面並不與一個特定的日期相聯絡，所以沒有必要在檔名中包括建立日期。
現在，讓我們為 “About” 頁面新增一些文字：
Hugo上的關於頁面
在這一點上，你應該在你的網路瀏覽器中看到 “About ” 頁面：
瀏覽器上預覽About頁面
現在我們有了兩個內容部分–帖子和頁面–讓我們來看看如何對網站進行一些定製，例如編輯標題和描述，在側欄選單中新增關於頁面，改變permalinks的格式，以及從帖子feed中刪除頁面。
如何改變網站標題和描述
改變網站標題和描述的確切方法取決於你的網站配置和/或活動主題。在Hyde主題的情況下，網站標題和描述可以在Hugo配置檔案（config.toml）中改變。
我們知道這一點是因為以下渲染側邊欄的主題程式碼：
<aside class="sidebar">
<div class="container sidebar-sticky">
<div class="sidebar-about">
<a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>
<p class="lead">
{{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}
</p>
</div>
<nav>
<ul class="sidebar-nav">
<li><a href="{{ .Site.BaseURL }}">Home</a> </li>
{{ range .Site.Menus.main -}}
<li><a href="{{.URL}}"> {{ .Name }} </a></li>
{{- end }}
</ul>
</nav>
<p>{{ with .Site.Params.copyright }}{{.}}{{ else }}© {{ now.Format "2006"}}. All rights reserved. {{end}}</p>
</div>
</aside>
需要重點關注的兩個部分是：
{{ .Site.Title }}
和…
{{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}
Handlebars {{ }} 是Hugo模板引擎的一部分，允許在渲染的頁面中動態地生成資料。舉個例子，{{ .Site.Title }} 指示Hugo檢查config.toml檔案並獲取對映到Title鍵的值。
由於Hugo的預設配置使用My New Hugo Site作為網站標題，這就是側邊欄顯示的內容。如果我們把config.toml中的網站標題改成別的東西，這個改變也會反映在前端。
讓我們繼續，把config.toml中的標題引數從My New Hugo Site改為Wbolt’s Hugo Site。
在Hugo中改變網站的標題
接著說說網站描述，你可以看到Hugo的模板引擎支援條件邏輯。翻譯成簡單的英語，下面的程式碼指示Hugo檢查Params值是否被分配給config.toml檔案中的description鍵。如果沒有，這裡有一個預設的字串來代替。
{{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}
由於我們沒有在config.toml檔案中配置描述，Hugo預設呈現為”An elegant open source and mobile-first theme for Hugo made by @mdo. Originally made for Jekyll.”。
現在讓我們更新我們的config.toml檔案：
baseURL = "http://example.org/" languageCode = "en-us" title = "Wbolt's Hugo Site" theme = "hyde"
改為:
baseURL = "http://example.org/" languageCode = "en-us" title = "Wbolt's Hugo Site" theme = "hyde" [params] description = "Wbolt is a premium managed WordPress hosting company."
正如預期的那樣，這些變化現在在前臺也是可見的：
修改Hugo網站的描述
如何從文章Feed中刪除頁面
在大多數部落格中，主頁上的帖子feed通常只顯示帖子。預設情況下，Hyde主題將所有的內容檔案都包含在帖子feed中。要改變這種行為，你需要編輯index.html模板中的 range 函式，該模板生成了主頁。
Hugo的 range 函式在一個定義好的專案集上進行迭代，然後對資料進行處理。預設情況下，Hyde主題的index.html模板會在.Site.RegularPages上進行迭代，並在渲染HTML之前過濾掉諸如固定連結、文章標題和文章摘要等資料。
由於 .Site.RegularPages 包括Hugo上的所有常規頁面，包括帖子和頁面，所以呈現的是 “About” 頁面。通過將 range 項改為 .Site.RegularPages "Section" "posts"，我們可以指示Hugo只過濾post部分的常規頁面–即我們之前建立的posts資料夾中的內容檔案。
現在讓我們通過編輯下面這個模板來做這個改變：
{{ define "main" -}}
<div class="posts">
{{- range .Site.RegularPages -}}
<article class="post">
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h1>
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
{{ .Summary }}
{{ if .Truncated }}
<div class="read-more-link">
<a href="{{ .RelPermalink }}">Read More…</a>
</div>
{{ end }}
</article>
{{- end }}
</div>
{{- end }}
修改為:
{{ define "main" -}}
<div class="posts">
{{- range where .Site.RegularPages "Section" "posts" -}}
<article class="post">
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h1>
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
{{ .Summary }}
{{ if .Truncated }}
<div class="read-more-link">
<a href="{{ .RelPermalink }}">Read More…</a>
</div>
{{ end }}
</article>
{{- end }}
</div>
{{- end }}
做了這個改動後，主頁將只顯示這樣的帖子：
只在主頁上顯示帖子。
如何在Hugo中使用引數
Hugo最強大的模板功能之一是partials–嵌入另一個HTML模板的HTML模板。模板允許在不同的模板檔案中重複使用程式碼，而無需管理每個檔案中的程式碼。
例如，常見的情況是，不同的頁面部分（頁首、頁尾等）都在各自的部分檔案中，然後在主題的baseof.html模板檔案中被呼叫。
在Ananke主題的baseof.html檔案中，你可以在第18行看到一個區域性檔案的例子 – {{ partial "site-style.html" . }}.
在這種情況下，{{ partial "site-style.html" . }} 指示Hugo將第18行的內容替換為/layouts/partials資料夾中的site-style.html。如果我們導航到/partials/site-style.html，我們會看到以下程式碼：
{{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }}
<link rel="stylesheet" href="{{ .RelPermalink }}" >
{{ end }}
{{ range site.Params.custom_css }}
{{ with partialCached "func/style/GetResource" . . }}{{ else }}
<link rel="stylesheet" href="{{ relURL (.) }}">
{{ end }}
{{ end }}
通過將這些程式碼解除安裝到一個單獨的檔案中，baseof.html模板檔案可以保持有序和易於閱讀。雖然引數不是必須的，特別是對於基本的專案，但對於具有更復雜功能的大型專案來說，它們就很方便了。
如何在Hugo中使用短程式碼
Hugo短程式碼與準程式碼類似，它們允許在不同的頁面上重複使用程式碼。短碼是存放在/layouts/shortcodes資料夾中的HTML檔案。主要的區別是，引數適用於HTML模板，而短程式碼適用於Markdown內容頁面。
在Hugo中，簡碼讓你開發功能模組，你可以在整個網站的頁面中使用，而無需管理每個頁面的程式碼變化。
如果你經營一個部落格，你有可能需要通過你的文章的正文內容來更新年份參考，以適應當前的年份。根據您的網站上有多少帖子，這項工作可能需要很長的時間。
通過在您的內容檔案中使用Hugo短碼，您將不必再擔心更新年份參考資料的問題
讓我們先在/layouts/shortcodes/current_year.html中建立一個短碼，內容如下：
{{ now.Format "2006" }}
短碼可以用這種語法嵌入到文章中-{{< shortcode_name >}}。在我們的例子中，我們可以用 {{< shortcode_name >}} 呼叫 current_year.html 短程式碼，就像這樣：
---
title: "2021 08 30 a Sample Post"
date: 2021-08-30T13:44:28+09:00
draft: true
---
This post was created in the year {{< current_year >}}.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu.
Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.
如果你在網路瀏覽器中檢視帖子，你應該在帖子的第一行看到當前的年份，像這樣：
使用Hugo短碼來自動生成當前年份。
如何在Hugo中向帖子新增圖片
與WordPress和其他成熟的內容管理系統不同，Hugo不包括用於管理影象的拖放系統。因此，設計一個圖片管理系統的任務就落在了終端使用者身上。
雖然Hugo沒有管理圖片的標準方法，但有一種流行的方法是將圖片儲存在/static資料夾中，並在文章和頁面中使用短碼來引用它們。讓我們來看看你如何在Hugo中進行基本的圖片組織。
我們需要做的第一件事是為我們的圖片庫建立一個組織結構。雖然這聽起來很複雜，但所需要的只是在/static資料夾中建立一些額外的目錄。
讓我們從在/static中建立一個uploads資料夾開始。在uploads資料夾中，建立一個名為2021的資料夾，用來存放2021年上傳的所有圖片。
Hugo影象管理
接下來，讓我們把兩張圖片（blue1.jpg和blue2.jpg）新增到2021資料夾中。
將影象新增到 “2021” 資料夾
在HTML中，影象是用 <img> 標籤顯示的。例如，要顯示blue1.jpg，我們可以使用下面的HTML：
<img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">
雖然可以直接將這個HTML新增到Markdown內容檔案中，但最好是建立一個短碼，你可以用它來顯示uploads資料夾中的任何圖片。這樣，如果你需要更新 img 標籤，你可以編輯短碼模板而不需要編輯每個 img 標籤的例項。
為了建立短碼模板，在/layouts/shortcodes/img.html建立一個新檔案，內容如下：
<img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}
接下來，將下面的短碼新增到一篇部落格文章中：
{{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}
在短碼模板中，{{ .Get "src" }} 和 {{ .Get "alt" }} 指示Hugo在呼叫短碼時，獲取 src< 和 alt< 引數的內容。
現在，如果你重新載入部落格文章，你應該看到這樣的圖片：
在Hugo中的影象短碼
如何部署一個Hugo網站
到這篇文章為止，你已經學會了如何安裝Hugo，建立一個網站，新增一個主題，對配置檔案進行基本的編輯，以及用引數和簡碼擴充套件網站的功能。在這一點上，你應該有一個功能性的網站，並準備好線上部署。
由於Hugo是一個靜態網站生成器，你可以把它生成的HTML、CSS和JS部署到任何有網路伺服器的地方。由於服務靜態網站的技術要求很低，你可以在Netlify、Vercel、Cloudflare Pages等眾多供應商那裡免費託管它們。
以前，我們使用 hugo server -D 來運作一個本地開發伺服器，以實時預覽我們網站的變化。為了完整地生成網站，我們可以在我們專案的根目錄下使用 hugo 命令。網站生成完成後，你應該在你的專案目錄中看到一個新的public資料夾。在這個資料夾裡面，你會發現所有需要上傳到伺服器或雲端儲存服務（如Amazon S3）的檔案。
在本地生成你的Hugo網站
在本地生成網站並手動上傳到Amazon S3或執行Nginx的伺服器是部署靜態生成網站的一種方式。然而，這並不是最有效的方法，因為它需要你在每次做出改變時手動上傳新檔案。
相反，一個更好的選擇是將你的Hugo專案資料夾連結到GitHub倉庫，並將GitHub倉庫連結到Netlify等自動部署服務。通過這樣的設定，你可以編輯你的網站，將修改推送到GitHub，並在Netlify上觸發新的構建和部署，而不需要任何人工干預。現在，讓我們來看看如何做到這一切吧!
如何將你的Hugo專案上傳到GitHub上
首先，你需要為你的專案建立一個GitHub倉庫。要做到這一點，請建立一個GitHub賬戶（如果你還沒有），並下載官方的GitHub桌面應用。安裝GitHub應用程式後，點選選單欄中的File，選擇新建倉庫。給倉庫取一個你喜歡的名字，其他選項暫時保持預設狀態，然後點選New Repository。
建立一個 GitHub 倉庫
預設情況下（在 macOS 上），GitHub 應用程式會在 /Users/username/Documents/GitHub 中建立新的倉庫。由於我們將倉庫命名為my-hugo-site，所以我們的倉庫可以在 /Users/brianli/Documents/GitHub/my-hugo-site 找到。
接下來，把原來專案資料夾中的所有檔案移到新的 GitHub 倉庫資料夾中。一定要刪除public資料夾，因為我們不需要將該資料夾上傳到GitHub。
將專案複製到 GitHub 倉庫資料夾中。
如果你導航回 GitHub 應用程式，現在你應該看到一個更改的檔案列表。要把倉庫上傳到GitHub，新增一個摘要，點選Commit to main，再點選右上角的Publish Repository。
提交Repo，並將其上傳到GitHub。
預設情況下，”Keep this code private” 選項被選中。如果你希望你的程式碼是開源的，可以隨時取消勾選。最後，再一次點選Publish Repository。
釋出你的 GitHub 倉庫
現在，如果你去GitHub，你應該看到你的倉庫像這樣線上：
GitHub上的Hugo專案倉庫
如何將GitHub Repo連結到Netlify
如果你還沒有Netlify的賬戶，請在這裡註冊一個。要將GitHub倉庫連結到Netlify，請在Netlify儀表板上點選New site from Git。
從Netlify的Git上新建網站
在Continuous Deployment下，選擇GitHub選項。
選擇 “GitHub” 進行持續部署
接下來，使用搜尋框找到你的Hugo專案倉庫。
找到你的Hugo專案庫
接下來，指定持續部署的設定。由於Netlify可以檢測到Hugo的配置，預設的設定應該可以滿足基本的部署。
隨著你對Hugo越來越熟悉，你可以深入研究環境變數、自定義構建命令等。就目前而言，將構建命令設定為 hugo，將公共目錄設定為 public，就可以部署一個簡單的Hugo網站。在指定了構建命令和公共目錄後，點選Deploy Site。
在Netlify上部署Hugo站點
由於Hugo是一個快速的靜態網站生成器，對於一個基本的網站，部署應該只需要幾秒鐘。一旦部署完成，你就可以在Netlify的儀表板上看到一個暫存的URL。點選這個URL來檢視部署的網站。
Netlify暫存網址
這是我們在Netlify上的Hugo網站。正如你所看到的，它與我們本地環境中的網站完全相同：
在Netlify上的Hugo網站
在這一點上，你可以為你的Netlify託管的網站設定一個自定義域名和SSL證書。要做到這一點，我們建議參考Netlify的官方文件。
由於我們已經把Netlify和GitHub連線起來，Hugo專案GitHub repo的一個新的提交會自動觸發Netlify上的一個新的部署
小結
Hugo是世界上最受歡迎的靜態網站生成器之一，這是有原因的。它不僅具有超快的構建處理能力，而且還具有強大的模板功能，支援引數和短程式碼。
在本教程中，你學會了如何配置Hugo，建立一個新專案，新增內容檔案，編輯主題檔案，並部署一個完成的靜態網站。我們建議閱讀Hugo的官方文件，以瞭解更多關於Hugo及其更高階的功能，如自定義函式、前臺事務和CSS/JS buildpacks。
你對Hugo和其他靜態網站生成器有什麼看法？請在下面的評論中讓我們知道!
評論留言