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
- 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.
Top comments (0)