企业官网建设流程全解析

如何使用 Netlify 部署 reference 静态速查网站？

【免费下载链接】reference面向开发者的技术速查清单（Cheat Sheets）集合，整理常见技术、工具与开发流程，帮助快速查阅关键信息，提高开发效率。项目地址: https://gitcode.com/GitHub_Trending/referen/reference

reference（Quick Reference）把docs/目录下的 Markdown 速查表编译成纯静态网站。如果你想在 Netlify 上托管这个站点，不需要自己写构建脚本：仓库根目录已经预置了netlify.toml构建配置，接入仓库后由 Netlify 自动编译并发布即可。下面按仓库中的实际配置说明完整流程。

仓库为 Netlify 预置了什么

仓库根目录的 netlify.toml 内容只有两行：

[build] command = "npm run build" publish = "dist"

• command：Netlify 构建时执行npm run build。对照 package.json 中的脚本定义，这条命令先运行refs-cli完成 Markdown 编译，再执行npm run cpy把appicon/*.png复制到dist/appicon。
• publish：构建完成后，Netlify 以dist目录作为站点发布目录。

package.json 中还声明了 Node 版本要求>=16.0.0，Netlify 的构建环境需要满足该版本。

也就是说，接入仓库后构建命令和发布目录都由仓库配置决定，不需要在 Netlify 后台额外填写。

主路径：接入仓库直接部署

CONTRIBUTING.md 的“快捷部署方法”末尾明确写了可以“直接一键部署到 Netlify”。操作步骤：

1. 在 Netlify 控制台新建站点，接入 reference 仓库（文档中给出的一键部署入口指向官方仓库，按提示授权即可）。
2. 构建配置保持仓库内的netlify.toml不动：构建命令npm run build，发布目录dist。
3. 等待构建完成，站点即可访问。

这个站点是纯静态内容，没有后端服务，接入仓库之外不需要配置数据库、环境变量等其他依赖。

备选：先在本地编译出 dist，再交给 Netlify

如果想先本地验证编译结果，CONTRIBUTING.md 给出的本地编译流程是：

$ git clone https://github.com/jaywcjlove/reference.git $ npm i # 安装依赖 $ npm run build # 编译输出 HTML

成功条件是编译后的静态页面输出到dist目录。这一点也可以从 Dockerfile 得到印证：官方部署镜像直接COPY ./dist到静态网站基础镜像中，说明dist就是最终发布的静态站点目录。

把生成好的dist目录作为静态站点发布到 Netlify 即可完成部署。npm run start是监听 Markdown 变更实时编译的开发模式，部署场景用不到。

可选：编译时自定义首页导航链接

如果希望编译产物里带一个自定义菜单，CONTRIBUTING.md 说明在项目根目录创建.env文件，在编译前添加以下内容：

REF_URL=http://ref.xxx.cn/ REF_LABEL=网站首页

上面是文档给出的示例值，REF_URL和REF_LABEL需要替换为你自己的链接地址与文字。该配置只在编译时生效，所以必须在构建发生之前就位。

结果验证与边界

• 编译侧：检查dist目录是否生成，这是 CONTRIBUTING.md 中“文件被输出到dist目录”的明确说法，也是netlify.toml中publish = "dist"发布的前提。
• 访问侧：dist被 Netlify 作为发布目录后，站点首页是由仓库根目录README.md自动生成的导航页，docs/下的各速查表可从首页进入，能正常打开即说明部署成功。

CONTRIBUTING.md同时还提供了克隆gh-pages分支、Docker 部署等其他自托管方式，那些面向自建静态服务器；本文只覆盖 Netlify 这一条部署路径。

【免费下载链接】reference面向开发者的技术速查清单（Cheat Sheets）集合，整理常见技术、工具与开发流程，帮助快速查阅关键信息，提高开发效率。项目地址: https://gitcode.com/GitHub_Trending/referen/reference