“gatsby build”在 Github Actions 上产生不同的结果

问题描述 投票：0回答：1

我正在尝试自动化 

gatsby build
并将流程部署到 
git push
上的 github 页面，但遇到了问题。

TL；博士

在我的本地计算机 (Windows 11) 和 GitHub (Ubuntu) 上使用 

yarn build
(=
gatsby build
) 构建的网站与 GitHub (Ubuntu) 操作不匹配。

构建的文件

index.html
向我显示了
about.md
上的内容，这似乎是静态实现到文件中的。

存储库

您可以克隆存储库来查看问题（或不是问题）。 建议启用 GitHub 页面并使用存储的工作流程进行构建，看看会发生什么。

https://github.com/AoSankaku/aosankaku.github.io

请记住，

docs
目录中的内容已过时且未使用。

环境

  • 节点v20.11.0
  • npm 10.2.4
  • 纱线21年1月22日

（在本地计算机和 GitHub 工作流程上）

远程机器

Ubuntu-22.04

本地机器

Windows 11 专业版 22H2 内部版本 22621.3007 使用 nvm

问题详情

首先我创建了这个文件。

当前工作流程文件

name: Release

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    permissions:
      contents: write

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: .nvmrc

      - name: Install Dependencies
        run: yarn install --frozen-lockfile

      - name: Build
        run: yarn build --verbose --log-pages

      - name: Upload Artifact
        uses: actions/upload-pages-artifact@v3
        with:
          name: github-pages
          path: public

  deploy:
    needs: build
    permissions:
      id-token: write
      pages: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/deploy-pages@v4
        id: deployment

创建此工作流程文件花了一些时间，但这不是直接问题。

我部署了这个来部署 github 页面，构建的网站开始表现奇怪。

（你可以访问该网站看看出了什么问题，但我对 stackoverflow 还很陌生，我害怕被禁止，所以我不想把网址贴在这里）

简单来说，

index.html
page显示的是
about.md
上写的内容，应该是
home.md
。这有点奇怪。

构建文件

我下载了工件 zip 文件进行调查，发现 

index.html
file 在 
about.md
上有文本。这完全出乎我的意料。

.zip 文件大小也是一个问题。部署的工件文件大小（包含完整构建的 gatsby 网站）仅为 6.73 MB，而本地构建的文件夹为 10.4 MB。虽然我的没有压缩成一个文件，但这很奇怪。

疑似很长
gatsby build
登录我的本地电脑

最后我在本地构建中发现了可疑行为。

这是我本地机器上

gatsby build --verbose --log-pages
显示的日志：

https://gist.github.com/AoSankaku/708b132bd2247f2be73f9494efb1dbd4 （太长了，无法粘贴到这里）

这个构建日志显然重复其输出超过 10 次。

所以也许这是我的计算机上的一个错误，无法在 

gatsby build
上构建正确的结果，但我没有进一步的线索来解决这个问题。

我在此处附加了 GitHub 操作日志（由上述工作流程文件生成的完整日志）：

https://gist.github.com/AoSankaku/7d65e7ab686cef69aca5870a0c6cf933 （这也太长了，无法粘贴到这里）

有人可以帮我恢复我的网站，并告诉我到底发生了什么事吗？

注意

我知道我可以通过推送通过重命名 

docs
创建的最新 
public
目录来手动恢复 GitHub 页面上的网站，但我想摆脱这个累人的过程。

我的浏览器 Vivaldi 检测到第二次下载的 zip 工件文件为病毒。我不知道为什么 Vivaldi 将其检测为病毒。

  • 读取输出日志没有发现任何结果
  • 调查index.tsx没有发现任何可疑之处
  • 从 
    --frozen-lockfile
    上的 
    yarn install
    中删除 
    release.yml
    可产生相同的结果
  • 阅读原始存储库
    gatsby-starter-apple
    什么也没发现

我希望整个 gatsby 网站能够像我的电脑一样构建并完美部署。

目前除了主页不受影响，但是，我想看看是什么导致了这个问题。

以下是

index.tsx
：

import React, { useState, useLayoutEffect } from "react"
import type { PageProps } from "gatsby"
import { graphql } from "gatsby"
import styled from "styled-components"

import type Post from "Types/Post"
import useSiteMetadata from "Hooks/useSiteMetadata"
import Layout from "Layouts/layout"
import SEO from "Components/seo"
import PostGrid from "Components/postGrid"
import CategoryFilter from "Components/catetgoryFilter"

import HomeDescription from "Components/home"

const Home = ({
  pageContext,
  data,
}: PageProps<Queries.Query, Queries.MarkdownRemarkFrontmatter>) => {
  const [posts, setPosts] = useState<Post[]>([])
  const currentCategory = pageContext.category
  const postData = data.allMarkdownRemark.edges

  useLayoutEffect(() => {
    const filteredPostData = currentCategory
      ? postData.filter(
        ({ node }) => node?.frontmatter?.category === currentCategory
      )
      : postData

    filteredPostData.forEach(({ node }) => {
      const { id } = node
      const { slug } = node.fields!
      const { title, desc, date, category, thumbnail, alt } = node.frontmatter!
      const { childImageSharp } = thumbnail ? thumbnail! : { childImageSharp: undefined }

      setPosts(prevPost => [
        ...prevPost,
        {
          id,
          slug,
          title,
          desc,
          date,
          category,
          thumbnail: childImageSharp?.id,
          alt,
        },
      ])
    })
  }, [currentCategory, postData])

  const site = useSiteMetadata()
  const postTitle = currentCategory || site.postTitle

  return (
    <Layout>
      <SEO title="Home" />
      <Main>
        <Content>
          {!currentCategory ? <HomeDescription /> : null}
          <CategoryFilter categoryList={data.allMarkdownRemark.group} />
          <PostTitle>{postTitle}</PostTitle>
          <PostGrid posts={posts} />
        </Content>
      </Main>
    </Layout>
  )
}

const Main = styled.main`
  min-width: var(--min-width);
  min-height: calc(100vh - var(--nav-height) - var(--footer-height));
  background-color: var(--color-background);
`

const Content = styled.div`
  box-sizing: content-box;
  width: 87.5%;
  max-width: var(--width);
  padding-top: var(--sizing-lg);
  padding-bottom: var(--sizing-lg);
  margin: 0 auto;

  @media (max-width: ${({ theme }) => theme.device.sm}) {
    padding-top: var(--grid-gap-lg);
    width: 87.5%;
  }
`

const PostTitle = styled.h2`
  font-size: 2rem;
  font-weight: var(--font-weight-extra-bold);
  margin-bottom: var(--sizing-md);
  line-height: 1.21875;

  @media (max-width: ${({ theme }) => theme.device.sm}) {
    font-size: 1.75rem;
  }
`

export const query = graphql`
  query Home {
    allMarkdownRemark(
      filter: { fileAbsolutePath: { regex: "/(posts/blog)/" } }
      limit: 2000
      sort: { frontmatter: { date: DESC } }
    ) {
      group(field: { frontmatter: { category: SELECT } }) {
        fieldValue
        totalCount
      }
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            category
            date(formatString: "YYYY-MM-DD")
            desc
            thumbnail {
              childImageSharp {
                id
              }
              base
            }
            alt
          }
          fields {
            slug
          }
        }
      }
    }
  }
`

export default Home
reactjs web graphql gatsby static-site-generation
1个回答
-1
投票

这个问题似乎可以通过将构建操作系统更改为

windows-latest
来解决。

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    permissions:
      contents: write

到

jobs:
  build:
    name: Build
    runs-on: windows-latest
    permissions:
      contents: write

我将在 Gatsby 官方存储库上创建一个问题来通知此问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.