如何查看 GitHub Pages 的构建日志

GitHub Pages 一直让人感觉很神奇，因为我们一直没办法查看 Jekyll 网站的构建日志。诚然，这可能会有点令人沮丧，因为如果没有上下文，很难识别和解决问题。如果 GitHub Pages 构建网站失败，原因并不总是很清楚。

幸运的是，GitHub 最近启用了使用 GitHub Actions 的 GitHub Pages 构建，该功能允许开发人员在查看操作日志的同一位置查看他们的 Jekyll 和 HTML 页面构建和部署的日志。

在解释其工作原理之前，我将为不熟悉这些产品的人简要介绍一下 GitHub Pages 和 GitHub Actions。

关于 GitHub Pages

GitHub Pages 是一项静态托管服务。它根据您仓库中存储的 HTML、CSS 和 JavaScript 生成并发布网站。该网站默认使用 github.io 域名，但您也可以根据需要使用自定义域名。有关 GitHub Pages 的更多信息，请阅读官方文档。

关于 GitHub Actions

GitHub Actions 是一款便捷的工具，可让您在 GitHub 仓库内自动化自定义工作流程。工作流程会在特定事件（例如拉取请求或推送）时触发。例如，您可以通过创建拉取请求来触发工作流程。您可以编写自己的操作，也可以使用现有操作。GitHub Marketplace 中有超过 10,000 个由全球开发者创建的操作。开发者通常使用 GitHub Actions 执行重复性任务，例如检查测试是否通过以及发布管理。访问 GitHub 的GitHub Actions文档了解更多信息。您可以阅读 Michelle Mannering 的这篇博文，更好地理解操作、事件、工作流程以及其他 GitHub Action 相关术语之间的区别。

查看 Jekyll 和 HTML 页面的构建日志

默认情况下，当您为静态站点的 repo 启用 GitHub Pages 时，它将创建并触发一个名为的工作流程pages build and deployment。

我们来尝试一下吧！

步骤 1：在一个空的仓库中，创建一个 index.html 文件，其中包含您喜欢的内容。目前，您可以添加

<!DOCTYPE html>
<html>
   <body>
      <h1>What’s up world?</h1>
   </body>
</html>

第 2 步：在您的 repo 中，单击“设置”。

步骤 3：在左侧边栏上，选择“页面”。

步骤 4：通过选择您想要在网站上反映的代码的分支来启用 GitHub Pages，并且不要忘记按保存！

步骤 5：转到 repo 中的“操作”选项卡。

步骤 6：现在，您应该看到新创建的名为的工作流程pages build and deployment。

步骤 7：单击工作流查看日志详细信息。

步骤 8：如果成功，您可以在以下位置查看您的实时网站：https://{your github name}.github.io/{your repo name}/

步骤 9：每次向 GitHub Pages 上托管的分支推送新内容时，都会运行新的页面构建和部署工作流。请在 index.html 中添加以下行尝试一下：

<!DOCTYPE html>
<html>
   <body>
      <h1>What’s up world?</h1>
      <h2>I’m using GitHub Pages builds with GitHub Actions</h2>
   </body>
</html>

你的工作流程应该会成功再次运行并更新你的 GitHub Pages 站点。如果更新失败，你可以检查日志来分析和诊断问题！

非 Jekyll 解决方法

如果您想查看非使用 Jekyll 或 HTML 构建的网站的日志，您可以使用社区构建的解决方法来实现。

下面是一个示例工作流程（由社区创建），用于构建静态 React 应用程序并将其部署到 GitHub Pages：

name: React build & deploy

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Install Node.js
      uses: actions/setup-node@v1
      with:
        node-version: 14.x

    - name: Install NPM packages
      run: npm ci

    - name: Build project
      run: npm run build

    - name: Run tests
      run: npm run test

    - name: Upload production-ready build files
      uses: actions/upload-artifact@v2
      with:
        name: production-files
        path: ./build

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
    - name: Download artifact
      uses: actions/download-artifact@v2
      with:
        name: production-files
        path: ./build

    - name: Deploy to gh-pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./build

我从 Clyde D'Souza 的博客文章“使用 GitHub Pages 和 GitHub Actions 部署 React 应用程序”中学到了这个天才的方法。

提醒事项

请记住，GitHub Pages 会在项目根目录中查找 index.html、index.md 或 readme.md 文件，以将其渲染为落地页。如果您使用的是 React 之类的框架，这些文件不会位于项目根目录中，因此您需要运行以下命令npm run build来为您的应用生成静态资源，包括 index.html 文件。请阅读 Desmond Nyamador 撰写的这篇 Pluralsight博客文章，了解如何生成所需资源的详细指导。Desmond 将指导读者生成 index.html 并将 GitHub Pages 指向正确的文件。

通过此公告帖子了解有关使用 GitHub Actions 进行构建的 GitHub Pages 的更多信息。

如果您喜欢这篇文章，请在 Dev.to 上关注我和GitHub获取更多内容！

鏂囩珷鏉ユ簮锛�https://dev.to/github/visualize-github-pages-build-logs-1mc1