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
83

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
37
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
49
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
1
59
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
1
82
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
50
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
3
240
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
37
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
42

Other Decks in Programming

See All in Programming
5059d3f370ad7e1f4d8de4be79ae1a2c?s=48 rvirus0817
0
610
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
3
690
A65c56fbce87057b9ee064122601d7b5?s=48 nirazo
3
460
9225e855d5096915e696bda707e48220?s=48 yasuharu519
0
230
1281233ebab9f0f481c37d2122e864ea?s=48 tchmr
0
280
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
1
130
9bcd328daf60fe29dc9970f6cfc26730?s=48 kesin11
7
1.2k
Ff2c33d63aa8e06c90f4638c6266b4fb?s=48 sheharyar
1
380
0b8ad408b31cb9d5cff2828086c65d58?s=48 temoki
1
160
9242ec5423930ab9ab881ce07f4d4fcf?s=48 e99h2121
0
1.5k
Eac0bf787b5279aca5e699ece096956e?s=48 inamiy
7
300
9ebd4f7e6dfec9dbaa4fe161022cd496?s=48 n0mimono
0
230

Featured

See All Featured
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
17
2.1k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
292
110k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
51
3.3k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
92
4.1k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
122
16k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
335
29k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
77
270k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
6
920
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
67
4.4k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.7k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
122
8.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!