介绍

Why

Netlify

Netlify 是一个提供了免费部署静态站点的平台，可用于作为 github page 的替代工具。

在 Netlify 上面部署站点也非常方便，可以直接使用 github 仓库进行 构建并部署，同时支持 自定义域名。

还提供了 Netlify Functions 等工具，可以用于给站点提供 自定义云函数。

VuePress

vuepress 是一个很方便的静态网站构建工具，使我们可以直接书写 markdown后，构建为一个高可用的静态站点。

部署

一般情况下，当我们不希望购买一个服务器用于部署我们的站点时，通常都会选择使用 github page 来进行免费部署。 Netlify 是一种替代方案，而且当使用 Netlify 部署时，还可以利用 Netlify Functions 提供的云函数功能， 使站点能够进行更为丰富的交互。

场景

通过 Functions 连接到 一些提供了 免费服务的 云存储服务，比如 FireBase ，Lean Cloud 等。 虽然这些云存储服务提供了 Web 客户端直连服务的功能。但毕竟我们的站点源码是直接放在 github开源仓库中， 我们不希望将 这些 云存储服务 提供的一些 鉴权信息 直接 保存在 仓库代码中，带来某些安全风险。

在这种场景下，就可以借助 Netlify Functions ，将这些鉴权信息，作为 环境变量 ， 托管在 Netlify Environment Variables 中，然后通过 站点调用 Functions 来获取这些鉴权信息。 或者进一步的，直接将 云存储服务的 连接、功能等，都在 Netlify Functions 中完成， 站点再调用 Functions 接口， 获取返回的数据。

有了 Netlify Functions 加上 一些 第三方的 云服务支持， 可以为我们的 vuepress 站点提供更强大的支持。

如何整合？

在基于以上的背景，下一步就是需要将 Netlify Functions 能够在 我们的 Vuepress 项目中进行 整合了。

• 如何使 Netlify Functions 能够在本地开发环境中进行调试。
• 如何将 已开发好的 Functions 作为 vuepress plugin 提供给 其他 vuepress theme 或 vuepress 站点中使用。

开发环境

本插件在 vuepress 的开发服务的基础上， 启动了一个 由 netlify-cli 提供的 服务，并将该服务通过代理的方式， 代理到 vuepress开发服务上，统合开发环境。

并且监听 functions 内容变更，实现热更新。

打包

在打包阶段， 生成一个 netlify.toml 配置文件，配置 functions 相关内容。

并且将 所有 functions 添加在 vuepress 的构建包中。

如何使用插件，请查看 使用文档