Salesforce, Python, SQL, & other ways to put your data where you need it

Need event music? 🎸

Live and recorded jazz, pop, and meditative music for your virtual conference / Zoom wedding / yoga class / private party with quality sound and a smooth technical experience

Gatsby Minimum Viable Build

09 Jun 2020 🔖 architecture tips git jamstack web development minimum viable build
💬 EN

Post Header Image

Table of Contents

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.

Process

  1. Get a Netlify.com free account
  2. 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.
  3. To do: Profit

Files

/src/pages/index.js

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

(“Any React component defined in src/pages/*.js will automatically become a page.“)

import React from "react"

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

/package.json

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"
	}
}

Output

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.

Posts In This Series

--- ---