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 full-size slide

  2. KawamataRyo


    🔥 ݩফ๷࢜


    👨💻 Engineer @LAPRAS inc


    ❤ TypeScript, Vue, Firebase, Elixir

    View full-size slide

  3. ࠓ೔࿩͢͜ͱ 💬

    View full-size slide

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


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

    View full-size slide

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


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

    View full-size slide

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

    View full-size slide

  7. ͳͥesaΛCMSʹʁ🐥

    View full-size slide

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


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


    ɾesaͷWeb hook͕ͱͯ΋ศར

    View full-size slide

  9. ͳͥVuePressʁ📗

    View full-size slide

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


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

    View full-size slide

  11. ࡞ͬͨ΋ͷ͸ʁ 🛠

    View full-size slide

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

    View full-size slide

  13. γεςϜߏ੒ 🌐

    View full-size slide

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


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

    View full-size slide

  15. ࣮૷ͷϙΠϯτ

    View full-size slide

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

    View full-size slide

  17. ࠔͬͨͱ͜Ζ 😔

    View full-size slide

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


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


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

    View full-size slide

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


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


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

    View full-size slide

  20. Ͳ͏͢Δ..🤔

    View full-size slide

  21. esaͷੜ੒ϑΝΠϧΛ


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


    PluginΛ࡞Δ͜ͱͰճආ💪

    View full-size slide

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


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

    View full-size slide

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


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


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


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


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

    View full-size slide

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

    View full-size slide

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


    frontMatterͱίϯςϯπͷऔಘ


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

    View full-size slide

  26. frontMatterͱ


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. ࠔͬͨͱ͜Ζ 😔

    View full-size slide

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

    จࣈྻͰఆٛ͢Δ


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

    View full-size slide

  35. Ͳ͏͢Δ..🤔

    View full-size slide

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


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


    εΫϦϓτͰղܾʂ💪

    View full-size slide

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


    `/contents/one.html`ͱ


    `/contents/bar.html`ͷ


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

    View full-size slide

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

    View full-size slide

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


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

    View full-size slide

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


    ʹม׵

    View full-size slide

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


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    αΠυόʔʹઃఆ

    View full-size slide

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

    View full-size slide

  46. ࠔͬͨͱ͜Ζ 😔

    View full-size slide

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


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


    trueͷ··

    View full-size slide

  48. Ͳ͏͢Δ..🤔

    View full-size slide

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


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


    ͜ͱͰղܾ

    View full-size slide

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

    View full-size slide

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


    ؚ·ΕΔ͔Ͳ͏͔ͷ൑ఆ


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

    View full-size slide

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


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


    ※ αΠυϦϯΫ΋ಉ༷

    View full-size slide

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


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


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


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


    • αʔόʔ͕བྷ·ͳ͍


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


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

    View full-size slide

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


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

    View full-size slide

  55. Problem 📛

    View full-size slide

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


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


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


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

    View full-size slide

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


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


    • VuePress ૉఢ


    • Jamstack ࠷ߴ

    View full-size slide

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

    View full-size slide