Contents

Netlify部署Hugo个人博客

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 的全能工作流。

使用它很简单,包括三步:

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

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

Netlify连接至Github仓库

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

/images/2021-09-24-Netlify部署Hugo个人博客/image-20210926192348411.png

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

/images/2021-09-24-Netlify部署Hugo个人博客/image-20210926192626871.png

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

/images/2021-09-24-Netlify部署Hugo个人博客/image-20210926193028216.png

站点基本设置如下:

/images/2021-09-24-Netlify部署Hugo个人博客/image-20210926193337173.png

netlify 会读取出来这个 repo 的类型,如果是 hugo 就会自动填写上 bulid commandpublich directory

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

/images/2021-09-24-Netlify部署Hugo个人博客/image-20210926193826237.png

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

/images/2021-09-24-Netlify部署Hugo个人博客/image-20210926194149701.png

域名绑定

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

/images/2021-09-24-Netlify部署Hugo个人博客/image-20210926194447064.png

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

/images/2021-09-24-Netlify部署Hugo个人博客/image-20210926194731850.png

拿到这个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 内即可。

/images/2021-09-24-Netlify部署Hugo个人博客/image-20210926201107172.png

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

Netlify.toml配置文件

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

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

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

/images/2021-09-24-Netlify部署Hugo个人博客/image-20210927102648706.png

配置内容可以参考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