Gatsby.JS at a glance

by Avery Duffin

https://www.developerswholunch.com/talks

What is

Benefits

preconfigured
incredibly fast page loads
service workers
code splitting
server-side rendering
intelligent image loading
asset optimization
data prefetching
JAMstack

Easy Quickstart

npm install -g gatsby-cli

Create a new site

gatsby new gatsby-site

Change to the site folder

cd gatsby-site

Start dev server

gatsby develop

Site page

Graph QL query tool

http://localhost:8000/___graphql

DEMO

DATA

Do you have to use GraphQL for data?

No, if you don't you use the createPages api, inside gatsby-node.js file

Hooks into a point in the Gastby bootstrap sequence

When should you use unstructured data vs graphql?

If you’re building a small site it can be more efficient to use unstructured data

install

npm install --save gatsby-source-filesystem

Add plugin gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `blah`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    }
  ],
}

Netlify

Deploy free on netlify