Building Static Sites in Reactfiles.meetup.com/8990802/GatsbyJS -- Lightning Talk.pdf · CSS for Styles WYSIWYG Cons Limited Templating Tightly-coupled Content & Design Dynamic Sites

Building Static Sites in React

An introduction to GatsbyJS

What do these have in common?

nest.com

Connected Home Appliances

simple.com

Consumer Banking

mailchimp.com

Automated Email Delivery Code Consulting

thoughtbot.com

SIMPLE

Static Site Generators

Google Trends for “static website generator”

Overview

- What are static sites?

- Why use them?

- When to choose them?

- How to build them?

- Demo...

Static Site Generator Activity in the last year

Design Comparison

Static Sites (90’s)

Pros● HTML for Structure● CSS for Styles● WYSIWYG

Cons● Limited Templating● Tightly-coupled

Content & Design

Design Comparison

Static Sites (90’s)

Pros● HTML for Structure● CSS for Styles● WYSIWYG

Cons● Limited Templating● Tightly-coupled

Content & Design

Dynamic Sites (2000’s)

Pros● Populate pages with

database content● Isolate content from

design

Cons● Complex to build● Computationally

heavy

Design Comparison

Static Sites (90’s)

Pros● HTML for Structure● CSS for Styles● WYSIWYG

Cons● Limited Templating● Tightly-coupled

Content & Design

Dynamic Sites (2000’s)

Pros● Populate pages with

database content● Isolate content from

design

Cons● Complex to build● Computationally

heavy

Static Sites (2015)

Pros● Templating● Markdown Support● Embed MetaData● Asset Pipeline● Fast Page Loads● CDN Support

Cons● Non-Dynamic Content

Why use them?

● Faster Page Loads● Quickly add new

content via Markdown● Reusable Templates &

Components● More control over the

alternative (CMS*)

*Content Management System - Wordpress, Drupal, Joomla

When to use them?

● Personal Blogs● Documentation Sites● Company Landing Pages● Event & Project Sites

GatsbyJSReactJS Static Site Generator

Why Gatsby?

● Webpack● Hot Reloading● React Router● Babel● Markdown-to-JS● Serve & Build Commands

How it works

Step 1

Setup & Installation

npm install -g gatsbygatsby new cd ● Installs Packages● Initializes Git

Step 2 Step 3

How it works

Step 1

Setup & Installation

npm install -g gatsbygatsby new cd ● Installs Packages● Initializes Git

Step 2

Design in Dev Mode

gatsby serve

● Webpack● Hot Reloading● Write in Markdown● Use React Components

Step 3

How it works

Step 1

Setup & Installation

npm install -g gatsbygatsby new cd ● Installs Packages● Initializes Git

Step 2

Design in Dev Mode

gatsby serve

● Webpack● Hot Reloading● Write in Markdown● Use React Components

Step 3

Build Static Pages

gatsby build

● Wraps Markdown in react components

● Compiles to a static build folder

How it works

Step 1

Setup & Installation

npm install -g gatsbygatsby new cd ● Installs Packages● Initializes Git

Step 2

Design in Dev Mode

gatsby serve

● Webpack● Hot Reloading● Write in Markdown● Use React Components

Step 3

Build Static Pages

gatsby build

● Wraps Markdown in react components

● Compiles to a static build folder

Deploy to CDN*

- Upload contents of /public to CDN

Demo Time!

What’s Next?

Automated DeploymentDeploy directly to CDN’s like AWS,

Github Pages, and Firebase

Webpack & React TransformCode-Splitting and Async Chunk

Loading & Improved Hot-Reloading

BrowserSync SupportSimultaneous cross-browser

development for responsive designs

Yeoman GeneratorQuickly scaffold templated

pages & components

Thank You!

Sources

Static Genhttps://www.staticgen.com/

Trend Informationhttp://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/

GastbyJShttps://github.com/gatsbyjs/gatsby

React Static Boilerplatehttps://github.com/koistya/react-static-boilerplate

Gatsby-Sitehttp://github.com/dannyphillips/gatsby-site/

Danny PhillipsWeb Manager

Email: [email protected]: www.dannyphillips.me

dannyphillips dphil4life