esa+VuePressでJamstackなドキュメントサイトを作る / Build Jamstack site with VuePress & esa

by ryo

Slide 1

Slide 1 text

esa + VuePress Ͱ Jamstack ͳ υΩϡϝϯταΠτΛ࡞Δ @KawamataRyo 2021/09/30δϟϜδϟϜʂʂJamstack

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

KawamataRyo 🔥 ݩফ๷࢜ 👨💻 Engineer @LAPRAS inc ❤ TypeScript, Vue, Firebase, Elixir

Slide 4

Slide 4 text

ࠓ೔࿩͢͜ͱ 💬

Slide 5

Slide 5 text

ʴ esa Λ CMS ʹ VuePress Ͱ࡞ͬͨ Jamstack αΠτͷ঺հ + ࣮૷ͷϙΠϯτ

Slide 6

Slide 6 text

ʮ৘ใΛҭͯΔʯͱ͍͏ࢥ૝ͷMarkdownͰॻ͚ΔυΩϡϝϯτπʔϧɻ ๛෋ͳwebhook΋͋ΓΤϯδχΞϑϨϯυϦʔɻ esaͱ͸ʁ

Slide 7

Slide 7 text

Vue.jsΛར༻ͨ͠੩తαΠτδΣωϨʔλɻVue.jsؔ࿈ͷެࣜυΩϡϝϯ τ౳Ͱྑ͘ར༻͞Εɺٕज़υΩϡϝϯτʹ޲͍ͨςʔϚΛ࣋ͭɻ VuePressͱ͸ʁ

Slide 8

Slide 8 text

ͳͥesaΛCMSʹʁ🐥

Slide 9

Slide 9 text

ɾυΩϡϝϯτ؅ཧͱͯ͠esaΛར༻͍ͯͨ͠ͷ Ͱɺࣥචϝϯόʔ͕esaʹ׳Ε͍ͯͨ ɾΤϯδχΞͷհೖΛ࠷খݶʹαΠτͷίϯςϯ π࡞੒ͷ଎౓ͱɺ಺༰ߋ৽ͷ༰қ͞Λ࣮ݱͨ͠ ͔ͬͨ ɾesaͷWeb hook͕ͱͯ΋ศར

Slide 10

Slide 10 text

ͳͥVuePressʁ📗

Slide 11

Slide 11 text

ɾσβΠϯௐ੔ͷ޻਺Λ࠷খʹͨ͠ ͔ͬͨʢVuePressͷૉͷςʔϚ͕ ੔͍ͬͯΔʣ ɾVuePress V2͕ެ։͞Ε͍ͯͨͷͰ ࢼ͔ͨͬͨ͠

Slide 12

Slide 12 text

࡞ͬͨ΋ͷ͸ʁ 🛠

Slide 13

Slide 13 text

LAPRAS૊৫ϋϯυϒοΫ https://organization-handbook.lapras.com/

Slide 14

Slide 14 text

γεςϜߏ੒ 🌐

Slide 15

Slide 15 text

esaͷwebhookͰGitHubʹϑΝΠϧΛ࡞੒ GitHub ActionsͰVuePressΛϏϧυ͠ɺGitHub Pagesʹ഑ஔ

Slide 16

Slide 16 text

DEMO

Slide 17

Slide 17 text

࣮૷ͷϙΠϯτ

Slide 18

Slide 18 text

ᶃ Ϗϧυ࣌ʹಠࣗʹϖʔδΛੜ੒

Slide 19

Slide 19 text

ࠔͬͨͱ͜Ζ 😔

Slide 20

Slide 20 text

• VuePressͷݸผϖʔδͷURL͸ `/ϑΝΠϧ໊.html` ͱͳΔ • esaʹग़ྗ͞ΕΔϚʔΫμ΢ϯϑΝΠϧͷϑΝΠϧ໊͕ɹɹɹɹɹɹɹ` هࣄID.html.md`ͳͷͰ`هࣄID.html.html`ͱͳΓඍົ 🚫 URL͕esaͷهࣄID.html.htmlͱͳΔ

Slide 21

Slide 21 text

• VuePressͷݸผϖʔδઃఆ͸ FrontMatter • esaͷੜ੒͢ΔFrontMatter͸ VuePress૝ఆͷFrontMatterͱඍົ ʹҟͳΔ 🚫 FrontMatterΛมߋग़དྷͳ͍ esaඪ४ͷFrontMatter

Slide 22

Slide 22 text

Ͳ͏͢Δ..🤔

Slide 23

Slide 23 text

esaͷੜ੒ϑΝΠϧΛ ௚઀࢖ΘͣಠࣗʹϖʔδΛੜ੒͢Δ PluginΛ࡞Δ͜ͱͰճආ💪

Slide 24

Slide 24 text

• VuePress͸`docs/foo` ഑ԼʹmdϑΝΠϧΛ௥Ճ͢Ε͹Ϗϧυ࣌ʹࣗಈ ͰಡΈऔͬͯɺΑ͠ͳʹϖʔδΛ࡞ͬͯ͘ΕΔ ௨ৗͷϖʔδੜ੒ `/contents/bar.html`ͱ `/contents/foo.html`͕ੜ੒ ͕ɺɺ͜Εͩͱલड़ͷ໰୊͕..

Slide 25

Slide 25 text

esaͷwebhookͰͷϑΝΠϧ࡞੒ઌΛdocs഑Լͱ͸ผʹࢦఆɻ VuePressͷϏϧυϑοΫͰϑΝΠϧΛಡΈऔΓɺ APIͰϑΝΠϧΛੜ੒͢Δɻ ಠࣗʹϖʔδੜ੒ VuePressͷࣗಈಡΈࠐΈͷର৅ͱͤͣɺ ϏϧυϑοΫͰɺfs.readFileSync() ͰϑΝΠϧΛಡΈࠐΉ ϖʔδ಺༰Λࣗ༝ʹΧελϚΠζͰ͖Δʂ

Slide 26

Slide 26 text

Pluginͷ࣮૷ʢesaͷੜ੒ϑΝΠϧ͔Βͷσʔλநग़ʣ

Slide 27

Slide 27 text

ࢦఆσΟϨΫτϦͷmd͔Β frontMatterͱίϯςϯπͷऔಘ ʢؔ਺ͷৄࡉ͸Zennهࣄʣ Pluginͷ࣮૷ʢesaͷੜ੒ϑΝΠϧ͔Βͷσʔλநग़ʣ

Slide 28

Slide 28 text

frontMatterͱ PathΛࢦఆ Pluginͷ࣮૷ʢesaͷੜ੒ϑΝΠϧ͔Βͷσʔλநग़ʣ

Slide 29

Slide 29 text

Pluginͷ࣮૷ʢϖʔδͷੜ੒ʣ

Slide 30

Slide 30 text

Ϗϧυ࣌ͷϑοΫʹొ࿥ mdϑΝΠϧ͔Βϖʔδ৘ใΛ औಘʢલड़ͷؔ਺ʣ Pluginͷ࣮૷ʢϖʔδͷੜ੒ʣ

Slide 31

Slide 31 text

ϖʔδ৘ใ͔ΒݸผϖʔδΛ࡞੒ ࡞੒ͨ͠ϖʔδΛappʹొ࿥ Pluginͷ࣮૷ʢϖʔδͷੜ੒ʣ

Slide 32

Slide 32 text

Pluginͷ࣮૷ʢPluginͷొ࿥ʣ

Slide 33

Slide 33 text

Pluginͷ࣮૷ʢPluginͷొ࿥ʣ ύεΛ౉͚ͩ͢

Slide 34

Slide 34 text

ᶄ ಈతʹαΠυϦϯΫΛ࡞੒

Slide 35

Slide 35 text

ࠔͬͨͱ͜Ζ 😔

Slide 36

Slide 36 text

• VuePressͷαΠυϦϯΫ͸con fi gʹ จࣈྻͰఆٛ͢Δ • esaͷهࣄ௥ՃͷλΠϛϯάͰɺ con fi gΛຖճॻ͖௚͢ͷ͸໘౗ 🚫 αΠυϦϯΫ͕ݻఆ

Slide 37

Slide 37 text

Ͳ͏͢Δ..🤔

Slide 38

Slide 38 text

Ϗϧυ࣌ʹesaͷϑΝΠϧΛ͔Β αΠυϦϯΫͷઃఆΛੜ੒͢Δ εΫϦϓτͰղܾʂ💪

Slide 39

Slide 39 text

௨ৗͷαΠυϦϯΫͷઃఆ `/contents`ϖʔδʹ `/contents/one.html`ͱ `/contents/bar.html`ͷ αΠυϦϯΫ͕ੜ੒͞ΕΔ

Slide 40

Slide 40 text

αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷

Slide 41

Slide 41 text

αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷ ࢦఆσΟϨΫτϦͷϑΝΠϧΛ ͢΂ͯಡΈऔΓɺmdϑΝΠϧͷΈ Λநग़

Slide 42

Slide 42 text

αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷ frontMatterʹهࡌͷtitleͷ഑ྻ ʹม׵

Slide 43

Slide 43 text

αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷ λΠτϧจࣈྻͰฒͼସ͑ ※ ࣄલʹesaهࣄλΠτϧͷઌ಄ʹ ߲൪߸Λ෇͚ͯ΋Β͏ࣥචϧʔϧ

Slide 44

Slide 44 text

αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷ VuePressͷαΠυϦϯΫͷઃఆܗࣜ ʹௐ੔ͯ͠Ϧλʔϯ

Slide 45

Slide 45 text

αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷ VuePressͷαΠυϦϯΫͷઃఆܗࣜ ʹௐ੔ͯ͠Ϧλʔϯ

Slide 46

Slide 46 text

αΠυϦϯΫͷઃఆ ੜ੒ͨ͠จࣈྻΛ αΠυόʔʹઃఆ

Slide 47

Slide 47 text

ᶅ ϖʔδͷඇදࣔʹରԠ͢Δ

Slide 48

Slide 48 text

ࠔͬͨͱ͜Ζ 😔

Slide 49

Slide 49 text

• esa্Ͱwebhookର৅ͷهࣄΛΞʔ ΧΠϒ or ࡟আͯ͠΋ɺGitHub্ͷ MarkdownϑΝΠϧ͸࡟আ͞Εͳ͍.. • frontMatterͷpublished΋มߋ͞Ε ͳ͍ 🚫 esaͷwebhook͕هࣄ࡟আʹରԠ͍ͯ͠ͳ͍ ΞʔΧΠϒɾ࡟আͯ͠΋ trueͷ··

Slide 50

Slide 50 text

Ͳ͏͢Δ..🤔

Slide 51

Slide 51 text

ϖʔδɾαΠυϦϯΫੜ੒࣌ʹ λΠτϧΛ൑ఆ͠ϑΟϧλʔ͢Δ ͜ͱͰղܾ

Slide 52

Slide 52 text

ϑΟϧλʔॲཧͷ࣮૷ ϑΟϧλʔؔ਺ ϖʔδੜ੒ͷؔ਺

Slide 53

Slide 53 text

ϑΟϧλʔॲཧͷ࣮૷ ϑΟϧλʔؔ਺ ϖʔδੜ੒ͷؔ਺ [archived]ͱ͍͏จࣈྻ͕ ؚ·ΕΔ͔Ͳ͏͔ͷ൑ఆ ʢࣄલʹ࡟আ͢Δهࣄ͸λΠτϧ ʹ[archived]Λ෇͚Δͱௐ੔ʣ

Slide 54

Slide 54 text

ϑΟϧλʔॲཧͷ࣮૷ ϑΟϧλʔؔ਺ ϖʔδੜ੒ͷؔ਺ ϖʔδੜ੒࣌ʹλΠτϧΛ ൑ఆͯ͠࡟আهࣄ͸ؒҾ͘ ※ αΠυϦϯΫ΋ಉ༷

Slide 55

Slide 55 text

ৼΓฦΓ

Slide 56

Slide 56 text

Keep👍

Slide 57

Slide 57 text

• εϐʔυײͷ͋Δ։ൃ͕Ͱ͖ͨ • ࣮૷͸ΠϯϑϥؚΊ2೔ఔ౓ • JamstackͰߏ੒͕γϯϓϧͳͷͰϝϯςָ͕ • ࣮ࡍʹฤू͢ΔϑΝΠϧ͸਺ϑΝΠϧ • αʔόʔ͕བྷ·ͳ͍ • ϖʔδͷ௥Ճɾमਖ਼ָ͕ • ΤϯδχΞ͕ؔ༩͢Δ͜ͱͳ͘௥Ճɾमਖ਼͕ਐΉ

Slide 58

Slide 58 text

• εϐʔυײͷ͋Δ։ൃ͕Ͱ͖ͨ ධ൑΋্ʑ👍ʢྑ͔ͬͨ..ʣ

Slide 59

Slide 59 text

Problem 📛

Slide 60

Slide 60 text

• ฤूݖݶͷ؅ཧ͕ग़དྷ͍ͯͳ͍ • esaʹ͸ϝϯόʔͷݖݶ؅ཧػೳ͸ͳ͍ͷͰɺฤूऀΛ੍ݶ͢ Δ͜ͱ͕ग़དྷͳ͍ • ϦϦʔε؅ཧΛ͍ͯ͠ͳ͍ • ݱঢ়͸esaฤू -> ଈσϓϩΠͱͳ͍ͬͯΔɻஸೡʹ΍ΔͳΒε ςʔδϯά؀ڥͷ࡞੒΍ɺϦϦʔεϒϥϯνͷ؅ཧ͕ඞཁ

Slide 61

Slide 61 text

·ͱΊ

Slide 62

Slide 62 text

• एׯͷௐ੔͸ඞཁ͕ͩesaΛCMSʹ͢Δ͜ͱ͸Մೳ • ࣥචϝϯόʔ͕࢖͍΍͍͢πʔϧͰ࡞Δͱࣥච͕ḿΔ • VuePress ૉఢ • Jamstack ࠷ߴ

Slide 63

Slide 63 text

͓ΘΓ

Slide 64

Slide 64 text

https://zenn.dev/ryo_kawamata/articles/4bf52f97165058 ※εϥΠυͷ಺༰ɾίʔυ͸ҎԼهࣄʹ΋·ͱΊͯ·͢