自动部署#

在 Hexo 古早时期，有许多自动部署教程，然而，其中大量教程都是让你复制他们的 Github Action 源代码先进行渲染，再使用类似 Netlify 等托管商拉取渲染后源码。但实际上，Netlify 也支持自动部署，以 Hexo 为例，你可以像下图一样，在构建命令(Build command)部分写入 hexo g（很抱歉，我不知道为什么 Cloudflare 不支持这样写，但你其实可以直接在 Cloudflare 构建页面选择模板为 Vue），输出目录(Publish directory)写入 publish 即可。

如果你修改过 _config.yml、package.json当中的一些设置，那么按你自己设置来，我这都是默认设置。~~当然应该也没人会改默认设置吧~~

在设置完毕后，就可以看见构建日志了。

这是我博客的构建概要。

你可以看见，这里有许多项目，那么这些项目是干啥用的？且看下面。

netlify.toml#

这个文件是 Netlify 官方的构建文件，你可以在里面写入一些信息，例如：

1
[build]
2
command = "npm run build"
3
# 构建命令
4
publish = "dist"
5
# 发布目录
6
[[redirects]]
7
 from = "/*"to = "/index.html"
8
 status = 200

但我认为build部分自己在面板设置就行，也不用写出来了。接下来是介绍其他项目。

提醒 color:yellow

netlify.toml直接放在 Hexo 根目录即可

redirect#

这是链接重写，或者叫重定向，用于网站内将某些链接格式重写或转向其他链接。

官方示例：

1
[[redirects]]
2
  from = "/old-path"
3
  to = "/new-path"
4
  status = 301
5
  force = false
6
  query = {path = ":path"}
7
  conditions = {Language = ["en"], Country = ["US"], Role = ["admin"]}
8

9
## 此规则重定向到外部API，使用Token对请求进行验证
10
[[redirects]]
11
  from = "/search"
12
  to = "https://api.mysearch.com"
13
  status = 200
14
  force = true # COMMENT: ensure that we always redirect
15
  headers = {X-From = "Netlify"}
16
  signed = "API_SIGNATURE_TOKEN"

说明：

参数	说明
`from`	您希望重定向的路径，路径是区分大小写的，特殊字符需要进行URL编码。
`to`	您希望重定向到的URL或路径，特殊字符需要进行URL编码。
`status`	重定向时使用的HTTP状态码，默认为`301`。
`force`	是否覆盖路径中已有的内容，默认为`false`。
`query`	必须匹配的查询字符串参数。
`conditions`	重定向的匹配条件，包括国家、角色和Cookie存在条件。
`headers`	在代理重定向中附加的请求头。
`signed`	用于签名代理重定向的环境变量名称。

如果在 Hexo 中因某些原因需要配置重定向，那么可以使用redirect进行部署：之前遇到必应爬取与文章链接更新冲突的问题，如果采用了 Netlify 部署的话，可以将原路径进行重定向到新路径。

之前遇到过一个问题，由于我的网站某些功能要fetch其他网站的东西，所以我要使用跨域请求允许，而使用 Cloudflare 提供的页面规则可以设置，我在这里有说过，然而，要使用 Cloudflare 提供的这个功能，则必须开启其代理，但我不需要，该如何？Netlify 提供了可以自定义请求头的选项，即header。

官方示例：

1
[[headers]]
2
  for = "/*"
3
  [headers.values]
4
    X-Frame-Options = "DENY"

支持：

Accept-Ranges
Age
Allow
Alt-Svc
Connection
Content-Encoding
Content-Length
Content-Range
Date
Location
Server
Set-Cookie
Trailer
Transfer-Encoding
Upgrade

注意 color:yellow

Set-Cookie只能用在自定义域名里面，如果你使用的是*.netlify.app，则不适用。

回到上文说的允许跨域请求，在netlify.toml中可以这么写：

1
[[headers]]
2
  for = "/*"  # 匹配所有路径
3
  [headers.values]
4
    Access-Control-Allow-Origin = "*" # 允许所有，然而你也可以只设置自己的域名
5
    Access-Control-Allow-Methods = "GET, POST, OPTIONS"
6
    Access-Control-Allow-Headers = "cache-control, Content-Type, Authorization" # 按你需要的来
7
    X-CORS-Config-Source = "netlify-headers"  # 自定义标识头
8

9
# 单独处理 OPTIONS 请求
10
[[headers]]
11
  for = "/*"
12
  [headers.values]
13
    Access-Control-Max-Age = "86400"
14
  method = ["OPTIONS"]  # 仅针对OPTIONS方法

Functions 和 Edge-functions#

这俩玩意可强大很多，可以用其部署一些js脚本等，但其中涉及的有亿点点复杂，有图为证，就不写了，有兴趣可以自己琢磨。

虽然复杂，但你可以使用这两个完成上面的重定向和标头标记等工作，更加全面。

plugin#

插件位于(site)-Site configuration-Build plugins处，提供了许许多多的插件供你使用，我在此推荐两个。

Lighthouse#

Lighthouse 是很著名的网站性能检查插件，在 Netlify 处安装可以在每次构建后，自动在网站上运行 Lighthouse 审核。

安装#

直接点击安装即可，无需任何复杂的操作。

进阶#

默认安装运行使用的语言是英语，且为移动端运行，如果需要改变设置，要在netlify.toml中写配置

1
[[plugins]]
2
  package = "@netlify/plugin-lighthouse"
3

4
  [plugins.inputs.settings]
5
    locale = "zh" # 设置中文
6
    preset = "desktop" # 设置为桌面端

如果你想对自己狠一点，你可以

1
# Set minimum thresholds for each report area
2
  [plugins.inputs.thresholds]
3
    performance = 0.9
4
    accessibility = 0.7
5
# 只有当表现＞0.7才可以部署成功

Fetch feeds#

这个插件可以让你在部署时先fetch一些源(RSS)，netlify.toml中这么写

1
# Config for the Netlify Build Plugin: netlify-plugin-fetch-feeds
2
[[plugins]]
3
  package = "netlify-plugin-fetch-feeds"
4

5
  [plugins.inputs]
6
    # Where should data files reside
7
    dataDir = "site/_data"
8

9
    # All the feeds we wish to gather for use in the build
10

11
    [[plugins.inputs.feeds]]
12
      name = "hawksworx"
13
      url = "https://hawksworx.com/feed.json"
14
      ttl = 3600
15
    [[plugins.inputs.feeds]]
16
      name = "netlify"
17
      url = "https://www.netlify.com/blog/index.xml"
18
      ttl = 86400