Gatsby.js - how is it different from other static site generators

@bobylito Gatsby.js A Paris.js talk by Alex / @bobylito

@bobylito Hi, I’m Alex Software engineer Independent contractor @bobylito /
[email protected] Loves JS

@bobylito I’m a static website generator addict

@bobylito Two questions How is gatsby different from other generators?
Is gatsby for you / your next project?

@bobylito What is a static website generator?

@bobylito A tool that transforms markup in HTML

@bobylito With the help of templates

@bobylito They come in different size and shapes

@bobylito And they share common properties • Pipelines • Content
is the main concern • Templating come second • Content comes from files

@bobylito Gatsby.js

@bobylito Templates

@bobylito Template first! ▾ src/ ▸ components/ ▸ images/ ▾
pages/ 404.js index.js page-2.js gatsby-browser.js gatsby-config.js gatsby-node.js gatsby-ssr.js LICENSE package-lock.json package.json README.md yarn.lock React components

@bobylito Templates are using React

@bobylito Templates are also usable in the front-end • No
more duplication of templates • Same mindset at runtime and at build time

@bobylito Content

@bobylito Source plugins

@bobylito Content plugins - GraphQL MDX example

@bobylito Source agnostic Files Databases Headless CMS

@bobylito Assets are content

@bobylito Plugins can optimize assets - image example PNG full
resolution Megabytes JPEG with just enough quality to look great Kilobytes

@bobylito Plugins can optimize assets - image example Full resolution
Too much for mobile or Too small for desktop Different sizes for each screen Perfect everywhere

@bobylito Generating pages

@bobylito Create pages API - Two parts • Extension point:
createPages • Function: createPage

@bobylito Create pages API - example

@bobylito Bringing everything together

@bobylito Flip the model - get new API powers

@bobylito Is Gatsby right for your next project?

@bobylito Why not choose Gatsby.js? • Choices / ecosystem •
Magic • You have mastered something else

@bobylito Bad reasons to choose Gatsby.js or not? • X
Y Z are using it • Tech: React, GraphQL

@bobylito Why choose Gatsby.js? • Best practices built-in • You’re
building a web app • Well documented • Community

@bobylito Thanks! Find me on twitter @bobylito Looking for a
JS freelancer: [email protected]

@bobylito Links and resources • My talk about JSDoc in
static website generators • Playlist Detective, a project I built with Gatsby and Algolia • Create pages API • Gatsby image plugin • Gatsby plugin repository

Gatsby.js - how is it different from other stat...

Gatsby.js - how is it different from other static site generators

Transcript

More Decks by Alexandre Valsamou-Stanislawski

Other Decks in Programming

Featured