Upgrade to Pro — share decks privately, control downloads, hide ads and more …

From WordPress to Gatsby

Dimitri
September 18, 2019

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.

Dimitri

September 18, 2019
Tweet

More Decks by Dimitri

Other Decks in Programming

Transcript

  1. From WordPress
    To Gatsby

    View full-size 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 full-size slide

  3. How do we usually
    write blog posts?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. What could we do?

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  11. Why a static site generator?

    View full-size slide

  12. Live coding time!

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide