在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

h5bp/Front-end-Developer-Interview-Questions

菜单

GitHub Actions 工作流

相关源文件

本文档详细介绍了通过 GitHub Actions 为 Front-end Developer Interview Questions 仓库实现的持续集成和持续部署 (CI/CD) 工作流。这些工作流自动化了网站的构建、测试、安全分析以及部署到 GitHub Pages 的过程。

有关通用构建和部署策略的信息，请参阅构建和部署。

工作流概述

该仓库使用了两个主要的 GitHub Actions 工作流：

  1. Eleventy 构建 - 处理静态网站生成和部署
  2. CodeQL 分析 - 执行安全扫描和代码质量分析

每个工作流在维护仓库的完整性和功能性方面都有其独特的作用。

来源: .github/workflows/gh-pages-build.yml1-28 .github/workflows/codeql-analysis.yml1-39

Eleventy 构建工作流

Eleventy 构建工作流负责生成静态网站并将其部署到 GitHub Pages。此工作流在 gh-pages-build.yml 文件中定义。

工作流配置

配置项值
工作流名称Eleventy 构建
触发事件推送到 main 分支
运行器Ubuntu 20.04
Node.js 版本16.x

工作流程

工作流遵循以下步骤：

  1. 仓库检出：从仓库检索最新代码
  2. Node.js 设置：使用 Node.js 16.x 配置环境
  3. 依赖安装：安装所需的 npm 包
  4. 构建过程：使用 TartanLlama/actions-eleventy action 通过 Eleventy 构建网站
  5. 部署：使用 peaceiris/actions-gh-pages action 将构建好的网站发布到 gh-pages 分支

关键构建参数

构建步骤使用特定参数配置 Eleventy：

  • 配置文件：config/eleventy.config.js
  • 路径前缀：Front-end-Developer-Interview-Questions（确保在 GitHub Pages 上托管时正确的 URL 路径）
  • 输出目录：./_site（生成构建文件的地方）

来源: .github/workflows/gh-pages-build.yml1-28

CodeQL 安全分析工作流

CodeQL 工作流执行代码库的自动化安全扫描，以识别潜在漏洞。此工作流在 codeql-analysis.yml 文件中定义。

工作流配置

配置项值
工作流名称CodeQL
触发事件推送到 main 分支，向 main 分支的拉取请求，每周计划（UTC 时间每周日 20:34）
运行器Ubuntu 最新版
语言矩阵JavaScript
权限actions: read, contents: read, security-events: write

工作流程

工作流遵循以下步骤：

  1. 仓库检出：从仓库检索最新代码
  2. CodeQL 初始化：为 JavaScript 设置 CodeQL 分析环境
  3. 自动构建：自动构建项目以准备进行分析
  4. 分析：执行安全扫描并报告发现的问题

战略性实施

CodeQL 工作流被战略性地配置为在以下情况运行：

  • 代码更改（推送到 main 分支和拉取请求）
  • 定期每周间隔（以捕获新发现的漏洞）

这提供了持续的安全监控，不受开发活动的影响。

来源: .github/workflows/codeql-analysis.yml1-39

与仓库架构的集成

GitHub Actions 工作流通过以下方式与整体仓库架构集成：

GitHub Actions 工作流是部署管道的关键部分，将内容和构建系统连接到面向公众的网站。这些工作流确保：

  1. 内容更改自动构建和部署
  2. 代码质量和安全性得到持续监控
  3. 网站无需手动干预即可保持最新内容

来源: .github/workflows/gh-pages-build.yml1-28 .github/workflows/codeql-analysis.yml1-39

工作流与网站生成的关系

Eleventy 构建过程与 GitHub Actions 工作流之间的关系如下图所示：

当推送到 main 分支时，GitHub Actions 工作流将：

  1. 使用 config/eleventy.config.js 中指定的配置调用 Eleventy
  2. 处理所有 markdown 文件、模板和资产
  3. 在 _site 目录中生成完整的静态网站
  4. 将 _site 目录的内容发布到 gh-pages 分支
  5. GitHub Pages 随后从 gh-pages 分支提供内容

来源: .github/workflows/gh-pages-build.yml1-28

总结

GitHub Actions 工作流实现了自动化 CI/CD 管道，它将：

  1. 当更改推送到 main 分支时，使用 Eleventy 构建静态网站
  2. 部署构建好的网站到 GitHub Pages
  3. 分析代码库中的安全漏洞
  4. 向仓库维护者报告安全发现

这些工作流消除了手动构建和部署步骤的需要，确保面试问题网站始终与最新内容同步，并免受已知漏洞的威胁。

这些工作流的自动化特性与项目目标一致，即提供一个由社区维护的前端开发人员面试问题资源，该资源可以轻松更新和扩展。

来源: .github/workflows/gh-pages-build.yml1-28 .github/workflows/codeql-analysis.yml1-39