With Gatsby, we can easily import our existing data, such as Markdown or Wordpress, and make them into a blazing fast static website using the powers of GraphQL and React. In this talk I’ll turn my own WordPress blog into a Gatsby blog.
const dimitri = new Person();
● Dimitri ‘g00glen00b’ Mestdagh
● Full-stack developer at Optis
● Loves to try out new frameworks
● Blogs often about cool technologies
How do we usually
write blog posts?
● Using a Content Management System
● Server-Side Rendering
● Content is coupled
● Easy usage
● Rich ecosystem of plugins, themes, ...
● It requires additional resources
● Even if content doesn’t change often
● It’s a popular target for hackers
What could we do?
Meet the static site generator
● Use a static site generator
● Generate rendered HTML at build time
● Serve static resources
● Content is decoupled
“Gatsby is a free and open source framework
based on React that helps developers build
blazing fast websites and apps”
— Taken from https://www.gatsbyjs.org/
How does it work?
Other APIs and ﬁles
HTML + CSS + React
What is GraphQL?
“GraphQL is a query language for your API, and a server-side
runtime for executing queries by using a type system you
deﬁne for your data. GraphQL isn't tied to any speciﬁc
database or storage engine and is instead backed by your
existing code and data.”
— Taken from https://graphql.org/learn/
Why a static site generator?
Live coding time!
● Opinionated framework
● Static, and thus blazing fast
● Hydrates back to a full React app
● Headless CMS
● Rich ecosystem of plugins
● Things working with Markdown don’t necessarily work with other sources
● Results can vary between gatsby develop and gatsby build
● New content requires complete rebuild
Introduction blog post: http://bit.ly/OptisGatsby