Gatsby site fails on the Netlify build step, possibly due to a large amount of images

I’ve recently started having some issues with deploying changes on my Gatsby site. I’ve just crossed the 1000 mark of the number of images stored on my blog so I’m assuming that may be part of the problem. I do a small amount of compressing before I store my images in my repo, so each image is generally in the 1 - 4 MB range.

I recently did a little bit of an UI overhaul to my site, which I’m not sure if that somehow also contributed to the problem.

Netlify site name: https://master--emgoto.netlify.app/

Some examples of build failures

  • Build failure after only 4min:
    Netlify

With a cryptic “Build failed due to a user error: Build script returned non-zero exit code: 2”. I kept getting this multiple times, did not know how to fix it.

  • I also got a build failure due to timeout after 18m:
    Netlify

  • I managed to get one recent build to pass in 11min:
    Netlify

Interestingly, this one had 8 warning logs like this:

1:26:12 PM: warning This query took more than 15s to run — which might indicate you're querying too much or have some unoptimized code:
File path: /opt/build/repo/src/blog-hiking/templates/blog-post.js?__contentFilePath=/opt/build/repo/hiking/mt-meakan/index.mdx
1:26:12 PM: URL path: /mt-meakan/

I didn’t notice these warning logs locally, only on my Netlify build.

I’m assuming that this is related to why my build gets timeouts and/or gets killed, but I’m wondering how do I debug this further? Is there anything I can do locally? I got this across multiple pages. The one thing they have in common is that they all have images.

I did make some changes to my createPages call in gatsby-node.js since that was taking up to 15s (it is now down to under 1s) but that hasn’t solved the issue.

My blog posts are rendering in MDX, so the images are rendered on the site just via me doing ![](image-name.png) and then Gatsby does its magic after that.

If it helps, e.g. for the templates/blog-post.js file that was mentioned in the warning file above, it looks something like this (cut out some lines for brevity’s sake) - it doesn’t really stand out as me doing anything out of the ordinary?

import React from 'react';
import { graphql } from 'gatsby';
import Content from '../ui/content';
export { Head } from '../ui/seo';

const BlogPost = ({
    data: {
        mdx: {
            frontmatter: {
                title,
                // etc.
            },
        },
    },
    children,
}) => {
    // Content is a component that just renders stuff like headers
   // based on the frontmatter that's passed in, plus the post content itself.
    return (
        <>
            <Content
                title={title}
                // passing in other frontmatter etc
            >
                {children}
            </Content>
        </>
    );
};

export const pageQuery = graphql`
    query ($slug: String!) {
        mdx(fields: { slug: { eq: $slug } }) {
            frontmatter {
                title
                date(formatString: "DD MMMM YYYY")
                // etc some other things
        }
    }
`;

export default BlogPost;

Actually as a follow-up question to this, is there some way I can just build the whole thing locally (I dont care how long it takes!) and then make Netlify always use that build or have it cached somewhere, so Netlify doesn’t have to worry about building anything itself and inevitably timing out? :thinking:

From further googling I’m seeing references to things like cache-me-outside - npm (although I don’t quite know how to use it in my situation)

Would installing this plugin help at all? @netlify/plugin-gatsby - npm I already installed gatsby-adapter-netlify as well.

hiya :wave:t6: @emgoto thanks for reaching out and welcome to the Netlify community.

There are a couple of approaches you can consider to build your site locally and have Netlify use that build:

1.You can use the Netlify CLI to build your site locally and then deploy the built files. It should look something like this:

netlify build
netlify deploy --prod

This will run the build locally and then deploy the resulting files to Netlify check out docs page on getting started with the CLI.

  1. If you prefer to build your site completely independently of Netlify’s tools, you can:
  • Build your site locally
  • Commit the built files to your repository
  • Configure Netlify to use these pre-built files instead of running a buildTo do this, you would need to change your Netlify deploy settings to set the publish directory to where your built files are located, and set the build command to exit 0 or leave it blank. This tells Netlify to skip the build process and just use the files you’ve provided.

Installing the @netlify/plugin-gatsby can make your builds on Netlify faster, especially if you’re using Gatsby versions before 5.12.0.

If you’re using Gatsby version 5.12.0 or later, it automatically handles some of this, so you don’t need the plugin.

You’ll also need another plugin, gatsby-plugin-netlify, for full functionality.