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

ジャムジャムJamstack勉強会

Transcript

1. esa + VuePress Ͱ Jamstack ͳ υΩϡϝϯταΠτΛ࡞Δ @KawamataRyo 2021/09/30δϟϜδϟϜʂʂJamstack
2. ࣗݾ঺հ
3. KawamataRyo 🔥 ݩফ๷࢜ 👨💻 Engineer @LAPRAS inc ❤ TypeScript, Vue, Firebase, Elixir
4. ࠓ೔࿩͢͜ͱ 💬
5. ʴ esa Λ CMS ʹ VuePress Ͱ࡞ͬͨ Jamstack αΠτͷ঺հ + ࣮૷ͷϙΠϯτ
6. ʮ৘ใΛҭͯΔʯͱ͍͏ࢥ૝ͷMarkdownͰॻ͚ΔυΩϡϝϯτπʔϧɻ ๛෋ͳwebhook΋͋ΓΤϯδχΞϑϨϯυϦʔɻ esaͱ͸ʁ
7. Vue.jsΛར༻ͨ͠੩తαΠτδΣωϨʔλɻVue.jsؔ࿈ͷެࣜυΩϡϝϯ τ౳Ͱྑ͘ར༻͞Εɺٕज़υΩϡϝϯτʹ޲͍ͨςʔϚΛ࣋ͭɻ VuePressͱ͸ʁ
8. ͳͥesaΛCMSʹʁ🐥
9. ɾυΩϡϝϯτ؅ཧͱͯ͠esaΛར༻͍ͯͨ͠ͷ Ͱɺࣥචϝϯόʔ͕esaʹ׳Ε͍ͯͨ ɾΤϯδχΞͷհೖΛ࠷খݶʹαΠτͷίϯςϯ π࡞੒ͷ଎౓ͱɺ಺༰ߋ৽ͷ༰қ͞Λ࣮ݱͨ͠ ͔ͬͨ ɾesaͷWeb hook͕ͱͯ΋ศར
10. ͳͥVuePressʁ📗
11. ɾσβΠϯௐ੔ͷ޻਺Λ࠷খʹͨ͠ ͔ͬͨʢVuePressͷૉͷςʔϚ͕ ੔͍ͬͯΔʣ ɾVuePress V2͕ެ։͞Ε͍ͯͨͷͰ ࢼ͔ͨͬͨ͠
12. ࡞ͬͨ΋ͷ͸ʁ 🛠
13. LAPRAS૊৫ϋϯυϒοΫ https://organization-handbook.lapras.com/
14. γεςϜߏ੒ 🌐
15. esaͷwebhookͰGitHubʹϑΝΠϧΛ࡞੒ GitHub ActionsͰVuePressΛϏϧυ͠ɺGitHub Pagesʹ഑ஔ
16. DEMO
17. ࣮૷ͷϙΠϯτ
18. ᶃ Ϗϧυ࣌ʹಠࣗʹϖʔδΛੜ੒
19. ࠔͬͨͱ͜Ζ 😔
20. • VuePressͷݸผϖʔδͷURL͸ `/ϑΝΠϧ໊.html` ͱͳΔ • esaʹग़ྗ͞ΕΔϚʔΫμ΢ϯϑΝΠϧͷϑΝΠϧ໊͕ɹɹɹɹɹɹɹ` هࣄID.html.md`ͳͷͰ`هࣄID.html.html`ͱͳΓඍົ 🚫 URL͕esaͷهࣄID.html.htmlͱͳΔ
21. • VuePressͷݸผϖʔδઃఆ͸ FrontMatter • esaͷੜ੒͢ΔFrontMatter͸ VuePress૝ఆͷFrontMatterͱඍົ ʹҟͳΔ 🚫 FrontMatterΛมߋग़དྷͳ͍ esaඪ४ͷFrontMatter
22. Ͳ͏͢Δ..🤔
23. esaͷੜ੒ϑΝΠϧΛ ௚઀࢖ΘͣಠࣗʹϖʔδΛੜ੒͢Δ PluginΛ࡞Δ͜ͱͰճආ💪
24. • VuePress͸`docs/foo` ഑ԼʹmdϑΝΠϧΛ௥Ճ͢Ε͹Ϗϧυ࣌ʹࣗಈ ͰಡΈऔͬͯɺΑ͠ͳʹϖʔδΛ࡞ͬͯ͘ΕΔ ௨ৗͷϖʔδੜ੒ `/contents/bar.html`ͱ `/contents/foo.html`͕ੜ੒ ͕ɺɺ͜Εͩͱલड़ͷ໰୊͕..
25. esaͷwebhookͰͷϑΝΠϧ࡞੒ઌΛdocs഑Լͱ͸ผʹࢦఆɻ VuePressͷϏϧυϑοΫͰϑΝΠϧΛಡΈऔΓɺ APIͰϑΝΠϧΛੜ੒͢Δɻ ಠࣗʹϖʔδੜ੒ VuePressͷࣗಈಡΈࠐΈͷର৅ͱͤͣɺ ϏϧυϑοΫͰɺfs.readFileSync() ͰϑΝΠϧΛಡΈࠐΉ ϖʔδ಺༰Λࣗ༝ʹΧελϚΠζͰ͖Δʂ
26. Pluginͷ࣮૷ʢesaͷੜ੒ϑΝΠϧ͔Βͷσʔλநग़ʣ
27. ࢦఆσΟϨΫτϦͷmd͔Β frontMatterͱίϯςϯπͷऔಘ ʢؔ਺ͷৄࡉ͸Zennهࣄʣ Pluginͷ࣮૷ʢesaͷੜ੒ϑΝΠϧ͔Βͷσʔλநग़ʣ
28. frontMatterͱ PathΛࢦఆ Pluginͷ࣮૷ʢesaͷੜ੒ϑΝΠϧ͔Βͷσʔλநग़ʣ
29. Pluginͷ࣮૷ʢϖʔδͷੜ੒ʣ
30. Ϗϧυ࣌ͷϑοΫʹొ࿥ mdϑΝΠϧ͔Βϖʔδ৘ใΛ औಘʢલड़ͷؔ਺ʣ Pluginͷ࣮૷ʢϖʔδͷੜ੒ʣ
31. ϖʔδ৘ใ͔ΒݸผϖʔδΛ࡞੒ ࡞੒ͨ͠ϖʔδΛappʹొ࿥ Pluginͷ࣮૷ʢϖʔδͷੜ੒ʣ
32. Pluginͷ࣮૷ʢPluginͷొ࿥ʣ
33. Pluginͷ࣮૷ʢPluginͷొ࿥ʣ ύεΛ౉͚ͩ͢
34. ᶄ ಈతʹαΠυϦϯΫΛ࡞੒
35. ࠔͬͨͱ͜Ζ 😔
36. • VuePressͷαΠυϦϯΫ͸con fi gʹ จࣈྻͰఆٛ͢Δ • esaͷهࣄ௥ՃͷλΠϛϯάͰɺ con fi gΛຖճॻ͖௚͢ͷ͸໘౗ 🚫 αΠυϦϯΫ͕ݻఆ
37. Ͳ͏͢Δ..🤔
38. Ϗϧυ࣌ʹesaͷϑΝΠϧΛ͔Β αΠυϦϯΫͷઃఆΛੜ੒͢Δ εΫϦϓτͰղܾʂ💪
39. ௨ৗͷαΠυϦϯΫͷઃఆ `/contents`ϖʔδʹ `/contents/one.html`ͱ `/contents/bar.html`ͷ αΠυϦϯΫ͕ੜ੒͞ΕΔ
40. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷
41. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷ ࢦఆσΟϨΫτϦͷϑΝΠϧΛ ͢΂ͯಡΈऔΓɺmdϑΝΠϧͷΈ Λநग़
42. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷ frontMatterʹهࡌͷtitleͷ഑ྻ ʹม׵
43. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷ λΠτϧจࣈྻͰฒͼସ͑ ※ ࣄલʹesaهࣄλΠτϧͷઌ಄ʹ ߲൪߸Λ෇͚ͯ΋Β͏ࣥචϧʔϧ
44. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷ VuePressͷαΠυϦϯΫͷઃఆܗࣜ ʹௐ੔ͯ͠Ϧλʔϯ
45. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷ VuePressͷαΠυϦϯΫͷઃఆܗࣜ ʹௐ੔ͯ͠Ϧλʔϯ
46. αΠυϦϯΫͷઃఆ ੜ੒ͨ͠จࣈྻΛ αΠυόʔʹઃఆ
47. ᶅ ϖʔδͷඇදࣔʹରԠ͢Δ
48. ࠔͬͨͱ͜Ζ 😔
49. • esa্Ͱwebhookର৅ͷهࣄΛΞʔ ΧΠϒ or ࡟আͯ͠΋ɺGitHub্ͷ MarkdownϑΝΠϧ͸࡟আ͞Εͳ͍.. • frontMatterͷpublished΋มߋ͞Ε ͳ͍ 🚫 esaͷwebhook͕هࣄ࡟আʹରԠ͍ͯ͠ͳ͍ ΞʔΧΠϒɾ࡟আͯ͠΋ trueͷ··
50. Ͳ͏͢Δ..🤔
51. ϖʔδɾαΠυϦϯΫੜ੒࣌ʹ λΠτϧΛ൑ఆ͠ϑΟϧλʔ͢Δ ͜ͱͰղܾ
52. ϑΟϧλʔॲཧͷ࣮૷ ϑΟϧλʔؔ਺ ϖʔδੜ੒ͷؔ਺
53. ϑΟϧλʔॲཧͷ࣮૷ ϑΟϧλʔؔ਺ ϖʔδੜ੒ͷؔ਺ [archived]ͱ͍͏จࣈྻ͕ ؚ·ΕΔ͔Ͳ͏͔ͷ൑ఆ ʢࣄલʹ࡟আ͢Δهࣄ͸λΠτϧ ʹ[archived]Λ෇͚Δͱௐ੔ʣ
54. ϑΟϧλʔॲཧͷ࣮૷ ϑΟϧλʔؔ਺ ϖʔδੜ੒ͷؔ਺ ϖʔδੜ੒࣌ʹλΠτϧΛ ൑ఆͯ͠࡟আهࣄ͸ؒҾ͘ ※ αΠυϦϯΫ΋ಉ༷
55. ৼΓฦΓ
56. Keep👍
57. • εϐʔυײͷ͋Δ։ൃ͕Ͱ͖ͨ • ࣮૷͸ΠϯϑϥؚΊ2೔ఔ౓ • JamstackͰߏ੒͕γϯϓϧͳͷͰϝϯςָ͕ • ࣮ࡍʹฤू͢ΔϑΝΠϧ͸਺ϑΝΠϧ • αʔόʔ͕བྷ·ͳ͍ • ϖʔδͷ௥Ճɾमਖ਼ָ͕ • ΤϯδχΞ͕ؔ༩͢Δ͜ͱͳ͘௥Ճɾमਖ਼͕ਐΉ
58. • εϐʔυײͷ͋Δ։ൃ͕Ͱ͖ͨ ධ൑΋্ʑ👍ʢྑ͔ͬͨ..ʣ
59. Problem 📛
60. • ฤूݖݶͷ؅ཧ͕ग़དྷ͍ͯͳ͍ • esaʹ͸ϝϯόʔͷݖݶ؅ཧػೳ͸ͳ͍ͷͰɺฤूऀΛ੍ݶ͢ Δ͜ͱ͕ग़དྷͳ͍ • ϦϦʔε؅ཧΛ͍ͯ͠ͳ͍ • ݱঢ়͸esaฤू -> ଈσϓϩΠͱͳ͍ͬͯΔɻஸೡʹ΍ΔͳΒε ςʔδϯά؀ڥͷ࡞੒΍ɺϦϦʔεϒϥϯνͷ؅ཧ͕ඞཁ
61. ·ͱΊ
62. • एׯͷௐ੔͸ඞཁ͕ͩesaΛCMSʹ͢Δ͜ͱ͸Մೳ • ࣥචϝϯόʔ͕࢖͍΍͍͢πʔϧͰ࡞Δͱࣥච͕ḿΔ • VuePress ૉఢ • Jamstack ࠷ߴ
63. ͓ΘΓ
64. https://zenn.dev/ryo_kawamata/articles/4bf52f97165058 ※εϥΠυͷ಺༰ɾίʔυ͸ҎԼهࣄʹ΋·ͱΊͯ·͢