Building Static Sites in Reactfiles.meetup.com/8990802/GatsbyJS -- Lightning Talk.pdf · CSS for...
Transcript of Building Static Sites in Reactfiles.meetup.com/8990802/GatsbyJS -- Lightning Talk.pdf · CSS for...
-
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
http://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/http://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/http://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/http://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/https://github.com/gatsbyjs/gatsbyhttps://github.com/gatsbyjs/gatsbyhttps://github.com/koistya/react-static-boilerplatehttps://github.com/koistya/react-static-boilerplatemailto:[email protected]://www.dannyphillips.me