Gatsby Minimum Viable Build
Tags: webdev, gatsby, netlify, tutorial
Published: 2020-06-09 20:30:38

---
title: Gatsby Minimum Viable Build
published: true
date: 2020-06-09 15:00:00 UTC
tags: webdev,gatsby,netlify,tutorial
series: Playing With Gatsby
canonical_url: https://katiekodes.com/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.

{% link https://dev.to/katiekodes/jamstack-conf-takeaways-and-hopin-thoughts-54h3 %}

## Process

1. Get a [Netlify.com](https://www.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](https://github.com/gatsbyjs/gatsby-starter-hello-world):

```javascript
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](https://github.com/stackbithq/stackbit-theme-azimuth):

```json
{
	"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:

```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.