本文解释了前端开发者面试问题网站的构建和自动部署方式。它涵盖了使用 Eleventy 作为静态网站生成器进行的构建过程，以及使用 GitHub Actions 和 GitHub Pages 进行的部署过程。
有关网站结构本身的更多信息，请参阅网站架构；有关 Eleventy 配置的详细信息，请参阅使用 Eleventy 进行静态网站生成。
前端开发者面试问题项目采用现代静态网站生成方法，将 Markdown 内容转换为功能齐全的网站。每当更改推送到主分支时，网站都会自动部署到 GitHub Pages。
构建和部署管道
来源：package.json5-9 .github/workflows/gh-pages-build.yml1-27 .gitignore3
该项目使用 Eleventy (11ty) 作为其静态网站生成器。Eleventy 处理内容文件（主要是 Markdown），并使用模板和布局将它们转换为静态 HTML 文件。
构建过程在 package.json 中配置，并使用位于 config/eleventy.config.js 的自定义 Eleventy 配置文件。主要的构建命令包含一个 pathprefix 参数，用于确保在部署到 GitHub Pages 时正确的 URL 处理。
该项目定义了两个主要的 npm 脚本
| 脚本 | 命令 | 目的 |
|---|---|---|
build | eleventy --config=config/eleventy.config.js --pathprefix='Front-end-Developer-Interview-Questions/' | 为生产环境构建站点，带有 GitHub Pages 路径前缀 |
start | eleventy --config=config/eleventy.config.js --serve --port 9090 --quiet | 启动一个带有自动重载功能的本地开发服务器 |
来源：package.json6-9 package.json39-48
该项目依赖多个 npm 包来执行构建
| 依赖项 | 目的 |
|---|---|
@11ty/eleventy | 静态网站生成器 |
@11ty/eleventy-plugin-syntaxhighlight | 代码语法高亮 |
clean-css | CSS 压缩 |
html-minifier | HTML 压缩 |
markdown-it | Markdown 解析 |
uglify-es | JavaScript 压缩 |
构建过程在 _site 目录中生成静态网站文件。该目录包含完整的网站，包括 HTML、CSS、JavaScript 和其他资源，可供部署。
来源：.gitignore3
该项目利用 GitHub Actions 进行持续集成和部署，每当更改推送到主分支时，都会自动构建和部署网站。
部署过程在 GitHub Actions 工作流文件 .github/workflows/gh-pages-build.yml 中定义。此工作流在推送到主分支时触发。
GitHub Actions 部署流程
来源：.github/workflows/gh-pages-build.yml1-27
GitHub Actions 工作流配置有以下关键元素
_site 目录发布到 gh-pages 分支来源：.github/workflows/gh-pages-build.yml3-27
除了主构建和部署流水线之外，该项目还包括一个使用 GitHub CodeQL 进行代码质量和安全分析的工作流。
CodeQL 分析工作流
CodeQL 工作流自动分析 JavaScript 代码库中潜在的安全漏洞和代码质量问题。此工作流在以下情况下运行：
来源：.github/workflows/codeql-analysis.yml1-38
构建和部署系统与网站架构集成，以交付最终产品。该过程将内容创建、站点生成和部署连接到一个持续的流水线中。
端到端集成
来源：package.json5-9 .github/workflows/gh-pages-build.yml1-27
前端开发者面试问题项目的构建和部署系统提供了一个自动化、高效的工作流，用于将内容转换为静态网站并部署到 GitHub Pages。这种方法确保了：
该系统一旦设置好，所需的手动干预极少，使贡献者能够专注于内容创建，而不是部署的繁琐事务。
来源：package.json5-9 .github/workflows/gh-pages-build.yml1-27 .github/workflows/codeql-analysis.yml1-38