Gatsby 构建 html 内容为空

Question

我有一个在 Gatsby@2.2.10 中完成的网站。 当我运行gatsby build并检查生成的 html 时，对于每个页面，我看到的只是一个空的 div： <div id="___gatsby"></div 。 html 包含样式表、javascript 文件和运行应用程序所需的一切（顺便说一下）。

即使我curl生产网址，也会出现相同的 div 并且完全为空。 我也尝试禁用 javascript，但得到的只是一个空白页面。 我的配置不包含任何花哨的内容：

module.exports = {
    siteMetadata: {
        title      : `MyApp`,
        description: ``,
        author     : ``,
    },
    plugins     : [
        `gatsby-plugin-react-helmet`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/static/images`,
            },
        },
        {
            resolve: `gatsby-plugin-less`,
            options: {
                javascriptEnabled: true,
            },
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sass`,
        `gatsby-plugin-sharp`,
        `gatsby-plugin-typescript`,
        `gatsby-plugin-styled-components`,
        {
            resolve: `gatsby-plugin-google-fonts`,
            options: {
                fonts: [
                    `Montserrat\:200,400,600,800`,
                ],
            },
        },
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name            : `MyApp.com`,
                short_name      : `MyApp`,
                start_url       : `/`,
                background_color: `#4DECDB`,
                theme_color     : `#2F57E4`,
                display         : `minimal-ui`,
                icon            : `src/static/images/logo.png`,
            },
        },
        `gatsby-plugin-offline`,
        {
            resolve: `gatsby-plugin-google-analytics`,
            options: {
                // replace "UA-XXXXXXXXX-X" with your own Tracking ID
                trackingId: 'UA-111111111-16',
            },
        },
        //  last
        'gatsby-plugin-netlify',
    ],
}

我的gatbsy-node文件是空的， gatsby-browser只加载一个样式表和一个 redux 存储：

import wrapWithProvider from './wrap-wit-provider'

import './src/components/layout/styles.less'

export const wrapRootElement = wrapWithProvider

任何想法我应该寻找什么？ 我不会那么担心，除非 Netlify 由于不存在的 html 代码而无法检测我的表单并处理它们。

Answer 1

简短的回答 。 使用gatsby build和gatsby serve查看生成的内容。

---

盖茨比是一个静态发电机。 这意味着它正在生成不需要任何后端的webapp。

所有页面都在构建期间生成。 它可以帮助应用程序快速发展。

据Gatsbyjs.org说：

Gatsby.js将您的站点构建为“静态”文件，可以在几十种服务上轻松部署。

BTW部署应用程序的选项之一可能是Azure Blob存储上的静态网站。 它可以为您提供开箱即用的CDN。 它非常便宜和快速。

Gatsby CLI是一个用于开发，构建和运行Gatsby应用程序的命令行工具。

https://www.gatsbyjs.org/docs/gatsby-cli/

文档说了3个基本命令：

1. gatsby develop启动了开发服务器。 它在开发期间很有用。
2. gatsby build生成可以部署的静态输出。 生成一个空网站需要一分多钟。 这就是为什么gatsby develop对开发非常有用的原因。
3. gatsby serve提供生成的静态输出。

因此，要检查静态输出，您应该运行gatsby serve （在gatsby build ）而不是gatsby develop 。

gatsby develop

在13秒内 编译并在246毫秒内应用热更新。

gatsby build

编译 74秒。

Answer 2

在无法访问代码的情况下很难说出任何确定的内容，但是如果生成的 HTML 文件为空但站点可以运行，那么您的页面在服务器端呈现时返回null或undefined而不是组件，但返回正确的组件客户端。

Redux for Gatsby 示例和Edward Beazer 博客等教程会告诉您添加与gatsby-browser.js内容相同的gatsby-ssr.js 。 可能是您有一个gatsby-ssr.js并且它定义了一个返回null的wrapRootElement函数？

如果你这样做，这将导致你描述的行为，因为它只在服务器端运行，并且会用空页面替换每个页面。

Answer 3

我在这里搜索 gatsby 构建的“空白页”，我的问题是一个愚蠢的问题，希望它可以帮助某人。

如果public文件夹被修改，或者文件被移动，gatsby 将失败。 只是删除整个文件夹并重建工作正常。