From WordPress to Gatsby

804116bef2aa0a22789514d3b7a8f520?s=47 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.

804116bef2aa0a22789514d3b7a8f520?s=128

Dimitri

September 18, 2019
Tweet

Transcript

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

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

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

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

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

    Meet the static site generator • Use a static site

    generator • Generate rendered HTML at build time • Serve static resources • Content is decoupled
  5. 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/
  6. 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
  7. 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/
  8. 13.

    Benefits • Opinionated framework • Static, and thus blazing fast

    • Hydrates back to a full React app • Headless CMS • Rich ecosystem of plugins • React
  9. 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