Pro Yearly is on sale from $80 to $50! »

From WordPress to Gatsby

804116bef2aa0a22789514d3b7a8f520?s=47 Dimitri
September 18, 2019
Programming
3
70

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

More Decks by Dimitri

See All by Dimitri
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
17
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
26
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
1
37
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
1
66
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
38
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
3
230
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
28
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
32

Other Decks in Programming

See All in Programming
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
190
2ddd3d3e0d92ad45884bdcbef3a514a8?s=48 chiaoteni
2
340
26afa82334d1037f0ba602272b950c90?s=48 kazuhitotakahashi
0
250
21a4b941766d805333e11c5766be43b4?s=48 takahashim
0
1.1k
Acd2f6f7498ea41881e161e191aa7c02?s=48 yattom
3
450
Cc8ec9594b83b5dc3c7eef345c05dc8d?s=48 shiz
4
200
354e3e2cfb772abdf62bd92c92f89547?s=48 tarunpothulapati
0
130
Dee939e8aa52d13793b2f0c5e463777b?s=48 julep
1
220
67962a042668ffac9323b8e0c55eee6e?s=48 keisuke69
6
3.1k
F52f4adb291c5b44bd8ad1433dfedaaf?s=48 ytyubox
1
470
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
1
130
D02d96057c4cd905d60d14549b00db0d?s=48 stvansolano
0
250

Featured

See All Featured
11c84dff30266b907714802088852677?s=48 jasonvnalue
82
8k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
92
13k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
7.5k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
295
27k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
590
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
86
3.9k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
107
11k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
282
46k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
408
57k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
113
25k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
101
5.8k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
401
20k

Transcript

  1. From WordPress To Gatsby

  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. How do we usually write blog posts?

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

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

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

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

  6. What could we do?

  7. Meet the static site generator • Use a static site

    generator • Generate rendered HTML at build time • Serve static resources • Content is decoupled

  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. 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. 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. Why a static site generator?

  12. Live coding time!

  13. Benefits • Opinionated framework • Static, and thus blazing fast

    • Hydrates back to a full React app • Headless CMS • Rich ecosystem of plugins • React

  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. Resources Slides https://speakerdeck.com/g00glen00b

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

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

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

  19. Thank you!