在 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中文网其他相关文章！