Shifter Meetup West #3 スタティックサイトジェネレーターについて勉強する会

by NExT-Season

Slide 1

Slide 1 text

ελςΟοΫαΠτδΣωϨʔλʔ ʹ͍ͭͯษڧ͢Δձ Shifter Meetup West #3  2019.11.20

Slide 2

Slide 2 text

Steps Who am I

Slide 3

Slide 3 text

Atsushi Ando  ͋ΜͲ͏͋ͭ͠ DTP/web Design Engineer ArtDirector /Photograph twitter : @Next_Season github : AtsushiA web : next-season.net Solutions Architect - Associate

Slide 4

Slide 4 text

Recent works Keynote MODX Concrete5 WordPress AWS XD Photography PhotoShop/Lightroom Illustrator

Slide 5

Slide 5 text

#SVTI6( "EPCF9%6(,PCF  +"846(,PCF $.4େࡕՆࡇΓ .0%9ͷ೔ DPODSFUFΤόϯδΣϦετ Kobe Community  &etc…

Slide 6

Slide 6 text

Let’s Shifter

Slide 7

Slide 7 text

https://next-season.net/cms/wordpress/1965/ Check લճ : #2 ͜Ε͔ΒͷShifter ࣮ફϚΠάϨʔγϣϯʂ

Slide 8

Slide 8 text

ҧ͏

Slide 9

Slide 9 text

Topics 1.What’s Static Site Generator 2.What’s JAM Stack 3.ͦΕɺ͓͍͍͠ͷʁ

Slide 10

Slide 10 text

Topics • Gatsby (Template : React | License : MIT) • Hexo (Template : EJS, Pug, Haml, Swig, Nunjucks, Mustache, Handlebars, Twig, Marko | License : MIT) • Jekyll (Template :Liquid | License : MIT) • Gridsome (Template :Vue | License : MIT) What’s Static Site Generator https://www.staticgen.com/

Slide 11

Slide 11 text

Topics React GrapgQL What’s Static Site Generator Gatsbyjs

Slide 12

Slide 12 text

Topics 1.Client-Side Java Script 2.APIs (Application programming interface) 3.Markup https://jamstack.org/

Slide 13

Slide 13 text

Topics Before JAMStack [ex : LAMP] DB php httpαʔόʔ WebϖʔδΛݟ͍ͨ html΍ը૾ αʔόଆͰੜ੒ͨ͠ HTMLΛऔಘͯ͠දࣔ

Slide 14

Slide 14 text

Topics Before JAMStack [ex : WP] PHP Core Theme Plugin

Slide 15

Slide 15 text

Topics Before JAMStack [ex : WP]

Slide 16

Slide 16 text

Topics Before JAMStack [ex : WP]

Slide 17

Slide 17 text

Topics Before JAMStack [ex : WP]

Slide 18

Slide 18 text

Static Site Generator Topics After JAMStack αʔό͔Βऔಘͨ͠JSΛݩʹ σʔλΛऔಘ͠ΫϥΠΞϯτ Ͱhtmlੜ੒ͯ͠දࣔ Static Files (html / js /css) DataSources Files / APIs

Slide 19

Slide 19 text

Static Site Generator Topics After JAMStack WebϖʔδΛݟ͍ͨ html/JSΛऔಘ αʔό͔Βऔಘͨ͠JSΛݩʹ σʔλΛऔಘ͠ΫϥΠΞϯτ Ͱhtmlੜ੒ͯ͠දࣔ Static Files (html / js /css) DataSources Files / APIs

Slide 20

Slide 20 text

Topics 1.αʔόʹґଘ͠ͳ͍ίʔυʹΑΓCDNʹ ΑΔεέʔϧ͕༰қ 2.࠶ར༻ՄೳͳAPI 3.σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ ͦΕ͓͍͍͠ͷʁ

Slide 21

Slide 21 text

Topics CDNʹΑΔεέʔϧ͕༰қ

Slide 22

Slide 22 text

Topics ࠶ར༻ՄೳͳAPI

Slide 23

Slide 23 text

Topics σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ React GrapgQL DataSource

Slide 24

Slide 24 text

Topics σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ React GrapgQL DataSource

Slide 25

Slide 25 text

Topics σʔλιʔεʹґଘ͠ͳ͍ςʔϚ։ൃ React GrapgQL DataSource

Slide 26

Slide 26 text

Why Shifter

Slide 27

Slide 27 text

Why Shifter

Slide 28

Slide 28 text

Why Shifter αʔόͷ  ͓कΓෆཁʂ

Slide 29

Slide 29 text

Let's start hands-on!

Slide 30

Slide 30 text

Overview શମͷྲྀΕ 1.ShifterΛWebhookରԠϓϥϯ(Tier 2Ҏ্)ʹมߋ͢Δ 2. NetlifyσϓϩΠ༻ͷςϯϓϨʔτΛΠϯϙʔτ͢Δ 3. NetlifyʹαΠτΛ࡞੒͢Δ 4.ShifterαΠτ͔ΒWebhookͰσϓϩΠ͢Δ https://github.com/getshifter/workshop/ https://www.digitalcube.jp/shifter/4434/

Slide 31

Slide 31 text

Check.1 ΞΧ΢ϯτͷ֬ೝ • ShifterΞΧ΢ϯτ͕͋Δ • GitHubΞΧ΢ϯτ͕͋Δ • NetlifyΞΧ΢ϯτ͕͋Δ https://github.com/getshifter/workshop/blob/master/step-by-step/netlify/README.md

Slide 32

Slide 32 text

Check.2 WPαΠτͷ֬ೝ •̍ͭҎ্ͷ౤ߘ͕ެ։͞Ε͍ͯΔ •̍ͭҎ্ͷݻఆϖʔδ͕ެ։͞Ε͍ͯΔ •̍ͭҎ্ͷλά͕ઃఆ͞Ε͍ͯΔ •̍ͭҎ্ͷΧςΰϦʔ͕ઃఆ͞Ε͍ͯΔ •ύʔϚϦϯΫʹ೔ຊޠؚ͕·Ε͍ͯͳ͍ https://github.com/getshifter/workshop/blob/master/step-by-step/gatsby/step1.md

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text