From WordPress to Gatsby

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

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
14
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
13
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
1
32
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
1
64
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
35
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
3
230
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
28
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
30

Other Decks in Programming

See All in Programming
64e95d2d8051ee58501f21987f46b9e7?s=48 chck
0
340
De266761b955b2636e454a1bc7a99ed4?s=48 masayaaoyama
5
570
9bf923e39671cde83584e3e926296c13?s=48 kishikawakatsumi
6
320
B84123138372542a55401c92b170b528?s=48 hassaku63
4
1.9k
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
1
200
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
1
140
0ea7f61aec8fee539be0cf39b7bab77c?s=48 eregon
0
640
A760a90c9afd981004343b9861f1e8b4?s=48 daipresents
1
180
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
2
360
0a5d28eceda9a14b5b5f697b36620e8f?s=48 pddg
0
160
Dcc589548f0372645aaeb95bda8e22c2?s=48 cpp
39
17k
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
1
190

Featured

See All Featured
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
78
3.1k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
281
46k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
293
39k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
3.9k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
26
870
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
356
62k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
230
770k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
91
2.8k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
265
16k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
10
3.8k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
360k
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
10
1.2k

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!