Gatsby Minimum Viable Build

Back in February I played with “minimum viable contents” that would make Netlify successfully build a web site + a Netlify CMS instance, auto-detecting that it should use the Jekyll static site builder.

I’m less familiar with the Gatsby static site builder, so today I’m doing a similar exercise, but just worrying about getting Netlify to detect that I’m using Gatsby and to display a Hello World.

This is inspired by all the cool-kid CMSes from Jamstack Conf using Gatsby and React.

Jamstack Conf takeaways and Hopin thoughts

Katie ・ Jun 8 '20

#jamstack #conferences #conference #remote

Process

Get a Netlify.com free account
Set up a Netlify.com site, connected to a GitHub private repository, that contains just 2 files:
- /src/pages/index.js
- /package.json
- TEST IT: Make sure you can visit https://yoursite.netlify.com/ as expected, without “page not found” errors.
To do: Profit

Files

`/src/pages/index.js`

This the file as found in the official Gatsby “hello world” project:

import React from "react"

export default function Home() {
  return <div>Hello world!</div>
}

`package.js`

This was created by comparing the minimum commonalities between the official Gatsby “hello world” project and the Stackbit “Azimuth” template:

{
    "name" : "netlify-gatsby-test-01",
    "description" : "Does this really work?",
    "version" : "0.0.1",
    "scripts" : {
        "develop": "gatsby develop",
        "start": "npm run develop",
        "build": "gatsby build",
        "serve": "gatsby serve"
    },
    "dependencies" : {
        "gatsby": "^2.22.15",
        "react": "^16.12.0",
        "react-dom": "^16.12.0"
    }
}

The resulting page has the following HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charSet="utf-8"/>
        <meta http-equiv="x-ua-compatible" content="ie=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
        <meta name="generator" content="Gatsby 2.23.3"/>
        <link as="script" rel="preload" href="/component---src-pages-index-js-82d7e1e34f9c33135c78.js"/>
        <link as="script" rel="preload" href="/bee240a3-eeef3aec7304058ce52c.js"/>
        <link as="script" rel="preload" href="/app-9f4c2e410b54a851bc51.js"/>
        <link as="script" rel="preload" href="/framework-9c06f05251e4fa86d347.js"/>
        <link as="script" rel="preload" href="/webpack-runtime-0998e712443b25c92faf.js"/>
        <link as="fetch" rel="preload" href="/page-data/index/page-data.json" crossorigin="anonymous"/>
        <link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/>
    </head>
    <body>
        <div id="___gatsby">
            <div id="modal-root"></div>
            <div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper">
                <div>Hello world!</div>
            </div>
            <div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div>
        </div>
        <script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";/*]]>*/</script>
        <script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-9f4c2e410b54a851bc51.js"],"component---src-pages-index-js":["/component---src-pages-index-js-82d7e1e34f9c33135c78.js"]};/*]]>*/</script>
        <script src="/webpack-runtime-0998e712443b25c92faf.js" async=""></script>
        <script src="/framework-9c06f05251e4fa86d347.js" async=""></script>
        <script src="/app-9f4c2e410b54a851bc51.js" async=""></script>
        <script src="/bee240a3-eeef3aec7304058ce52c.js" async=""></script>
        <script src="/component---src-pages-index-js-82d7e1e34f9c33135c78.js" async=""></script>
    </body>
</html>

Of course, now I have to learn how on earth you actually build a Gatsby site nicely.

But at least go-live wasn’t too bad.

Blog