自动部署

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

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

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

这是我博客的构建概要。

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

netlify.toml

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

[build]
command = "npm run build"
# 构建命令
publish = "dist" 
# 发布目录
[[redirects]]
 from = "/*"to = "/index.html"
 status = 200

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

注意

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

redirect

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

官方示例：

[[redirects]]
  from = "/old-path"
  to = "/new-path"
  status = 301
  force = false
  query = {path = ":path"}
  conditions = {Language = ["en"], Country = ["US"], Role = ["admin"]}

## 此规则重定向到外部API，使用Token对请求进行验证
[[redirects]]
  from = "/search"
  to = "https://api.mysearch.com"
  status = 200
  force = true # COMMENT: ensure that we always redirect
  headers = {X-From = "Netlify"}
  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。

官方示例：

[[headers]]
  for = "/*"
  [headers.values]
    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

注意

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

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

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

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

Functions 和 Edge-functions

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

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

plugin

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

Lighthouse

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

安装

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

进阶

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

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

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

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

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

Fetch feeds

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

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

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

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

    [[plugins.inputs.feeds]]
      name = "hawksworx"
      url = "https://hawksworx.com/feed.json"
      ttl = 3600
    [[plugins.inputs.feeds]]
      name = "netlify"
      url = "https://www.netlify.com/blog/index.xml"
      ttl = 86400

The End

Netlify 的部署功能十分强大，可做之事十分的多，充分利用可以给网站部署带来不一样的效果。

玩转Netlify部署