從 WordPress 切換到 Hugo

當 WordPress 5 發佈時，我對使用 Gutenberg 編輯器創建自定義塊感到興奮，因為我個人博客上的帖子有幾個可以變成塊的功能，從而更容易設置我的內容。 擁有它絕對是一件很酷的事情，但它仍然感覺很臃腫。

大約在同一時間，我開始閱讀越來越多的關於靜態站點生成器和 JAMstack 的內容（Chris Ferdinandi 的這篇文章說服了我）。 對於個人的業餘項目，您可以忽略各種各樣的問題，但作為專業人士，您必須確保輸出盡可能好的質量。 性能、安全性和可訪問性成為首先要考慮的事情。 您絕對可以將 WordPress 優化得非常快，但比 CDN 上不需要每次都查詢數據庫或生成頁面的靜態站點更快？ 沒那麼容易。

我認為我可以通過我的個人項目將其付諸實踐來學習，然後能夠將其用於專業項目，也許你們中的一些人也想知道如何。 在本文中，我將介紹如何從 WordPress 過渡到名為 Hugo 的特定靜態站點生成器。

Hugo 是用 Go 構建的，一旦你習慣了語法，這是一種非常快速且易於使用的語言，我將對此進行解釋。 這一切都在本地編譯，因此您可以直接在計算機上預覽您的站點。 然後該項目將保存到私有存儲庫。 此外，我將引導您了解如何在 Netlify 上託管它，並將您的圖像保存在 Git LFS（大文件存儲）上。 最後，我們將了解如何設置內容管理系統以使用 Netlify CMS 添加帖子和圖像（類似於 WordPress 後端）。

請注意，所有這些都是完全免費的，如果您問我，這真是太棒了（儘管如果您用完所有 LFS 存儲或您的網站流量很大，您將不得不支付額外費用）。 另外，我是從 Bitbucket 用戶的角度編寫的，它在 Mac 上運行。 有些步驟可能略有不同，但無論您使用什麼設置，您都應該能夠遵循。

您需要熟悉 HTML、CSS、JS、Git 和命令終端。 對像 Liquid 這樣的模板語言有一些概念也很有用，但我們將回顧 Hugo 的模板以幫助您入門。 儘管如此，我還是會提供盡可能多的細節！

我知道這聽起來很多，在我開始研究這個之前，它也適合我。 我將嘗試通過分解步驟來使您的過渡盡可能順利。 找到所有資源並不是很困難，但是我涉及到一些猜測，從一個文檔到下一個文檔。

1. 從 WordPress 導出內容
2. 準備你的博客設計
3. 設置新存儲庫
4. 激活 Git LFS（可選）
5. 在 Netlify 上創建站點
6. 準備 Netlify 大型媒體（可選）
7. 在您的計算機上設置 Hugo
8. 創建您的自定義主題
9. 關於 Hugo 語法的註釋
10. 內容和數據
11. 在 Netlify 上部署
12. 設置自定義域
13. 在 Netlify CMS 上編輯內容

注意：如果您對其中一些有疑問，請在評論中告訴我，我會盡力提供幫助，但請注意，這注定適用於沒有十幾個小部件的簡單靜態博客或評論（您可以稍後設置），而不是公司網站或個人投資組合。 不過，您無疑可以，但為了簡單起見，我將堅持使用簡單的靜態博客。

先決條件

在我們做任何事情之前，讓我們創建一個項目文件夾，從我們的工具到本地存儲庫的所有內容都將駐留。 我將其稱為“WP2Hugo”（您可以隨意稱呼它）。

本教程將使用一些命令行工具，例如 npm 和 Git。 如果您還沒有它們，請在您的機器上安裝它們：

• 安裝 Git
• 安裝 Node.js 和 npm（Node.js 包括 npm）
• 安裝 Homebrew（推薦給 macOS/Linux 用戶）

安裝完這些，讓我們開始吧！

1. 從 WordPress 導出內容

首先，我們需要從 WordPress 導出您的內容：帖子、頁面和上傳。 Hugo 提到了一些可用的工具，但就個人而言，只有一個有效：blog2md。 這是通過在命令終端中運行帶有 Node.js 的 JavaScript 文件來工作的。 它採用 WordPress 導出的 XML 文件，並輸出具有正確結構的 Markdown 文件，將您的 HTML 轉換為 Markdown 並添加所謂的 Front Matter，這是一種在每個文件開頭格式化元數據的方法。

轉到您的 WordPress 管理員，然後打開工具菜單、導出子菜單。 你可以從那裡導出你想要的東西。 我將導出的文件稱為YOUR-WP-EXPORT.xml 。

您可以準確選擇要從 WordPress 博客導出的數據。

在我們的 WP2Hugo 文件夾中，我建議創建一個名為blog2md的新文件夾，您將在其中放置來自 blog2md 工具的文件，以及從 WordPress 導出的 XML ( YOUR-WP-EXPORT.xml )。 此外，在其中創建一個新文件夾， out您的 Markdown 帖子的所在位置。 然後，打開您的命令終端，並使用cd命令導航到您新創建的“blog2md”文件夾（或鍵入帶有空格的cd並將文件夾拖到終端中）。

您現在可以運行以下命令來獲取您的帖子：

 npm install node index.js w YOUR-WP-EXPORT.xml out

查看/WP2Hugo/blog2md/out目錄以檢查您的所有帖子（和潛在頁面）是否都在那裡。 如果是這樣，您可能會注意到文檔中有一些關於評論的內容：我有一個無評論博客，所以我不需要執行它們，但 Hugo 確實提供了幾個評論選項。 如果您對 WordPress 有任何意見，您可以將它們導出以供以後使用 Disqus 等專業服務重新實施。

如果您對 JS 足夠熟悉，則可以通過編輯wordpressImport函數來調整index.js文件以更改發布文件的輸出方式。 您可能想要捕獲特色圖片、刪除永久鏈接、更改日期格式或設置類型（如果您有帖子和頁面）。 您必鬚根據自己的需要對其進行調整，但要知道循環（ posts.forEach(function(post){ ... }) ）會遍歷導出的所有帖子，因此您可以檢查 XML 內容該循環中的每個帖子並自定義您的 Front Matter。

此外，如果您需要更新帖子中包含的 URL（在我的情況下，我想讓圖像鏈接相對而不是絕對）或日期格式，這是這樣做的好時機，但不要為此失眠. 許多文本編輯器提供批量編輯功能，因此您可以插入正則表達式並在文件中進行所需的更改。 此外，您可以根據需要多次運行blog2md腳本，因為它將覆蓋輸出文件夾中任何先前存在的文件。

一旦你有你導出的 Markdown 文件，你的內容就準備好了。 下一步是讓您的 WordPress 主題準備好在 Hugo 中工作。

2. 準備你的博客設計

我的博客有一個典型的佈局，帶有標題、導航欄、內容和側邊欄以及頁腳——設置起來非常簡單。 我沒有復制我的 WordPress 主題，而是從頭開始重建它，以確保沒有多餘的樣式或無用的標記。 這是實施新的 CSS 技術（ pssst...Grid 非常棒！ ）並設置更一致的命名策略（類似於 CSS Wizardry 的指南）的好時機。 您可以隨心所欲，但請記住，我們正在努力優化我們的博客，因此最好回顧一下您擁有的內容並決定是否仍然值得保留。

首先將您的博客分成幾部分，這樣您就可以清楚地看到哪些內容去了哪裡。 這將幫助您構建標記和样式。 順便說一句，Hugo 具有將 Sass 編譯為 CSS 的內置功能，所以您可以隨意將這些樣式分解為更小的文件！

當我說簡單時，我的意思是非常簡單。

或者，您現在可以完全繞過此步驟，並在設置 Hugo 站點時隨時為您的博客設置樣式。 我已經有了基本的標記，並且更喜歡樣式的迭代方法。 這也是查看哪些有效，哪些無效的好方法。

3. 建立一個新的倉庫

既然這已經解決了，我們需要設置一個存儲庫。 我假設您將要為此創建一個新的存儲庫，這將是使用 Git LFS（大型文件系統）的絕佳機會。 我建議現在這樣做的原因是，當您已經擁有數百個圖像時，實施 Git LFS 並不那麼順利。 我已經做到了，但這是您可能想要避免的頭痛。 這也將為 Netlify 帶來其他好處。

雖然我將通過 Bitbucket 及其專有的 Git GUI、Sourcetree 來完成所有這些工作，但您絕對可以使用 GitHub 和 GitLab 以及他們自己的桌面工具來完成這一切。 您也可以直接在命令終端中執行此操作，但我喜歡盡可能自動化和簡化流程，從而降低犯愚蠢錯誤的風險。

在您選擇的 Git 平台上創建新存儲庫後，在本地項目文件夾 (WP2Hugo) 中創建一個空文件夾，例如hugorepo ，然後打開命令終端或 Git GUI 工具並初始化本地 Git 存儲庫； 然後，將其鏈接到遠程存儲庫（您通常可以在新創建的遠程存儲庫上找到要使用的確切命令）。

我建議創建一個dev （或stage ）分支，以便您的主分支嚴格用於生產部署。 它還將限制僅在您完成一系列潛在更改時才生成新版本。 創建分支可以在本地完成，也可以在存儲庫的遠程網頁上完成。

通過單擊分支切換器並輸入新名稱，GitHub 可以輕鬆創建分支。 在 GitLab 上，您需要打開“加號”下拉菜單才能訪問該選項。 Bitbucket 要求您打開左側的“加號”菜單以打開滑出式菜單，然後單擊“開始工作”部分中的“創建分支”。

4. 激活 Git LFS（可選）

Git 大文件系統是 Git 的一項功能，可讓您以更有效的方式保存大文件，例如 Photoshop 文檔、ZIP 存檔以及在我們的示例中的圖像。 由於圖像可能需要版本控制但不完全是代碼，因此將它們與常規文本文件不同地存儲是有意義的。 它的工作方式是將圖像存儲在遠程服務器上，存儲庫中的文件將是一個文本文件，其中包含指向該遠程資源的指針。

唉，這不是您只需單擊即可啟用的選項。 您必須設置存儲庫以激活 LFS，這需要在本地進行一些工作。 安裝 Git 後，您需要安裝 Git-LFS 擴展：

 git lfs install

如果像我一樣，該命令對您不起作用，請嘗試使用 Homebrew 替代方法（適用於 macOS 或 Linux）：

 brew install git-lfs

完成後，您必須指定要在存儲庫中跟踪哪些文件。 我會將我上傳到 WordPress 的/upload文件夾中的所有圖像託管在我的 Hugo 設置中的同名文件夾中，除了這個文件夾將位於/static文件夾中（編譯後將解析為根目錄）。 確定您的文件夾結構，並在其中跟踪您的文件：

 git lfs track "static/uploads/*"

這將跟踪/static/uploads文件夾中的任何文件。 您還可以使用以下內容：

 git lfs track "*.jpg"

這將跟踪存儲庫中的所有 JPG 文件。 例如，您可以混合搭配以僅跟踪特定文件夾中的 JPG。

有了它，您可以將 LFS 配置文件提交到您的存儲庫並將其推送到您的遠程存儲庫。 下次您在本地提交與 LFS 跟踪配置匹配的文件時，它將被“轉換”為 LFS 資源。 如果在開發分支上工作，請將此提交合併到您的主分支中。

現在讓我們來看看 Netlify。

5. 在 Netlify 上創建站點

此時，您的存儲庫已設置完畢，因此您可以繼續在 Netlify 上創建一個帳戶。 如果您願意，您甚至可以使用您的 GitHub、GitLab 或 Bitbucket 帳戶登錄。 進入儀表板後，單擊右上角的“從 Git 新建站點”按鈕，然後創建新的 Netlify 站點。

注意：您現在可以將所有選項保留為默認值。

選擇您的 Git 提供程序：這將打開一個彈出窗口來對您進行身份驗證。 完成後，窗口將關閉，您將看到您有權訪問的 Git 提供程序上的存儲庫列表。 選擇您新創建的存儲庫並繼續。 你會被問到一些事情，其中​​大部分你可以默認離開，因為所有選項都可以在以後編輯。

現在，在站點設置中，單擊“更改站點名稱”並將您的站點命名為您想要的任何名稱 - 我將使用chris-smashing-hugo-blog 。 我們現在可以通過chris-smashing-hugo-blog.netlify.com訪問該站點：一個漂亮的 404 頁面！

6. 準備 Netlify 大型媒體（可選）

如果您設置了 Git LFS 併計劃使用 Netlify，您將需要遵循這些步驟。 這有點複雜，但絕對值得：它使您能夠在將自動轉換的圖像 URL 上設置查詢字符串。

假設您有一個指向Portrait.jpg的鏈接，這是一個 900×1600 像素的圖像。 使用 Netlify 大型媒體，您可以調用文件Portrait.jpg?nf_resize=fit&w=420 ，它會按比例縮放它。 如果您同時定義w和h並設置nf_resize=smartcrop ，它將通過裁剪來調整大小以專注於圖像的興趣點（由一種奇特的算法確定，也就是機器人大腦魔法！ ）。 我發現這是獲得 WordPress 生成的縮略圖的好方法，而無需在我的存儲庫中為圖像創建多個文件。

如果這聽起來對您有吸引力，讓我們進行設置！

第一步是通過 npm 安裝 Netlify 的命令行界面（CLI）：

 npm install netlify-cli -g

如果它有效，運行命令netlify應該會產生有關該工具的信息。

然後，您需要確保您位於本地存儲庫文件夾中（我之前命名為“hugorepo”），然後執行：

 netlify login

授權令牌。 接下來，我們必須安裝 Netlify 大型媒體插件。 跑步：

 netlify plugins:install netlify-lm-plugin netlify lm:install

在結果消息的末尾應該顯示一個命令行，您必須複製它（在 Mac 上應該類似於/Users/YOURNAME/.netlify/helper/path.bash.inc運行它。 請注意，Keychain 可能會在 macOS 上要求您提供機器的管理員密碼。

下一步是鏈接 Netlify：

 netlify link

您可以在此處提供您的站點名稱（我提供了之前給它的chris-smashing-hugo-blog名稱）。 有了這個，您只需要通過執行以下命令來設置大型媒體功能：

 netlify lm:setup

將這些新更改提交到本地存儲庫，並將它們推送到遠程開發分支。 我在 Sourcetree 和 Keychain 上遇到了一些錯誤，如git "credential-netlify" is not a git command 。 如果是這種情況，請嘗試使用以下命令手動推送：

 git add -A git commit -m "Set up Netlify Large media" git push

如果這不起作用，您可能需要安裝 Netlify credential Helper。 以下是使用 Homebrew 進行操作的方法：

 brew tap netlify/git-credential-netlify brew install git-credential-netlify

現在嘗試推送您的提交（使用您的 GUI 或命令終端）：它應該可以工作！

注意：如果您更改了 Netlify 密碼，請再次運行netlify logout和netlify login 。

你可能會問：“所有這些，我們甚至還沒有初始化我們的 Hugo 構建？” 是的，我知道，這需要一段時間，但過渡的所有準備工作都已完成。 我們現在可以建立我們的 Hugo 博客了！

7. 在你的電腦上設置 Hugo

您首先需要使用提供的任何選項在您的計算機上安裝 Hugo。 我將使用 Homebrew，但 Windows 用戶可以使用 Scoop 或 Chocolatey，或者直接下載包。

 brew install hugo

然後，您需要創建一個新的 Hugo 站點，但它不喜歡將其設置在非空文件夾中。 第一個選項：您可以在新文件夾中創建它並將其內容移動到本地存儲庫文件夾：

 hugo new site your_temporary_folder

第二種選擇：您可以使用標誌強制它安裝在本地存儲庫中，只需確保在正確的文件夾中運行它：

 hugo new site . --force

您現在有一個 Hugo 站點，您可以使用以下命令啟動它：

 hugo server

您將在localhost上獲得本地預覽。 可悲的是，您沒有內容，也沒有自己的主題。 不用擔心，我們很快就會進行設置！

讓我們首先看一下配置文件（在我的例子中是config.toml ）：讓我們設置博客的名稱和基本 URL（這必須與 Netlify 儀表板上的 URL 匹配）：

 title = "Chris' Smashing Hugo Blog" baseURL = "https://chris-smashing-hugo-blog.netlify.com"

在本地開發時，此鏈接將被覆蓋，因此您不應遇到 404 錯誤。

讓我們以 Markdown 格式將我們導出的文章提供給 Hugo。 從第一步開始，它們應該位於/WP2Hugo/blog2md/out文件夾中。 在 Hugo 文件夾（又名本地存儲庫目錄）中，訪問content文件夾並創建一個名為posts的子文件夾。 把你的 Markdown 文件放在那裡，然後讓我們設置一個主題。

8. 創建您的自定義主題

對於這一步，我建議下載 Saito 樣板，這是一個包含您開始需要的所有部分的主題（並且沒有樣式）——一個非常有用的起點。 當然，如果您想跳過這部分過程，您可以查看 Hugo 的現成主題集合。 全取決於你！

從本地存儲庫文件夾中，將主題克隆到themes/saito ：

 git submodule add https://github.com/hakuoku/saito-boilerplate.git themes/saito

您可以將此文件夾重命名為您想要的任何名稱，例如cool-theme 。 你必須通過編輯config.toml/yaml/json文件來告訴你的 Hugo 配置你想使用哪個主題。 將主題值編輯為saito或cool-theme或任何主題的文件夾名稱。 您的預覽現在應該顯示您的博客標題以及版權行。 這是一個開始，對吧？

打開主題的layout/partials/home.html文件並編輯它以顯示您的內容，限制為posts類型的前五個項目（在content/posts/文件夾內），包括range 、 first和where ：

 <div class="container"> {{ range first 5 (where .Paginator.Pages "Type" "posts") }} <article class="post post--{{ .Params.class }}"> <h2 class="post__title">{{ .Title }}</h2> <section class="post__content"> {{ .Content }} </section> </article> {{ end }} </div>

您的內容現在以最基本的方式可見。 是時候把它變成你的了——讓我們開始吧！

與 Hugo 一起製作模板

如果您願意，可以先閱讀 Hugo 模板簡介，但我將嘗試複習一些有助於您理解基礎知識的要點。

Hugo 中的所有操作都定義在分隔符中：雙花括號（例如{{ .Title }} ），如果您之前做過一些模板操作，應該會覺得很熟悉。 如果還沒有，請將其視為在標記中的特定點執行操作或註入值的一種方式。 對於塊，它們以{{ end }}標記結束，用於除短代碼之外的所有操作。

主題有一個layout文件夾，其中包含佈局的各個部分。 _default文件夾將是 Hugo 的起點， baseof.html是（您猜對了！ ）佈局的基礎。 它將調用每個組件，稱為“partials”（更多信息請參見 Hugo 關於 Partial Template 的文檔），類似於您在 PHP 中使用include的方式，您可能已經在 WordPress 主題中看到過。 部分可以調用其他部分——只是不要讓它成為一個無限循環。

您可以使用{{ partial "file.html" . }} {{ partial "file.html" . }}語法。 partial部分非常簡單，但另外兩個部分可能需要解釋。 您可能希望必須編寫partials/file.html ，但由於所有的 partials 都在 partials”文件夾中，Hugo 可以很好地找到該文件夾。 當然，如果您需要更多的組織，您可以在“partials”文件夾中創建子文件夾。

您可能已經註意到一個雜散點：這是您傳遞給局部的上下文。 如果您有一個菜單部分，以及一個鏈接和標籤列表，您可以將該列表傳遞給部分，以便它只能訪問該列表，而不能訪問其他任何內容。 我將在下一節中詳細討論這個難以捉摸的點。

您的baseof.html文件是一個 shell，它調用呈現您的博客佈局所需的所有各種部分。 它應該有最少的 HTML 和大量的部分：

 <!DOCTYPE html> <html lang="{{ .Site.LanguageCode }}"> <head> <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title> {{ partial "head.html" . }} </head> <body> {{ partial "header.html" . }} {{ partial "nav.html" . }} <main> {{ block "main" . }}{{ end }} </main> <aside> {{ partial "sidebar.html" . }} </aside> {{ partial "footer.html" . }} </body> </html>

{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}行不同，因為它是一個塊，它是使用基於當前頁面（主頁、單個帖子頁面等）的內容的模板定義的，帶有{{ define "main" }} 。

樣式表

在您的主題中，創建一個名為assets的文件夾，我們將在其中放置一個css文件夾。 它將包含我們的 SCSS 文件，或可信賴的 ol' CSS 文件。 現在， partials文件夾中應該有一個css.html文件（由head.html 調用）。 要將 Sass/SCSS 轉換為 CSS，並縮小樣式表，我們將使用這一系列函數（使用 Hugo Pipes 語法，而不是將函數相互包裝）：

 {{ $style := resources.Get "css/style.scss" | toCSS | minify | fingerprint }}

作為獎勵——因為我很難找到一個直接的答案——如果你想使用 Autoprefixer，Hugo 還實現了 PostCSS。 您可以在第一行的toCSS和minify之間添加一個額外的管道函數，如下所示：

 {{ $style := resources.Get "css/style.scss" | toCSS | postCSS | minify | fingerprint }}

在你的 Hugo 博客的根目錄下創建一個“postcss.config.js”文件，並傳入選項，例如：

 module.exports = { plugins: { autoprefixer: { browsers: [ "> 1%", "last 2 versions" ] } }, }

快！ 從 Sass 到前綴、縮小的 CSS。 “指紋”管道功能是確保文件名是唯一的，例如style.c66e6096bdc14c2d3a737cff95b85ad89c99b9d1.min.css 。 如果您更改樣式表，則指紋會更改，因此文件名會不同，因此您將獲得有效的緩存破壞解決方案。

9. 關於 Hugo 語法的註釋

我想確保您理解“點”，這就是 Hugo 如何定義您將在模板中使用的變量（或者用我自己的話來說，提供上下文參考）。

點和範圍

Dot 就像一個頂級變量，您可以在任何模板或簡碼中使用它，但它的值僅限於其上下文。 像baseof.html這樣的頂級模板中的點值與循環塊或with塊中的值不同。

假設這是在我們的head.html部分模板中：

 {{ with .Site.Title }} {{ 結尾 }}

即使我們在主範圍內運行它，Dot 的值也會根據上下文發生變化，在本例中為.Site.Title 。 因此，要打印該值，您只需要編寫. 而不是再次重新輸入變量名。 一開始這讓我很困惑，但你很快就習慣了，它有助於減少冗餘，因為你只為變量命名一次。 如果某些東西不起作用，通常是因為您試圖在作用域塊內調用頂級變量。

那麼如何在作用域塊內使用頂級作用域呢？ 好吧，假設您要檢查一個值但使用另一個值。 您可以使用$ ，它始終是頂級範圍：

 {{ with .Site.Params.InfoEnglish }}{{ $.Site.Params.DescriptionEnglish }}{{ end }}

在我們的條件內，範圍是.Site.Params.InfoEnglish但我們仍然可以使用$訪問它之外的值，直觀地使用.Site.Params.DescriptionEnglish將不起作用，因為它會嘗試解析為.Site.Params.InfoEnglish.Site.Params.DescriptionEnglish ，拋出錯誤。

自定義變量

您可以使用以下語法分配變量：

 {{ $customvar := "custom value" }}

變量名必須以$開頭，如果是第一次賦值，賦值運算符必須是:= =否則像這樣：

 {{ $customvar = "updated value" }}

您可能會遇到的問題是，這不會超出範圍，這讓我想到了下一點。

刮

Scratch 功能允許您分配在所有上下文中可用的值。 假設您在movies.json文件中有一個電影列表：

 [ { "name": "The Room", "rating": 4 }, { "name": "Back to the Future", "rating": 10 }, { "name": "The Artist", "rating": 7 } ]

現在，您想要遍歷文件的內容並存儲您最喜歡的內容以供以後使用。 這就是 Scratch 發揮作用的地方：

 {{ .Scratch.Set "favouriteMovie" "None" }}{{ /* Optional, just to get you to see the difference syntax based on the scope */ }} {{ range .Site.Data.movies }} {{ if ge .rating 10 }} {{ /* We must use .Scratch prefixed with a $, because the scope is .Site.Data.movies, at the current index of the loop */ }} {{ $.Scratch.Set "favouriteMovie" .name }} {{ end }} {{ end }} [...] My favourite movie is {{ .Scratch.Get "favouriteMovie" }} <!-- Expected output => My favourite movie is Back to the Future -->

使用 Scratch，我們可以從循環內部提取一個值並在任何地方使用它。 隨著您的主題變得越來越複雜，您可能會發現自己正在使用 Scratch。

注意：這只是一個示例，因為可以優化此循環以在不使用 Scratch 的情況下輸出此結果，但這應該讓您更好地了解它的工作原理。

條件句

從 JavaScript 或 PHP 的角度來看，條件句的語法與您所期望的略有不同。 本質上，有些函數接受兩個參數（如果您直接調用值，括號是可選的）：

 {{ if eq .Site.LanguageCode "en-us" }}Welcome!{{ end }}

這些功能有幾個：

• eq檢查是否相等
• ne檢查不平等
• gt檢查大於
• ge檢查大於或等於
• 它檢查lt
• le檢查小於或等於

注意：您可以在 Hugo 函數快速參考中了解有關 Hugo 提供的所有函數。

空白

如果你和我一樣對輸出很挑剔，你可能會注意到一些不需要的空行。 這是因為 Hugo 會按原樣解析您的標記，例如，在未滿足的條件周圍留下空白行。

假設我們有這個假設的部分：

 {{ if eq .Site.LanguageCode "en-us" }} <p>Welcome to my blog!</p> {{ end }} <img src="/uploads/portrait.jpg" alt="Blog Author">

如果網站的語言代碼不是en-us ，這將是 HTML 輸出（注意圖像標籤前的三個空行）：

 <img src="/uploads/portrait.jpg" alt="Blog Author">

Hugo 提供了一種語法來解決這個問題，在分隔符內部的花括號旁邊使用連字符。 {{-將修剪大括號之前的空格， -}}將修剪大括號之後的空格。 您可以同時使用其中一個或兩個，但只需確保連字符和分隔符內的操作之間有一個空格。

因此，如果您的模板包含以下內容：

 {{- if eq .Site.LanguageCode "en-us" -}} <p>Welcome to my blog!</p> {{- end -}} <img src="/uploads/portrait.jpg" alt="Blog Author">

…然後標記將導致這個（沒有空行）：

 <img src="/uploads/portrait.jpg" alt="Blog Author">

這對於其他情況很有幫助，例如帶有display: inline-block的元素，它們之間不應有空格。 相反，如果您想確保每個元素都在標記中的自己的行中（例如在{{ range }}循環中），則必須小心放置連字符以避免“貪婪”的空白修剪。

如果站點的語言代碼匹配“ en-us ”（在p和img標籤之間不再有換行符），上面的示例將輸出以下內容：

 <p>Welcome to my blog!</p><img src="/uploads/portrait.jpg" alt="Blog Author">

10. 內容和數據

您的內容存儲為 Markdown 文件，但您也可以使用 HTML。 Hugo 將在構建您的網站時正確呈現它。

您的主頁將調用_default/list.html佈局，可能如下所示：

 {{ define "main" }} {{ partial "list.html" . }} {{ end }}

主塊調用帶有上下文的list.html部分. ，也就是頂級。 list.html部分可能如下所示：

 {{ define "main" }} <ol class="articles"> {{ range .Paginator.Pages }} <li> <article> <a href="{{ .URL }}"> <h2>{{ .Title }}</h2> <img src="{{ .Params.featuredimage }}" alt=""> <time datetime="{{ .Date.Format "2006-01-02" }}"> {{ .Date.Format "January 2 2006" }} </time> </a> </article> </li> {{ end }} </ol> {{ partial "pagination.html" . }} {{ end }}

現在我們有一個基本的文章列表，您可以根據需要設置樣式！ 每頁的文章數在配置文件中定義， paginate = 5 （在 TOML 中）。

你可能會像我一樣對 Hugo 中的日期格式感到困惑。 每次將單元映射到一個數字（第一個月、第二天、第三個小時等）時，一旦我看到下面 Go 語言文檔提供的視覺解釋，我就更有意義了——這有點奇怪，但也有點聰明！

 Jan 2 15:04:05 2006 MST => 1 2 3 4 5 6 -7

現在剩下要做的就是在一個頁面上顯示您的帖子。 您可以編輯post.html部分以自定義文章的佈局：

 <article> <header> <h1>{{ .Title }}</h1> <p> Posted on <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006. 1. 2" }}</time> </p> </header> <section> {{ .Content }} </section> </article>

這就是您展示內容的方式！

如果您想自定義 URL，請通過添加[permalinks]選項 (TOML) 來更新您的配置文件，在這種情況下，這將使 URL 看起來像my-blog.com/post-slug/ ：

 [permalinks] posts = ":filename/"

如果您想生成內容的 RSS 提要（因為 RSS 很棒），請在您的站點配置文件中添加以下內容（如果檢測到這些選項，Saito 的默認模板將在head.html中顯示適當的標籤）：

 rssLimit = 10 [outputFormats] [outputFormats.RSS] mediatype = "application/rss" baseName = "feed"

但是，如果您在帖子之外有某種內容怎麼辦？ 這就是數據模板的用武之地：您可以創建 JSON 文件並提取其數據以創建菜單或側邊欄中的元素。 YAML 和 TOML 也是選項，但對於復雜數據（例如嵌套對象）的可讀性較差。 當然，您可以在站點的配置文件中設置它，但對我來說，它不太容易導航，也不太寬容。

讓我們創建一個您可能希望在側邊欄中顯示的“酷站點”列表 - 每個站點都有一個鏈接和一個標籤，作為 JSON 中的數組：

 { "coolsites": [ { "link": "https://smashingmagazine.com", "label": "Smashing Magazine" }, { "link": "https://gohugo.io/", "label": "Hugo" }, { "link": "https://netlify.com", "label": "Netlify" } ] }

您可以將此文件保存在存儲庫根目錄或主題根目錄中的data文件夾中，例如/data/coolsites.json 。 然後，在您的sidebar.html部分中，您可以使用.Site.Data.coolsites使用range對其進行迭代：

 <h3>Cool Sites:</h3> <ul> {{ range .Site.Data.coolsites.coolsites }} <li><a href="{{ .link }}">{{ .label }}</a></li> {{ end }} </ul>

這對於您想要迭代的任何類型的自定義數據都非常有用。 我用它為我的主題創建了一個谷歌字體列表，帖子可以屬於哪些類別，作者（帶有個人簡介、頭像和主頁鏈接）、要顯示的菜單以及顯示順序。 你真的可以用這個做很多事情，而且非常簡單。

關於數據等的最後一個想法：您放入 Hugo /static文件夾中的任何內容都將在實時構建的根 ( / ) 上可用。 主題文件夾也是如此。

11. 在 Netlify 上部署

所以你已經完成了，或者你只是想看看 Netlify 運行了什麼樣的魔法？ 對我來說聽起來不錯，只要您的本地 Hugo 服務器不返回錯誤。

提交您的更改並將它們推送到您的遠程開發分支 ( dev )。 接下來前往 Netlify，並訪問您網站的設置。 您將看到“構建和部署”選項。 我們需要在這裡改變幾件事。

1. 首先，在“構建設置”部分，確保“構建命令”設置為hugo ，並且“發布目錄”設置為public （建議您保留在 Hugo 配置文件中的默認設置）；
2. 接下來，在“部署上下文”部分，將“生產分支”設置為存儲庫中的主分支。 我還建議您將“分支部署”設置為“僅部署生產分支”；
3. 最後，在“環境變量”部分，編輯變量並單擊“新建變量”。 我們將使用以下對將 Hugo 環境設置為 0.53：將 key 設置為HUGO_VERSION並將 value 設置為0.53 。

現在轉到您的遠程存儲庫並將您的開發分支合併到您的主分支：這將是部署您更新的博客的鉤子（這可以自定義，但默認值對我來說是合理的）。

回到您的 Netlify 儀表板，您的站點的“生產部署”應該有一些新活動。 如果一切順利，這應該處理並解析為“已發布”標籤。 單擊部署項將打開帶有操作日誌的概覽。 在頂部，您將看到“預覽部署”。 繼續，點擊它——你應得的。 它還活著！

12. 設置自定義域

將 URL 設置為my-super-site.netlify.com不符合您的口味，而您已經擁有my-super-site.com ？ 我知道了。 讓我們改變它！

前往您的域註冊商並轉到您域的 DNS 設置。 在這裡，您必須創建一個新條目：您可以設置指向my-super-site.netlify.com的 ALIAS/CNAME 記錄，或者設置將您的域指向 Netlify 的負載均衡器的 A 記錄，即在撰寫本文時為104.198.14.52 。

您可以在 Netlify 的自定義域文檔中找到最新信息。 負載均衡器 IP 將位於“根和 www 自定義域的手動 DNS 配置”下的 DNS 設置部分。

完成後，轉到您網站在 Netlify 上的儀表板，然後單擊“域設置”，您將在其中看到“添加自定義域”。 輸入您的域名進行驗證。

您還可以通過“域”選項卡中的儀表板來管理您的域。 此頁面上的界面感覺不那麼令人困惑，但也許它會幫助您更了解您的 DNS 設置，就像它對我所做的那樣。

注意：如果您想通過他們購買域名，Netlify 也可以為您處理一切。 這更容易，但需要額外的費用。

設置自定義域後，在“域設置”中，向下滾動到“HTTPS”部分並啟用 SSL/TLS 證書。 這可能需要幾分鐘，但它會授予您免費證書：您的域現在在 HTTPS 上運行。

13. 在 Netlify CMS 上編輯內容

如果您想像在 WordPress 的後端界面上那樣編輯文章、上傳圖片和更改博客設置，您可以使用 Netlify CMS，它提供了一個非常好的教程。 它是一個可以為你處理所有事情的文件（它與生成器無關：它可以與 Jekyll、Eleventy 等一起使用）。

您只需要在一個文件夾中上傳兩個文件：

• CMS（單個 HTML 文件）；
• 一個配置文件（一個 YAML 文件）。

後者將保存您特定站點的所有設置。

轉到您的 Hugo 根目錄的/static文件夾並創建一個新文件夾，您將通過my-super-site.com/FOLDER_NAME訪問該文件夾（我將調用我的admin ）。 在此admin文件夾中，通過複製 Netlify CMS 提供的標記創建一個index.html文件：

 <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Content Manager</title> </head> <body> <!-- Include the script that builds the page and powers Netlify CMS --> <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script> </body> </html>

您需要創建的另一個文件是配置文件： config.yml 。 它將允許您定義站點的設置（名稱、URL 等），以便您可以設置帖子的頭條內容應包含的內容，以及您的數據文件（如果有）應如何編輯。 設置起來有點複雜，但這並不意味著它不容易。

如果您使用的是 GitHub 或 GitLab，請使用以下命令啟動config.yml 文件：

 backend: name: git-gateway branch: dev # Branch to update (optional; defaults to master)

如果您使用的是 Bitbucket，情況會有所不同：

 backend: name: bitbucket repo: your-username/your-hugorepo branch: dev # Branch to update (optional; defaults to master)

然後，對於我們的上傳，我們必須告訴 CMS 將它們存儲在哪裡：

 media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads

當您創建新帖子時，CMS 將為文件名生成 slug，您可以使用三個選項對其進行自定義：

slug: encoding: "ascii" # You can also use "unicode" for non-Latin clean_accents: true # Removes diacritics from characters like e or a sanitize_replacement: "-" # Replace unsafe characters with this string

最後，您需要定義帖子中數據的結構。 我還將定義數據文件coolsites的結構——以防萬一我想將另一個站點添加到列表中。 這些是用絕對是最冗長的collections對象設置的，還有一些不錯的選項，您可以在此處閱讀更多信息。

 collections: - name: "articles" # Used in routes, eg, /admin/collections/blog label: "Articles" # Used in the Netlify CMS user interface folder: "content/posts" # The path to the folder where the posts are stored, usually content/posts for Hugo create: true # Allow users to create new documents in this collection slug: "{{slug}}" # Filename template, eg, post-title.md fields: # The fields for each document, usually in front matter - {label: "Title", name: "title", widget: "string", required: true} - {label: "Draft", name: "draft", widget: "boolean", default: true } - {label: "Type", name: "type", widget: "hidden", default: "post" } - {label: "Publish Date", name: "date", widget: "date", format: "YYYY-MM-DD"} - {label: "Featured Image", name: "featuredimage", widget: "image"} - {label: "Author", name: "author", widget: "string"} - {label: "Body", name: "body", widget: "markdown"} - name: 'coolsites' label: 'Cool Sites' file: 'data/coolsites.json' description: 'Website to check out' fields: - name: coolsites label: Sites label_singular: 'Site' widget: list fields: - { label: 'Site URL', name: 'link', widget: 'string', hint: 'https://…' } - { label: 'Site Name', name: 'label', widget: 'string' }

注意：您可以在 Netlify CMS Widgets 文檔中閱讀有關如何配置各個字段的更多信息，該文檔介紹了每種類型的小部件以及如何使用它們 - 特別適用於日期格式。

驗證

我們需要做的最後一件事是確保只有授權用戶才能訪問後端！ 使用 Git 提供者的身份驗證是解決此問題的一種簡單方法。

前往您的 Netlify 站點，然後單擊“設置”選項卡。 然後轉到左側菜單中的最後一個鏈接“訪問控制”。 在這裡，您可以通過提供為您的用戶帳戶（不在存儲庫中）定義的密鑰和秘密值，將 OAuth 配置為通過 GitHub、GitLab 或 Bitbucket 運行。 您將需要使用與您的存儲庫相同的 Git 提供程序。

GitHub

轉到 GitHub 上的“設置”頁面（單擊您的頭像以顯示菜單），然後訪問“開發者設置”。 單擊“註冊新應用程序”並提供所需的值：

• 一個名稱，例如“我的超級博客的 Netlify CMS”；
• 主頁 URL，指向您的 Netlify 站點的鏈接；
• 描述，如果你喜歡的話；
• 應用回調 URL，必須是“ https://api.netlify.com/auth/done ”。

保存，您將看到您的客戶端 ID 和客戶端密碼。 將它們提供給 Netlify 的訪問控制。

GitLab

點擊頭像進入設置頁面，點擊左側“用戶設置”菜單中的“應用程序”。 您將看到一個用於添加新應用程序的表單。 提供以下信息：

• 一個名稱，例如“我的超級博客的 Netlify CMS”；
• 一個重定向 URI，它必須是“ https://api.netlify.com/auth/done ”；
• 應檢查的範圍是：
  • api
  • read_user
  • read_repository
  • write_repository
  • read_registry

保存您的應用程序將為您提供您的應用程序 ID 和密碼，您現在可以在 Netlify 的訪問控制中輸入。

比特桶

轉到您的用戶帳戶設置（單擊您的頭像，然後單擊“Bitbucket 設置”）。 在“訪問管理”下，單擊“OAth”。 在“OAuth 消費者”部分中，單擊“添加消費者”。 您可以將大多數內容保留為默認值，但以下內容除外：

• 一個名稱，例如“我的超級博客的 Netlify CMS”；
• 回調 URL，必須是“ https://api.netlify.com/auth/done ”；
• 應該檢查的權限是：
  • 帳戶：電子郵件、閱讀、寫作
  • 存儲庫：讀取、寫入、管理
  • 拉取請求：讀、寫
  • Webhook：讀寫

保存後，您可以訪問您的密鑰和秘密，然後您可以在 Netlify 的訪問控制中提供這些信息。

提供令牌後，轉到 Netlify，然後找到站點設置。 前往“身份”並啟用該功能。 您現在可以添加外部提供程序：選擇您的 Git 提供程序並單擊“啟用”。

如果您需要更多詳細信息，Netlify CMS 有一個您可以閱讀的身份驗證指南。

您現在可以訪問您的 Netlify 站點的後端並編輯內容。 每個編輯都是對你的 repo 的提交，在你的配置文件中指定的分支中。 如果您將main分支保留為 Netlify CMS 的目標，則每次保存時，它將運行一個新構建。 更方便，但沒有“中間狀態”那麼乾淨。

將它保存在dev分支上可以讓您更好地控制何時要運行新構建。 如果您的博客有很多內容並且需要更長的構建時間，這一點尤其重要。 無論哪種方式都行得通； 這只是你想如何運行你的博客的問題。

另外，請注意 Git LFS 是您在本地安裝的，因此通過 Netlify CMS 上傳的圖像將是“正常的”。 如果您在本地拉入遠程分支，則應將圖像轉換為 LFS，然後您可以將其提交並推送到遠程分支。 此外，Netlify CMS 目前不支持 LFS，因此圖像不會顯示在 CMS 中，但它們會顯示在您的最終構建中。

推薦閱讀：靜態站點生成器評論：Jekyll、Middleman、Roots、Hugo

結論

什麼騎！ 在本教程中，您學習瞭如何將 WordPress 帖子導出到 Markdown 文件、創建新存儲庫、設置 Git LFS、在 Netlify 上託管站點、生成 Hugo 站點、創建自己的主題以及使用 Netlify CMS 編輯內容. 還不錯！

下一步是什麼？ 好吧，您可以嘗試使用您的 Hugo 設置並閱讀有關 Hugo 提供的各種工具的更多信息——為了簡潔起見，我沒有介紹許多工具。

探索！ 玩得開心！ 博客！

更多資源

• 雨果文檔
  • 安裝
  • 快速開始
  • 配置
  • 模板
  • 分類法
  • 簡碼
  • 雨果在 Netlify
• Netlify 文檔
  • 自定義域
  • 託管 DNS
  • netlify.toml 部署腳本
• Netlify CMS 文檔
  • 小部件
• Git LFS