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

	//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`,
	],
	}

Gatsby JS 3.0