From WordPress To Gatsby

Hello const dimitri = new Person(); ● Dimitri ‘g00glen00b’ Mestdagh ● Full-stack developer at Optis ● Works with Java and JavaScript ● Loves to try out new frameworks ● Blogs often about cool technologies ● https://dimitr.im

How do we usually write blog posts?

Traditional blogging ● Using a Content Management System ● Server-Side Rendering ● Content is coupled ● Easy usage ● Rich ecosystem of plugins, themes, ...

However.... ● 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

Meet Gatsby “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? CMS Markdown Other APIs and files GraphQL API HTML + CSS + React Gatsby Datasources static-page 2.html static-page 1.html

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 define for your data. GraphQL isn't tied to any specific 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!

Benefits ● Opinionated framework ● Static, and thus blazing fast ● Hydrates back to a full React app ● Headless CMS ● Rich ecosystem of plugins ● React

Concerns ● 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

Resources Slides https://speakerdeck.com/g00glen00b

Resources Code https://github.com/g00glen00b/gatsby-blog

Resources Tutorials https://dimitr.im/tag/gatsby

Resources Introduction blog post: http://bit.ly/OptisGatsby

Thank you!