在 Vercel 上部署 Hugo 的分步指南

本指南將引導您完成將 Hugo 網站部署到 Vercel。
我將確保您至少避免一個常見錯誤。

1. 在本地建立您的 Hugo 網站

假設 Hugo 已經安裝：

hugo 新網站 ;

---

2. 將您的 Hugo 網站推送到 GitHub

然後為網站設定一個 git 儲存庫。

git 初始化

新增提交並推送您的專案文件：

git add .
git 提交
git push -u origin master

---

3.為您的 Hugo 網站新增主題。

例如，您可以使用 Nno jQuery、無 Bootstrap 超快主題，如hugo-blog-awesome：

作為 github 模組：
git 子模組加入 https://github.com/hugo-sid/hugo-blog-awesome.git

或 Hugo 模組
Hugo Mod 取得 github.com/hugo-sid/hugo-blog-awesome

---

4.新增vercel配置（vercel.json）

在根目錄中加入vercel.json，我們將在其中定義hugo版本Go版本和buildCommand，在將hugo定義為vercel中的框架預設後，這些配置將被自動檢測。


vercel.json

{
  "build": {
    "env": {
      "HUGO_VERSION": "0.135.0",
      "GO_VERSION": "1.19.5"
    }
  },
 "buildCommand": "hugo --gc --minify"
}

- 使用 Hugo env 顯示您正在使用的 Go 和 Hugo 版本

然後將更新推送到Github：
git add .
git commit -m「vercel 部署」
git push -u origin master

---

5.在 Vercel 上部署您的網站

在匯入過程中，確保專案正確連接到您的 Hugo 儲存庫。

Vercel 偵測環境並命令建置：

或您可以在此處的 Vercel 環境變數中手動設定

部署日誌：

成功建立後，Vercel 將提供一個預覽鏈接，您可以在其中查看實時 Hugo 網站。您也可以透過 Vercel 的設定為您的專案配置自訂網域。

---

6. 添加域名

如果您有域名，您可以將域名新增至項目設定的域部分中的 vercel。然後向您的網域提供者新增 CNAME 以指向 vercel 網域。

---

?️ 修正常見部署問題

主要問題是，hugo 支援不是很好，即使vercel 已經更新了他們的Node 鏡像以擁有Hugo，並且使用默認設置，我遇到了Hugo 佈局未找到的錯誤，並且我的部署導致了XML頁。
這是因為 env 參數 Hugo 和 Go 版本需要在 json 檔案 vercel.json

中定義

使用 Hugo 和 Vercel 設定個人網站非常簡單，儘管存在一些小問題。我希望這篇文章可以幫助您建立自己的網站。有關我對網站所做的更改的更多詳細信息，請參閱我網站的提交歷史記錄。

---

一些來源：
https://vercel.com/guides/deploying-hugo-with-vercel
https://vercel.com/docs/projects/project-configuration
https://blog.gusibi.site/article/Best-Practices-for-Deploying-Hugo-on-Vercel

以上是在 Vercel 上部署 Hugo 的分步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！