From WordPress to Gatsby

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.

Transcript

1. From WordPress
   To Gatsby
   

   View Slide

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
   
   

   View Slide

3. How do we usually
   write blog posts?
   

   View Slide

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

   View Slide

5. However....
   ● It requires additional resources
   ● Even if content doesn’t change often
   ● It’s a popular target for hackers
   

   View Slide

6. What could we do?
   

   View Slide

7. Meet the static site generator
   ● Use a static site generator
   ● Generate rendered HTML at build time
   ● Serve static resources
   ● Content is decoupled
   

   View Slide

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/
   

   View Slide

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
   

   View Slide

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/
    

    View Slide

11. Why a static site generator?
    

    View Slide

12. Live coding time!
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. Thank you!
    

    View Slide