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

From WordPress to Gatsby

Avatar for Dimitri 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.

Avatar for Dimitri

Dimitri

September 18, 2019
Tweet

More Decks by Dimitri

Other Decks in Programming

Transcript

  1. 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. Traditional blogging • Using a Content Management System • Server-Side

    Rendering • Content is coupled • Easy usage • Rich ecosystem of plugins, themes, ...
  3. However.... • It requires additional resources • Even if content

    doesn’t change often • It’s a popular target for hackers
  4. Meet the static site generator • Use a static site

    generator • Generate rendered HTML at build time • Serve static resources • Content is decoupled
  5. 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. 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. 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. Benefits • Opinionated framework • Static, and thus blazing fast

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