Posted on Jun 9, 2020 • Originally published at katiekodes.com on Jun 9, 2020

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>