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
73

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
22
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
32
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
1
45
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
1
73
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
41
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
3
230
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
31
804116bef2aa0a22789514d3b7a8f520?s=48 g00glen00b
0
33

Other Decks in Programming

See All in Programming
16040fb086040d7a04dd40478786a4ce?s=48 mizotake
2
330
06cd0c34899f8d878d44074d52ccd4e6?s=48 selcukusta
2
110
2bb4e388d19b8cf62410775f662b15cc?s=48 kyokomitsuoka
0
110
6c366ab6293eb42aec0e6f5f69b50882?s=48 ryokbt
2
310
0b8ad408b31cb9d5cff2828086c65d58?s=48 temoki
3
230
7867fe52a9be4257508a516d4df61578?s=48 tkmnzm
0
140
73257f1de15fc7102c1f1a1eadd9dcb8?s=48 hanasuke
1
680
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
0
150
5afbf65e9e32cef9ab74e5b5347a5bce?s=48 korosuke613
2
270
Bbb17eeeecd3d9d06f4db310ab630a12?s=48 borkdude
2
220
E867c26fd05aed731384496b1facffe2?s=48 kanga333
0
110
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
0
130

Featured

See All Featured
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
683
180k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
206
6.9k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.8k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
72
1.4k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
18k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
332
29k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
392
61k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
63
3.7k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
9.4k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
285
19k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
283
47k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k

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!