Hugo框架中文文档在Netlify上托管和部署Hugo站点

Netlify 提供的服务包括持续部署服务、全球CDN、超级快速DNS、原子部署、即时缓存验证、一键SSL证书、基于浏览器的界面、命令行界面以及其他很多管理hugo站点的特性服务.

前提条件

有GitHub, GitLab, 或者 Bitbucket 账户
完成了快速开始Quick Start 或者已经拥有了想要与世界分享的准备部署的Hugo站点
还没有netlify账号

创建Netlify账户

浏览器打开 app.netlify.com, 选择自己喜欢的注册方法。通常这会是一个托管的GIT服务的站点账号, 当让您页可以选择使用邮件地址来注册.

下面例子使用Github, 使用其他git服务商的账号的注册过程会类似过程

app.netlify.com 首页截图, 包含流行的git解决方案服务的链接

选择Github会调出github的验证授权模态对话框, 选择"Authorize application."

Netlify 和 GitHub 授权截图

创建可以持续部署的新站点

现在拥有了Netlify账户, 授权后应该会被导向您的netlify操作面板. 选择"New site from git."

Netlify没有在建站点的空白管理面板的截图、突出显示的’add new site’按钮

然后Netlify会引导您完成连续部署的必须步骤. 首先，再次选择您的git服务商, 不过这次为了给您的项目存储库添加netlify的访问权限。

步骤1截图在netlify创建新站点、选择git服务商

再一次看到Github授权模态框:

步骤1截图在netlify创建新站点、添加授权

选择需要持续部署的repo资源库。如果您有好多项目，可以通过查询实时过滤他们:

步骤1截图在netlify创建新站点选择git资源库

资源库选择好之后, netlify将你导航到基础设置的屏幕. 此处可以选择将要发布的git分支，设置您的build command构建命令, 您的发布(部署)目录. 发布目录应该与您在site configuration站点配置中设置的目录一致,默认是public. 后续步骤假设您在发布master代码分支.

在netlify中设置您的Hugo版本

可以通过在netlify.toml文件中为您的环境设置Hugo版本或者在netlify的命令行中设置HUGO_VERSION构建环境变量

为生产环境设置:

1
2
[context.production.environment]
  HUGO_VERSION = "0.53"

为测试环境:

1
2
[context.deploy-preview.environment]
  HUGO_VERSION = "0.53"

Netlify配置文件理解起来有点难,为不同环境设置正确也有点难. 可以从下面的站点netlify文件获得一点启发和提示:

netlify.toml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.81.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.81.0"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.81.0"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.81.0"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

构建和部署站点

在netlify终端, 选择 “Deploy site"会马上将您带到部署的终端:

部署站点到netlify的动画,包含构建的终端输出

构建完成时—这仅仅需要几秒—您会在屏幕顶部看到“英雄卡片”通知您部署成功. 英雄卡片会是在大多数页面中看到的第一个元素. 卡片允许查看页面的快速摘要, 访问大多数通常的/相关的动作和信息。Netlify会自动生成URL。您可以在 “Settings.“中更新URL.

在Netlify管理界面的部署屏幕的顶部的胜利部署勋章的截图.

访问展示站点 Visit the live site.

现在，每次您更新您的托管的git代码库,Netlify会重新构建并重新部署您的站点.

参考这篇博文获得Netlify处理Hugo版本的更详细信息.

在netlify平台上使用Hugo 主题样式

Netlify平台上Hugo不支持git clone 方法安装主题样式. 如果使用了git clone, Netlify会要求您递归删除主题目录theme中的.git 子目录, 因此阻止了主题未来版本的兼容性.

更佳的方法是通过git submodule来安装theme. 参考GitHub submodules文档或者Git 网站获得更多信息, 命令同git clone类似:

1
2
cd themes
git submodule add https://github.com/<THEMECREATOR>/<THEMENAME>

建议您只使用主题的稳定版本(如果有版本号的话)并且总是查看变化日志. 可以在theme的目录内检出特定版本来来查看.

转到主题目录，列出所有版本:

1
2
3
cd themes/<theme>
git tag
# exit with q

检出特定版本如下:

1
git checkout tags/<version-name>

在项目的根目录下执行如下命令更新主题到最新版本:

1
git submodule update --rebase --remote

后续 Next Steps

现在您具有一个https服务、通过CDN分发、配置成持续部署的鲜活站点。现在可以看看Netlify的如下文档:

Contents