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

From WordPress to Gatsby

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

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
32
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
41
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
1
53
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
1
78
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
46
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
3
240
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
34
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
37

Other Decks in Programming

See All in Programming
994abc15f0cfc4010e8125dba1bcfae7?s=48 chige
0
110
E66449b8260b07a1cf51c5ab5eaa8180?s=48 dunglas
1
3.2k
A3ff2968d61f14629ba14459d3abfd37?s=48 okimotoren
1
290
D497c45a1fb82c383c62ef994a7c0fdc?s=48 shunshobon
0
340
67962a042668ffac9323b8e0c55eee6e?s=48 keisuke69
0
1.7k
C598a4646a587f7a93fa088d6fd3ada4?s=48 unk2072
3
2.9k
C5b4d57a23b991d41ac0a89926ab4f8a?s=48 ryu22e
1
170
5d769d109697012317c09c6a27a6a4bf?s=48 linyows
1
110
25fb3e7054e52e524817044853c2d4c3?s=48 taisukeoe
0
230
F5c2731f9a4dbfb4af319295a1f0cd28?s=48 dmitrytsepelev
0
210
45477cf77ae1a156e65fbc860078bf59?s=48 xu3u4
0
200
444706893bf3e53d6d96b4509d2d05d5?s=48 tanden
2
1.7k

Featured

See All Featured
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
333
29k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
253
19k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
17k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
262
11k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
14
800
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
3
640
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
360
63k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
409
58k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
10
550
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
340
16k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
657
54k

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!