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

1. 导航到 Cloud Build 触发器页面。
2. 点击名为 Deploy 的触发器的 RUN 按钮。
3. 在打开的侧边抽屉中，点击 main 分支触发器的 RUN TRIGGER 按钮。

注意：如果 main 分支有新提交，web.dev 每小时会自动部署一次。只有在构建失败或自动部署被禁用时才应进行手动部署。

调试 🐛

如果你需要调试网站的构建过程：

1. 在 .eleventy.js 中添加 debugger 语句
2. 运行 npm run debug:eleventy
3. 转到 about://inspect 以附加到正在运行的进程。

<img width="295" alt="Chrome 检查页面显示检查按钮" src="https://user-images.githubusercontent.com/1066253/61085691-bf125a00-a3e5-11e9-9151-58bd8a50d404.png">