web.dev [已归档]
注意: 本站点已迁移到新平台,此存储库现为只读模式。我们将不再合并新的拉取请求。请在新的问题跟踪器中提出内容相关问题。
web.dev 是面向各种背景开发者的终极资源,用于学习、创造和解决网络问题。它不仅旨在教育开发者,还帮助他们将所学应用到任何个人或商业网站上。
[已归档的 README]
构建网站 🏗
你需要安装较新版本的 Node:v14 (LTS) 或更高版本。
要检查你的 node 版本,请在终端中运行 node -v
。
如果你没有安装 node,或需要升级,我们建议使用 Node 版本管理器 (nvm)。
克隆仓库
git clone https://github.com/GoogleChrome/web.dev.git
进入创建的文件夹
cd web.dev
安装依赖
npm ci
启动本地服务器预览网站
npm run dev
打开 http://localhost:8080/
在本地查看网站。对资源的更改将重新构建网站。刷新页面以查看更改。
设置构建标志
构建整个网站可能需要一段时间,因为它包含大约一千个页面。如果你想大幅加快构建时间,我们建议设置一些构建标志来忽略某些部分。
- 在项目根目录创建一个
.env
文件 - 添加以下内容:
# 忽略所有网站内容
ELEVENTY_IGNORE=true
# 仅构建你正在处理的目录。
# 注意,这是一个 JSON 字符串,所以必须使用双引号。
ELEVENTY_INCLUDE=["blog", "vitals"]
环境 🌳
设置 ELEVENTY_ENV=prod
以强制生产构建。这是运行 "stage" 或 "deploy" 时的默认设置。不支持 ELEVENTY_ENV
的其他选项,尽管我们的 Eleventy 网站配置在未指定时将默认为 'dev'。
生产构建目前需要大量内存,以至于 node
可能会因错误而退出,错误内容类似于:
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
所需的确切堆空间量因计算机和 node
版本而异。如果你需要本地生产构建,但内存不足,可以通过在 npm
命令前添加 --node-options '--max_old_space_size=8192'
(分配 8GB 堆空间)来增加堆大小。例如:
ELEVENTY_ENV=prod npm --node-options '--max_old_space_size=8192' run build
预演 🕺
当你发送拉取请求时,系统会自动为你进行预演。注意查看 netlify 机器人在拉取请求中的评论,其中包含你的唯一 URL。
部署网站 🚀
自动部署
网站将在周一至周五每小时自动构建和部署主分支。如果你刚刚合并了一篇文章,它应该在下一个整点上线。
手动部署
要手动部署网站,你需要是以下 Google 团队之一的成员:
- web.dev-eng
- web.dev-owners
- 导航到 Cloud Build 触发器页面。
- 点击名为 Deploy 的触发器的 RUN 按钮。
- 在打开的侧边抽屉中,点击 main 分支触发器的 RUN TRIGGER 按钮。
注意:如果 main
分支有新提交,web.dev 每小时会自动部署一次。只有在构建失败或自动部署被禁用时才应进行手动部署。
调试 🐛
如果你需要调试网站的构建过程:
- 在
.eleventy.js
中添加debugger
语句 - 运行
npm run debug:eleventy
- 转到
about://inspect
以附加到正在运行的进程。