From WordPress to Gatsby

Transcript

1. From WordPress To Gatsby

2. 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

3. How do we usually write blog posts?

4. Traditional blogging • Using a Content Management System • Server-Side

   Rendering • Content is coupled • Easy usage • Rich ecosystem of plugins, themes, ...

5. However.... • It requires additional resources • Even if content

   doesn’t change often • It’s a popular target for hackers

6. What could we do?

7. Meet the static site generator • Use a static site

   generator • Generate rendered HTML at build time • Serve static resources • Content is decoupled

8. 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/

9. 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

10. 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/

11. Why a static site generator?

12. Live coding time!

13. Benefits • Opinionated framework • Static, and thus blazing fast

    • Hydrates back to a full React app • Headless CMS • Rich ecosystem of plugins • React

14. 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

15. Resources Slides https://speakerdeck.com/g00glen00b

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

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

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

19. Thank you!