From WordPress to Gatsby

804116bef2aa0a22789514d3b7a8f520?s=47 Dimitri
September 18, 2019
Programming
1
52

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

Want more?

804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
1
29
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
50
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
34
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
2
150
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
74
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
68
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
5
140
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
4
160
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
220
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
430
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
110
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
200

Transcript

  1. 1.

    From WordPress To Gatsby

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

    How do we usually write blog posts?

  4. 4.

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

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

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

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

    What could we do?

  7. 7.

    Meet the static site generator • Use a static site

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

    Why a static site generator?

  12. 12.

    Live coding time!

  13. 13.

    Benefits • Opinionated framework • Static, and thus blazing fast

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

    Resources Slides https://speakerdeck.com/g00glen00b

  16. 16.

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

  17. 17.

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

  18. 18.

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

  19. 19.

    Thank you!