Run SSG in Netlify with webhook
• JAMstack DeploymentϓϥάΠϯͰهࣄߋ৽࣌ʹWebhook࣮ߦ
• Netlify͕GitHubʹ͋Διʔεʢmain branch)Λऔಘͯ͠Ϗϧυ
• git push origin main / PR merge࣌ʹϏϧυ͕࣮ߦ͞ΕΔ
• WP ThemeΛGitཧ͍ͯ͠Δ࣌ͱ͋·ΓมΘΒͳ͍
• ө·Ͱϥά͋ΔͷͰɺׂͦ͜ΓΔ
Slide 14
Slide 14 text
Run SSG in Netlify with webhook is better?
• هࣄߋ৽ͷʹϏϧυ͕ΔͷͰɺ࿈ଓߋ৽࣌ʹͪΐͬͱ͏͍͟
• NetlifyCircle CIͳͲϏϧυ࣌ؒʹ੍ݶ͕͋Δ
• ෆඞཁͳϏϧυ͕ଟ͍ͳΒɺWebhook࣮ߦΛखಈԽ͖͔͢
• ·ͨNetlify / Circle CI / AWS / GCPͳͲΛࡳଋͰԥΖ͏
Slide 15
Slide 15 text
Headless WordPress for personal blog
• WP͕ࣄނͬͯαΠτ͕མͪͳ͍ͷ͕Headless WP
• WP͔ΒϏϧυWebhookΛ࣮ߦ͢Δඞཁ͕͋Δ
• ݟͨͱதΛݸผ(Git / WP)ཧͰ͖ΔͷͰɺ߹͏ਓʹ߹͏
Slide 16
Slide 16 text
Agenda
• Why do I make my blog using Headless WP with Next.js
• How did I made it
• Why do we make a website using Headless WP
Slide 17
Slide 17 text
ͳͥNext.jsʁ
Slide 18
Slide 18 text
ࣾͰGatsby͔Γ
ʹͳ͔ͬͯͨΒ
Slide 19
Slide 19 text
Next.js or Gatsby (Similar to Nuxt.js or Gridsome)
• Gatsby(Gridsome)੩తαΠτੜ͕ϝΠϯ
• Next.js(Nuxt.js)ϑϧελοΫͰɺSSRAPI࡞Մೳ
• σʔλऔಘॲཧ / ϧʔςΟϯά / ϓϥάΠϯʹେ͖Ίͷ͕ࠩ͋Δ
• WPͩͱɺςʔϚ࡞_s͔SageͲ͔ͬͪͭ͏ʁʹ͍͔ۙ
Slide 20
Slide 20 text
Next.js Gatsby
Slide 21
Slide 21 text
WordPressαʔόʔʁ
Slide 22
Slide 22 text
WordPress for Headless WP
• ͍Ζ͍ΖׂΓͬͨӡ༻ʹͳΔ
• ύʔϚϦϯΫ / ϓϨϏϡʔ / ςʔϚػೳ์غ
• WP API / Block Editor / Build / ଟݴޠԽͷͨΊͷϓϥάΠϯબఆ
• ϑϧϚωʔδυϗεςΟϯάΛͬͯAPI as a Serviceʹ͠Α͏
Slide 23
Slide 23 text
How to make a Headless WordPress site
• WordPressʮཧը໘͖APIαʔόʔʯͩͱׂΓΔ
• React or VueɺGatsby(Gridsome) or Next.js(Nuxt.js)Έ
-> σʔλιʔε͕ෳͳΒGraphQL͕͑ΔGatsbyͷํ͕Α͍͔
• WP ThemeΛϑϧεΫϥονͰ࡞Δʹ͍ۙײ֮
• ޙʑ͠ΜͲ͍ͷͰɺؤுͬͯTypeScriptΖ͏
Slide 24
Slide 24 text
Agenda
• Why do I make my blog using Headless WP with Next.js
• How did I made it
• Why do we make a website using Headless WP
D e s i g n s y s t e m s f o r c o m p a n y o r S a a S
• Google: Material Design
• Twitter: Bootstarp
• Alibaba: Ant Design
• AWS: NorthStar
• Digitalcube: Galaxy
Slide 32
Slide 32 text
W P T h e m e
• HTML / JS / CSS / PHP / SQL
• Componentεχϖοτͷίϐϖ
• σϓϩΠࣗಈԽ͕ͪΐͬͱखؒ
• طଘͷςʔϚΛར༻Ͱ͖Δ
• ͦͦຖճ࡞Δඞཁͳ͍
J A M s t a c k F ro n t e n d
• HTML / CSS / JavaScript / JS and JS
• ComponentimportͰ࠶ར༻
• ΫϦοΫͰࣗಈσϓϩΠઃఆՄ
• طଘͷςʔϚ͕ͦͦͳ͍ʹ͍ۙ
• جຊతʹຖճεΫϥον
Slide 33
Slide 33 text
Headless WordPress frontend is…
Full scratch WordPress Theme
Thanks you!
• Why do I make my blog using Headless WP with Next.js
• How did I made it
• Why do we make a website using Headless WP
Shifter
https://getshifter.io
Twitter
@motchi0214
GitHub
https://github.com/hideokamoto/
Slide 38
Slide 38 text
A P P E N D I X
͜ ͏ ͍ ͏ ͜ ͱ Ͱ ͖ Δ
• Ionic / CapacitorಋೖͰ
Native friendlyʹ
• AlgoliaಋೖͰWordPressͷ
ΞΫηεΛθϩʹ
• Cognito / Auth0 + StripeͰ
Paywallͷ࣮ݧͱ͔͍ͨ͠
Slide 39
Slide 39 text
Appendix: Trial resources
• Example(SSG): Gatsby WordPress
https://github.com/getshifter/example-gatsby-capacitor-wordpress
• Example(SSR): Frontity
https://github.com/getshifter/example-frontity-wordpress
• Example(SPA): Ionic React with Capacitor
https://github.com/getshifter/example-ionic-react-capacitor
• Starter theme : Gatsby for WP with TypeScript
https://github.com/getshifter/gatsby-starter-wordpress-typescript
Slide 40
Slide 40 text
Thanks you!
• Why do I make my blog using Headless WP with Next.js
• How did I made it
• Why do we make a website using Headless WP
Shifter
https://getshifter.io
Twitter
@motchi0214
GitHub
https://github.com/hideokamoto/