介绍
now-x-static 是一个基于 now 的静态网站部署工具，它可以帮助你快速地将静态网站部署到 now 上。同时，它提供了许多有用的功能，如配置自定义域名、HTTPS、全局缓存等等。
本文将带你详细了解 now-x-static 的使用方法。
安装
使用 npm 安装：
npm install now-x-static --save-dev
生成部署配置
- 在项目的根目录下创建一个 now.json 文件：
-- -------------------- ---- -------
-
---------- --
--------- -
-
------ ---------------
------ -------------------
-
--
--------- -
-
------ --------
------- -----
-
-
-新建一个 static 文件夹，将静态文件放在其中。
在 package.json 中添加 build 命令：
{
"scripts": {
"build": "npm run build:static",
"build:static": "now-x-static build ./static -o ./dist"
}
}这个命令会将 static 文件夹中的文件编译成静态文件，然后将它们打包到 ./dist 目录下。
部署
- 确认你已经安装了 Zeit Now：
npm install -g now
- 使用 now 命令进行部署：
now
优化
使用 now-x-static，你可以非常简单地进行一些优化。以下是一些实用的优化技巧：
配置自定义域名
添加了自定义域名后，访问你的网站时就可以使用该域名，而不是默认的 *.now.sh 域名。
{
"alias": "example.com"
}配置静态文件缓存
为了提高网站的性能，可以在 now.json 中配置静态文件缓存时间：
-- -------------------- ---- -------
-
---------- -
-
--------- ------------------------------
---------- -
-
------ ----------------
-------- ----------------
-
-
-
-
-这里的 max-age=604800 表示缓存七天。
配置 HTTPS
使用 now-x-static，开启 HTTPS 非常简单：
{
"alias": "example.com",
"prod": true
}prod: true 会自动申请 Let's Encrypt SSL 证书。
示例代码
具体示例代码可以参考 GitHub仓库，其中包含一个简单的静态网站项目和部署配置。
指导意义
使用 now-x-static，部署静态网站变得快速而简便，同时提供了多种优化措施，让你更好地管理你的网站。learn by doing 是学习前端的一个有效方式，因此推荐读者利用 GitHub 代码管理平台进行练习，并结合自身开发经验寻找更多的优化技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eae81e8991b448dc2d5