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

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

ryo
September 30, 2021

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

ジャムジャムJamstack勉強会

ryo

September 30, 2021
Tweet

More Decks by ryo

Other Decks in Technology

Transcript

  1. esa + VuePress Ͱ Jamstack ͳ


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

    View Slide

  2. ࣗݾ঺հ

    View Slide

  3. KawamataRyo


    🔥 ݩফ๷࢜


    👨💻 Engineer @LAPRAS inc


    ❤ TypeScript, Vue, Firebase, Elixir

    View Slide

  4. ࠓ೔࿩͢͜ͱ 💬

    View Slide

  5. ʴ
    esa Λ CMS ʹ VuePress Ͱ࡞ͬͨ


    Jamstack αΠτͷ঺հ + ࣮૷ͷϙΠϯτ

    View Slide

  6. ʮ৘ใΛҭͯΔʯͱ͍͏ࢥ૝ͷMarkdownͰॻ͚ΔυΩϡϝϯτπʔϧɻ


    ๛෋ͳwebhook΋͋ΓΤϯδχΞϑϨϯυϦʔɻ
    esaͱ͸ʁ

    View Slide

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

    View Slide

  8. ͳͥesaΛCMSʹʁ🐥

    View Slide

  9. ɾυΩϡϝϯτ؅ཧͱͯ͠esaΛར༻͍ͯͨ͠ͷ
    Ͱɺࣥචϝϯόʔ͕esaʹ׳Ε͍ͯͨ


    ɾΤϯδχΞͷհೖΛ࠷খݶʹαΠτͷίϯςϯ
    π࡞੒ͷ଎౓ͱɺ಺༰ߋ৽ͷ༰қ͞Λ࣮ݱͨ͠
    ͔ͬͨ


    ɾesaͷWeb hook͕ͱͯ΋ศར

    View Slide

  10. ͳͥVuePressʁ📗

    View Slide

  11. ɾσβΠϯௐ੔ͷ޻਺Λ࠷খʹͨ͠
    ͔ͬͨʢVuePressͷૉͷςʔϚ͕
    ੔͍ͬͯΔʣ


    ɾVuePress V2͕ެ։͞Ε͍ͯͨͷͰ
    ࢼ͔ͨͬͨ͠

    View Slide

  12. ࡞ͬͨ΋ͷ͸ʁ 🛠

    View Slide

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

    View Slide

  14. γεςϜߏ੒ 🌐

    View Slide

  15. esaͷwebhookͰGitHubʹϑΝΠϧΛ࡞੒


    GitHub ActionsͰVuePressΛϏϧυ͠ɺGitHub Pagesʹ഑ஔ

    View Slide

  16. DEMO

    View Slide

  17. ࣮૷ͷϙΠϯτ

    View Slide

  18. ᶃ Ϗϧυ࣌ʹಠࣗʹϖʔδΛੜ੒

    View Slide

  19. ࠔͬͨͱ͜Ζ 😔

    View Slide

  20. • VuePressͷݸผϖʔδͷURL͸ `/ϑΝΠϧ໊.html` ͱͳΔ


    • esaʹग़ྗ͞ΕΔϚʔΫμ΢ϯϑΝΠϧͷϑΝΠϧ໊͕ɹɹɹɹɹɹɹ`
    هࣄID.html.md`ͳͷͰ`هࣄID.html.html`ͱͳΓඍົ


    🚫 URL͕esaͷهࣄID.html.htmlͱͳΔ

    View Slide

  21. • VuePressͷݸผϖʔδઃఆ͸
    FrontMatter


    • esaͷੜ੒͢ΔFrontMatter͸
    VuePress૝ఆͷFrontMatterͱඍົ
    ʹҟͳΔ


    🚫 FrontMatterΛมߋग़དྷͳ͍
    esaඪ४ͷFrontMatter

    View Slide

  22. Ͳ͏͢Δ..🤔

    View Slide

  23. esaͷੜ੒ϑΝΠϧΛ


    ௚઀࢖ΘͣಠࣗʹϖʔδΛੜ੒͢Δ


    PluginΛ࡞Δ͜ͱͰճආ💪

    View Slide

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


    `/contents/foo.html`͕ੜ੒
    ͕ɺɺ͜Εͩͱલड़ͷ໰୊͕..

    View Slide

  25. esaͷwebhookͰͷϑΝΠϧ࡞੒ઌΛdocs഑Լͱ͸ผʹࢦఆɻ


    VuePressͷϏϧυϑοΫͰϑΝΠϧΛಡΈऔΓɺ


    APIͰϑΝΠϧΛੜ੒͢Δɻ
    ಠࣗʹϖʔδੜ੒
    VuePressͷࣗಈಡΈࠐΈͷର৅ͱͤͣɺ


    ϏϧυϑοΫͰɺfs.readFileSync()


    ͰϑΝΠϧΛಡΈࠐΉ
    ϖʔδ಺༰Λࣗ༝ʹΧελϚΠζͰ͖Δʂ

    View Slide

  26. Pluginͷ࣮૷ʢesaͷੜ੒ϑΝΠϧ͔Βͷσʔλநग़ʣ

    View Slide

  27. ࢦఆσΟϨΫτϦͷmd͔Β


    frontMatterͱίϯςϯπͷऔಘ


    ʢؔ਺ͷৄࡉ͸Zennهࣄʣ
    Pluginͷ࣮૷ʢesaͷੜ੒ϑΝΠϧ͔Βͷσʔλநग़ʣ

    View Slide

  28. frontMatterͱ


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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. Pluginͷ࣮૷ʢPluginͷొ࿥ʣ

    View Slide

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

    View Slide

  34. ᶄ ಈతʹαΠυϦϯΫΛ࡞੒

    View Slide

  35. ࠔͬͨͱ͜Ζ 😔

    View Slide

  36. • VuePressͷαΠυϦϯΫ͸con
    fi

    จࣈྻͰఆٛ͢Δ


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

    View Slide

  37. Ͳ͏͢Δ..🤔

    View Slide

  38. Ϗϧυ࣌ʹesaͷϑΝΠϧΛ͔Β


    αΠυϦϯΫͷઃఆΛੜ੒͢Δ


    εΫϦϓτͰղܾʂ💪

    View Slide

  39. ௨ৗͷαΠυϦϯΫͷઃఆ
    `/contents`ϖʔδʹ


    `/contents/one.html`ͱ


    `/contents/bar.html`ͷ


    αΠυϦϯΫ͕ੜ੒͞ΕΔ

    View Slide

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

    View Slide

  41. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷
    ࢦఆσΟϨΫτϦͷϑΝΠϧΛ


    ͢΂ͯಡΈऔΓɺmdϑΝΠϧͷΈ
    Λநग़

    View Slide

  42. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷
    frontMatterʹهࡌͷtitleͷ഑ྻ


    ʹม׵

    View Slide

  43. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷
    λΠτϧจࣈྻͰฒͼସ͑


    ※ ࣄલʹesaهࣄλΠτϧͷઌ಄ʹ
    ߲൪߸Λ෇͚ͯ΋Β͏ࣥචϧʔϧ

    View Slide

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

    View Slide

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

    View Slide

  46. αΠυϦϯΫͷઃఆ
    ੜ੒ͨ͠จࣈྻΛ


    αΠυόʔʹઃఆ

    View Slide

  47. ᶅ ϖʔδͷඇදࣔʹରԠ͢Δ

    View Slide

  48. ࠔͬͨͱ͜Ζ 😔

    View Slide

  49. • esa্Ͱwebhookର৅ͷهࣄΛΞʔ
    ΧΠϒ or ࡟আͯ͠΋ɺGitHub্ͷ
    MarkdownϑΝΠϧ͸࡟আ͞Εͳ͍..


    • frontMatterͷpublished΋มߋ͞Ε
    ͳ͍
    🚫 esaͷwebhook͕هࣄ࡟আʹରԠ͍ͯ͠ͳ͍
    ΞʔΧΠϒɾ࡟আͯ͠΋


    trueͷ··

    View Slide

  50. Ͳ͏͢Δ..🤔

    View Slide

  51. ϖʔδɾαΠυϦϯΫੜ੒࣌ʹ


    λΠτϧΛ൑ఆ͠ϑΟϧλʔ͢Δ


    ͜ͱͰղܾ

    View Slide

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

    View Slide

  53. ϑΟϧλʔॲཧͷ࣮૷
    ϑΟϧλʔؔ਺
    ϖʔδੜ੒ͷؔ਺
    [archived]ͱ͍͏จࣈྻ͕


    ؚ·ΕΔ͔Ͳ͏͔ͷ൑ఆ


    ʢࣄલʹ࡟আ͢Δهࣄ͸λΠτϧ
    ʹ[archived]Λ෇͚Δͱௐ੔ʣ

    View Slide

  54. ϑΟϧλʔॲཧͷ࣮૷
    ϑΟϧλʔؔ਺
    ϖʔδੜ੒ͷؔ਺ ϖʔδੜ੒࣌ʹλΠτϧΛ


    ൑ఆͯ͠࡟আهࣄ͸ؒҾ͘


    ※ αΠυϦϯΫ΋ಉ༷

    View Slide

  55. ৼΓฦΓ

    View Slide

  56. Keep👍

    View Slide

  57. • εϐʔυײͷ͋Δ։ൃ͕Ͱ͖ͨ


    • ࣮૷͸ΠϯϑϥؚΊ2೔ఔ౓


    • JamstackͰߏ੒͕γϯϓϧͳͷͰϝϯςָ͕


    • ࣮ࡍʹฤू͢ΔϑΝΠϧ͸਺ϑΝΠϧ


    • αʔόʔ͕བྷ·ͳ͍


    • ϖʔδͷ௥Ճɾमਖ਼ָ͕


    • ΤϯδχΞ͕ؔ༩͢Δ͜ͱͳ͘௥Ճɾमਖ਼͕ਐΉ

    View Slide

  58. • εϐʔυײͷ͋Δ։ൃ͕Ͱ͖ͨ


    ධ൑΋্ʑ👍ʢྑ͔ͬͨ..ʣ

    View Slide

  59. Problem 📛

    View Slide

  60. • ฤूݖݶͷ؅ཧ͕ग़དྷ͍ͯͳ͍


    • esaʹ͸ϝϯόʔͷݖݶ؅ཧػೳ͸ͳ͍ͷͰɺฤूऀΛ੍ݶ͢
    Δ͜ͱ͕ग़དྷͳ͍


    • ϦϦʔε؅ཧΛ͍ͯ͠ͳ͍


    • ݱঢ়͸esaฤू -> ଈσϓϩΠͱͳ͍ͬͯΔɻஸೡʹ΍ΔͳΒε
    ςʔδϯά؀ڥͷ࡞੒΍ɺϦϦʔεϒϥϯνͷ؅ཧ͕ඞཁ

    View Slide

  61. ·ͱΊ

    View Slide

  62. • एׯͷௐ੔͸ඞཁ͕ͩesaΛCMSʹ͢Δ͜ͱ͸Մೳ


    • ࣥචϝϯόʔ͕࢖͍΍͍͢πʔϧͰ࡞Δͱࣥච͕ḿΔ


    • VuePress ૉఢ


    • Jamstack ࠷ߴ

    View Slide

  63. ͓ΘΓ

    View Slide

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

    View Slide