'gatsby build' produces different result on Github Actions

Question

I'm trying to automate the gatsby build and deploy process to github pages on git push and ran into a problem.

TL;DR

Built website using yarn build (=gatsby build) on my local computer (Windows 11) and on GitHub (Ubuntu) actions doesn't match.

The built file, index.html, shows me the contents on about.md, and this seems to be statically implemented to the file.

Repository

You can clone the repo to see the problem (or isn't a problem). It is recommended to enable GitHub pages and use the stored workflow to build to see what happens.

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

Keep in mind that contents in docs directory is outdated and not used.

Environment

• node v20.11.0
• npm 10.2.4
• yarn 1.22.21

(Both on local machine and GitHub workflow)

Remote machine

Ubuntu-22.04

Local machine

Windows 11 Pro 22H2 Build 22621.3007 Using nvm

Problem Details

Firstly I created this file.

Current workflow file

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

It took several time to create this workflow file, but this isn't a direct problem.

I deployed this to deploy github pages, and the built website started behaving strange.

(You can visit the website to see what's wrong, but I'm pretty new to stackoverflow and I'm afraid to be banned, so I don't rather paste the url here)

In short, index.html page shows contents written on about.md, which should be home.md. This is kinda strange.

Built files

I downloaded the artifact zip file to investigate, and found index.html file has texts on about.md. This is completely unexpected.

The .zip file size is also a problem. The deployed artifact file size - which contains full built gatsby website - is only 6.73 MB while the local built folder is 10.4 MB. Although mine is not zipped into one file but it's pretty odd.

Suspectively long gatsby build log on my local computer

Finally I found a suspicious behavior on my local build.

This is the log shown by gatsby build --verbose --log-pages on my local machine:

https://gist.github.com/AoSankaku/708b132bd2247f2be73f9494efb1dbd4 (Too long to paste here)

This build log apparently repeating its output more than 10 times.

So maybe this is a bug on my computer to build a proper result on gatsby build, but I have no further clue to solve this.

And I attach the log on GitHub actions here (full log produced by the above workflow file):

https://gist.github.com/AoSankaku/7d65e7ab686cef69aca5870a0c6cf933 (This is also too long to paste here)

Can someone please help me to restore my website, and tell what the hell is going on?

Note

I know that I can manually restore the website on GitHub pages by pushing the latest docs directory created by renaming public, but I'd like to get rid of this tiring process.

And my browser Vivaldi detected the secondly downloaded zip artifact file as a virus. I have no idea why Vivaldi detected this as a virus.

• Reading the output log to found nothing
• Investigating index.tsx to found nothing suspicious
• Removing --frozen-lockfile from yarn install on release.yml to produce the same result
• Reading the original repository gatsby-starter-apple to found nothing

I expect the whole gatsby website to be built in the same way as my computer does and deployed perfectly.

Currently except the home page isn't affected, however, I'd like to see what is causing this issue.

Below is the 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

Answer 1

This problem seems to be solved by changing the build OS to windows-latest.

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

to

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

I'll create an issue on Gatsby official repository to notify this issue.