Presentation on Gatsby, a React.js Static Site Generator

1. Gatsby: A React.js
Static Site Generator
Kyle Mathews

2. @kylemathews
Co-founder RelateRocket
(Enterprise SaaS, data science,
GraphQL, Relay, React.js, React Native)
Hiring 1st engineer soon!

3. My website development tools
history… or how Gatsby came
to be

4. 2006 — Drupal
2011 — Backbone
2014 — Static sites +
React.js/Webpack/React-
Router/Hot-Loader

5. Love stack for building web
apps but what about web
sites…? Want React.js +
ecosystem + simplicity of
static sites.

6. Spark of inspiration — auto-
generate React.js web app
from static
Markdown files?

7. Obsessed over idea for several
months until I took a week off
startup work and built v0.1 of
Gatsby

8. Shockingly it worked…

9. Was able to glue together
Webpack, React.js, React-
Router, and React-Hot-Loader

10. gatsby(markdown) => SPA

13. 8 months old but quite a few
sites are built on it already

19. Here I make a case for why
Gatsby is best choice in 2016
for building static websites

20. Gatsby has native support for
Best Parts of 2016 Web Dev
ecosystem
Postcss, Webpack, Components, React.js,
NPM, etc.

21. Comparing static site
generators with Gatsby
* Markdown — same
* HTML/Templates — same-ish
* CSS — more or less same, most support
Sass/Less/Postcss, etc.
* Javascript — many… awkward jQuery
enhancement level, Gatsby very easy
* Components — Gatsby pretty unique here w/
1st class support

22. Gatsby Developer experience
* Batteries included
* Boilerplate + Gatsby “apps” (tentative
names)
* Hot reloading
* Feel very natural to React dev
* Entire React ecosystem available to static
sites (npm install my-favorite-component)

23. Gatsby User experience
* Fast!
* No-reload page transitions
* Easy service worker support for client
caching + offline

24. DEMO

25. The future
* Revamp data transformation
* New Plugin API
* Support Gatsby “apps”

26. extends: {
require(‘gatsby-documention-app’),
},
plugins: [
require(‘gatsby-plugin-markdown’),
require(‘gatsby-plugin-postcss’)({
modules: true,
}),
],
// Implement Gatsby APIs
postBuild: (pages) => {
// Do something after site is built.
}