Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

0a16f7b8629f2facca2a1e80a73c5423?s=47 ryo
September 30, 2021

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

ジャムジャムJamstack勉強会

0a16f7b8629f2facca2a1e80a73c5423?s=128

ryo

September 30, 2021
Tweet

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