Gatsby JS 3.0

and Static Site Generators

JaxNode April 2021

Publishing Websites

  • HTML/CSS/JS
  • CMSs
  • Web Applications with app server
  • Site Generators

Pros and Cons of HTML Sites

  • Pro: Don't need a server to render
  • Pro: Simple hosting
  • Pro: Fine control over HTML/CSS/JavaScript 
  • Con: Cumbersome to reuse layout for each page
  • Con: No easy way to minify/uglify content

Content Management Systems

  • Prebuilt Web Application for publishing website
  • Many hosted services
  • Don't need to be a Web Developer to publish a Website

Open Source CMS Software

  • WordPress
  • Drupal
  • Joomla
  • Contentful

CMS Pros and Cons

  • Pro: Can use pre-existing themes
  • Pro: Content Can be created by non-web developers
  • Pro: Can set up permissions for certain content
  • Con: Sometimes inflexible
  • Con: Generally requires backing database
  • Con: Requires app server or servers
  • Con: Slashdot effect

Web Application

  • Host custom Web Application
  • Express or Hapi Framework
  • Use platform of your choice
  • Requires a live application server
  • Higher costs associated with hosting

Static Site Generators

  • Site Templates and Themes
  • Very popular with Ruby and Node.js developers
  • Site deployed as a static site with HTML/CSS/JS
  • Build process compiles HTML
  • Deploy to AWS S3, github pages or Netlify
  • Gatsby Cloud

Current SSGs

  • Jekyll (Ruby)
  • Octopress (Ruby)
  • Middlemen (Ruby)
  • Metalsmith (Node.js)
  • Hugo (Node.js)
  • Nuxt.js (Node.js)
  • Gatsby JS (Node.js/React)
  • Vuepress (Node.js/Vue)

Pros and Cons of SSGs

  • Pro: Hosted cheaply or for free
  • Pro: Static Sites are easier to deploy
  • Pro: No database required
  • Pro: Create content in HTML or Markdown
  • Pro: Publish with existing CMS
  • Pro: Less susceptible to Slashdot effect
  • Pro: Use git as source of truth 
  • Con: Harder to do server interactivity

Jekyll

  • Jekyll still very popular
  • Based on Ruby
  • Very Simple
  • Build pages in HTML or Markdown
  • Liquid template engine
  • Built into Github pages

Gatsby JS

  • Build using React
  • Created by Kyle Mathews
  • Serverless
  • Very extensible through plugins
  • Offline Access
  • Build Pages using React or Markdown w/ plugin
  • MDX: Incorporate components in your markdown
  • Progressive Image Loading

React the Framework

  • SPA Framework
  • Next.js SSR
  • React Native Mobile Apps
  • Gatsby JS

Getting Started

  • Need both Node and Git 
  • npm install -g gatsby-cli
  • gatsby new [site-name] 
  • gatsby new [site-name] [template-name]
  • gatsby develop
  • gatsby build
  • gatsby serve

Gatsby Structure

public

src

--pages

gatsby-config.js

gatsby-node.js

gatsby-browser.js

package.json

Hello-World!

// src/pages/index.js

import React from "react"

export default () => <div>Hello world!</div>

No Router

  • No need for router because using pages
  • import the <Link /> object from Gatsby lib
  • <Link to="/contact/">Contact</Link>

<Link />

// src/pages/index.js
import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"

export default () => (
  <div style={{ color: `purple` }}>
    <Link to="/contact/">Contact</Link> 
    <Header headerText="Hello Gatsby!" />
    <p>What a world.</p>
    <img src="https://source.unsplash.com/random/400x200" alt="" />
  </div>
)

Style options

  • Regular CSS
  • CSS Modules
  • CSS in JS
  • Styled Components
  • SASS Plugin

Gatsby Data

  • GraphQL Server builtin
  • Source plugins for file system, CSVs, Word Press, etc..
  • Query Data directly from pages
  • Components can query data from <StaticQuery/>

GraphQL Example

// src/pages/index.js
import React from 'react'
import { graphql } from 'gatsby'

const HomePage = ({data}) => {
  return (
    <div>
    {data.site.siteMetadata.description}
    </div>
  )
}

export const query = graphql`
  query HomePageQuery {
    site {
      siteMetadata {
        description
      }
    }
  }
`

export default HomePage
query {
   markdownRemark(id: { eq: "e16204e2-d882-50dd-a24d-316d166251e0" }) {
      excerpt
      frontmatter {
        title
        date
        category
      }
   }
}
  
query($id: String!) {
  markdownRemark(id: { eq: $id }) {
    excerpt
    frontmatter {
      title
      date
      category
    }
  }
}

With parameters

Plugins

  • Highly extendable
  • Two types of plugins
  • Source plugins
  • Transformer plugins
  • Can be installed using NPM
  • Configured using the gatsby-config.js file

# Markdown

  • Shorthand for HTML
  • Very popular with bloggers, writers and documentation
  • Invented by Jon Gruber
  • Github has a formatter
  • Used in combination with Frontmatter, all you need
---
title: "Pandas and Bananas"
date: "2017-08-21"
---

# This is a H1 tagged line

This will be in a p tag. Do Pandas eat bananas? Check out this short video that shows that yes! pandas do
seem to really enjoy bananas!

* This will create a bullet point in ul -> li.

This will be a link to [jaxnode.com](https://www.jaxnode.com).

<iframe width="560" 
    height="315" 
    src="https://www.youtube.com/embed/4SZl1r2O_bY" 
    frameborder="0" 
    allowfullscreen></iframe>

Hosting

  • Many inexpensive options
  • Anyone providing static hosting
  • Github pages, anything in the gh-pages branch or the master branch for username.github.io
  • Amazon S3
  • Netlify
  • Gatsby Hosting

Don't use FTP

GIT is FTP for Code

Scott Hanselman

Gatsby Wordpress

  • Best of both
  • Headless Wordpress
  • WP Plugins WPGraphQL and WPGatsby

Gatsby 3.0 Upgrade

  • npm install gastby@latest --save
  • npm outdated
  • 'navigateTo' is now just 'navigate'
  • import moduleStyle from 'module.css'
  • import * moduleStyle from 'module.css'
  • gatsby-node.js does not include graphQL 
  • const graphql = require('gatsby').graphql;
  • Requires minimum vs 12.13 of Node

Gatsby-plugin-image

  • import { GatsbyImage } from "gatsby-plugin-image"
  • Changes graphQL for images
  • data.file.childImageSharp.gatsbyImageData
  • New StaticImage and GatsbyImage components
  • Defaults to correct aspect ratio
  • fluid images no longe exist
  • WebP supported with <picture> tag
//shell
> npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp
// gatsby-node.js
module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

Codemods

  • Codemodes automatically refactor your code
  • Only try this in a new branch
  • npx gatsby-codemods gatsby-plugin-image

DEMO

Questions?

Resources

  • gatsbyjs.org
  • gatsbyjs.com
  • Learn with Jason (Jason Lengstorf) Youtube channel
  • youtube.com/channel/UCnty0z0pNRDgnuoirYXnC5A
  • Gatsby JS Channel
  • youtube.com/channel/UCjnp770qk7ujOq8Q9wiC82w
Made with Slides.com