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

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 ※εϥΠυͷ಺༰ɾίʔυ͸ҎԼهࣄʹ΋·ͱΊͯ·͢