Netlify部署Hugo个人博客

2021-09-24 约 1861 字预计阅读 4 分钟次阅读

Netlify介绍

对于想要使用Jekyll、Hexo、Hugo等静态搭建网站，又害怕复杂的本地环境配置的朋友，Netlify支持自动编译Jekyll、Hexo、Hugo等常见的静态博客程序。它对自己的定义是：

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS. And that’s just the beginning. 一个包含全球部署，持续化集成以及自动 HTTPS 的全能工作流。

使用它很简单，包括三步：

连接 git repo：支持 github gitlab 以及 bitbucket。
添加编译设定：比如设定分支，编译命令，以及输出的文件。
等待自动部署好。

对于免费用户来说，流量和部署速度都没有打折，还是非常贴心的。

Netlify连接至Github仓库

进入Netlify官网: https://www.netlify.com/，申请注册一个账号，可以使用Github、Gitlab以及Bitbucket直接授权登陆。然后登录到空间管理中心，点击的New site from Git添加网站。

然后根据自己的托管平台，这里使用GitHub作为托管平台。

验证登陆后在 repo 列表中找到对应的 repo，选择此前生成的个人静态博客的仓库。

站点基本设置如下：

netlify 会读取出来这个 repo 的类型，如果是 hugo 就会自动填写上 bulid command 和 publich directory。

点击Deploy site即可生成网站，当 Netlify 读取完你的网站所属仓库时，会自动识别你所用的静态网页生成器的程序，然后只要点击部署并发布，你的网站就会在 Netlify 被构建并且被发布。此时网站可能构建失败，虽然 Netlify 可以自动检测网站程序，但是最好能够匹配电脑上装的那个静态网页生成器的版本。所以，建议在Site settings中修改 Netlify 构建网站的静态网页生成器版本号：Build & deploy –> Enviroment –> Environment variables，填入 HUGO_VERSION 0.88.1 （具体版本号以使用的为准），其中可以在命令行输入hugo version查询hugo版本。

部署成功了即可通过Netlify 免费给我们的二级域名进行访问，在Site settings中Change site name可以改变站点的网址名称为自己想要的网址名称(域名格式为sitename.netlify.app)。

域名绑定

域名绑定需要在Domain management中点击Add custom domain，添加自己的域名。

点击确定添加后还需要验证DNS，可以使用Netlify提供的DNS服务，在添加完域名之后，需要在自己的域名供应商那边将 DNS 服务器改成 Netlify 的服务器，这样可以享受到 Netlify 所提供的 CDN 加速服务。

拿到这个DNS服务器地址之后，进入相应域名控制台，域名管理，修改DNS为Netlify提供的DNS服务器。回到设置界面后，绑定的域名后有绿色的Netlify DNS标志即表示域名绑定成功（DNS修改后可能至多要24小时才能生效）。

**注：**Hugo中绑定域名后，同时需要改变网站根目录中config文件的域名参数，例如baseURL = "https://www.shangzg.top/"或"https://szg.netlify.app/"，否则展示的网页可能有问题。

需要注意的是这个网站已经自带 CDN 功能了，你无需再次集成如 cloudflare 之类的 CDN，默认免费的账户 Netlify 给我们每月100GB的流量，超出需要掏钱了，不过这个对小站来说足够了。

Netlify 也能自动为你的网站加上 https，提供了免费的 https 证书服务，证书由 Let’s Encrypt 提供，一键点击即可，非常之方便。也可以自己去重新申请一个证书，并将证书和密钥粘贴到 Netlify 内即可。

至此之后，这一切都是自动的：只要Github的仓库有任何提交合并变动，Netlify就会自动拉取实时部署自动重新构建网页文件并且自动发布，就只需要我们写完相应文章提交至Github就行了，无需额外的操作。

Netlify.toml配置文件

除了使用 Netlify UI 配置构建设置、部署设置和环境变量之外，还可以在netlify.toml文件中配置这些设置。

该文件通常存储在站点存储库的根目录中。netlify.toml 中指定的设置会覆盖任何相应的在 Netlify UI 进行的设置。该netlify.toml文件是一个配置文件，用于指定 Netlify 如何构建和部署您的站点——包括重定向、分支和特定于上下文的设置等。

在项目的根目录下新建netlify.toml文件，进行自定义的Netlify配置。

配置内容可以参考Hugo官方文档的配置

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
31
32
33
34
35


[build]
publish = "public"
command = "hugo --gc --minify"

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

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

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

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

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

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

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

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

[[redirects]]
from = "/npmjs/*"
to = "/npmjs/"
status = 200

参考

Host on Netlify

File-based configuration