Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
esa+VuePressでJamstackなドキュメントサイトを作る / Build Jams...
Search
ryo
September 30, 2021
Technology
2
2.7k
esa+VuePressでJamstackなドキュメントサイトを作る / Build Jamstack site with VuePress & esa
ジャムジャムJamstack勉強会
ryo
September 30, 2021
Tweet
Share
More Decks by ryo
See All by ryo
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
330
ts-morphのパフォーマンス改善Tips
kawamataryo
0
28
webpack to Rspack
kawamataryo
0
37
GitHub Actions と Datadog でコードベースの定点観測
kawamataryo
7
1.9k
個人開発駆動学習 / personal development driven learning
kawamataryo
1
200
GitHub Trending Bot, Sky Follower Bridge の紹介
kawamataryo
0
380
[Minecraft × ChatGPT] マイクラで作りたいものを伝えると魔法のように作ってくれるコマンドを作る
kawamataryo
0
2.3k
Resumable な JavaScript フレームワーク Qwik を学ぶ / qwik-resumable
kawamataryo
0
3.4k
JSからTSへ移行した Vue.jsプロダクトの型チェックを 漸進的に強化する/ reinforcing the type
kawamataryo
0
3.3k
Other Decks in Technology
See All in Technology
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
20k
OPENLOGI Company Profile
hr01
0
62k
Amazon Q Developer 他⽣成AIと⽐較してみた
takano0131
1
130
パスキー導入の課題と ベストプラクティス、今後の展望
ritou
7
1.3k
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
150
FinOps_Demo
tkhresk
0
100
大規模アジャイル開発のリアル!コミュニケーション×進捗管理×高品質
findy_eventslides
0
630
銀行でDevOpsを進める理由と実践例 / 20250317 Masaki Iwama
shift_evolve
1
130
Riverpod & Riverpod Generatorを利用して状態管理部分の処理を書き換えてみる簡単な事例紹介
fumiyasac0921
0
120
お問い合わせ対応の改善取り組みとその進め方
masartz
1
490
Agile TPIを活用した品質改善事例
tomasagi
0
390
Cline、めっちゃ便利、お金が飛ぶ💸
iwamot
20
19k
Featured
See All Featured
Scaling GitHub
holman
459
140k
Site-Speed That Sticks
csswizardry
4
460
RailsConf 2023
tenderlove
29
1k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Embracing the Ebb and Flow
colly
85
4.6k
Faster Mobile Websites
deanohume
306
31k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Language of Interfaces
destraynor
157
24k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Code Review Best Practice
trishagee
67
18k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
We Have a Design System, Now What?
morganepeng
51
7.5k
Transcript
esa + VuePress Ͱ Jamstack ͳ υΩϡϝϯταΠτΛ࡞Δ @KawamataRyo 2021/09/30δϟϜδϟϜʂʂJamstack
ࣗݾհ
KawamataRyo 🔥 ݩফ࢜ 👨💻 Engineer @LAPRAS inc ❤ TypeScript, Vue,
Firebase, Elixir
ࠓ͢͜ͱ 💬
ʴ esa Λ CMS ʹ VuePress Ͱ࡞ͬͨ Jamstack αΠτͷհ +
࣮ͷϙΠϯτ
ʮใΛҭͯΔʯͱ͍͏ࢥͷMarkdownͰॻ͚ΔυΩϡϝϯτπʔϧɻ ๛ͳwebhook͋ΓΤϯδχΞϑϨϯυϦʔɻ esaͱʁ
Vue.jsΛར༻ͨ͠੩తαΠτδΣωϨʔλɻVue.jsؔ࿈ͷެࣜυΩϡϝϯ τͰྑ͘ར༻͞Εɺٕज़υΩϡϝϯτʹ͍ͨςʔϚΛ࣋ͭɻ VuePressͱʁ
ͳͥesaΛCMSʹʁ🐥
ɾυΩϡϝϯτཧͱͯ͠esaΛར༻͍ͯͨ͠ͷ Ͱɺࣥචϝϯόʔ͕esaʹ׳Ε͍ͯͨ ɾΤϯδχΞͷհೖΛ࠷খݶʹαΠτͷίϯςϯ π࡞ͷͱɺ༰ߋ৽ͷ༰қ͞Λ࣮ݱͨ͠ ͔ͬͨ ɾesaͷWeb hook͕ͱͯศར
ͳͥVuePressʁ📗
ɾσβΠϯௐͷΛ࠷খʹͨ͠ ͔ͬͨʢVuePressͷૉͷςʔϚ͕ ͍ͬͯΔʣ ɾVuePress V2͕ެ։͞Ε͍ͯͨͷͰ ࢼ͔ͨͬͨ͠
࡞ͬͨͷʁ 🛠
LAPRAS৫ϋϯυϒοΫ https://organization-handbook.lapras.com/
γεςϜߏ 🌐
esaͷwebhookͰGitHubʹϑΝΠϧΛ࡞ GitHub ActionsͰVuePressΛϏϧυ͠ɺGitHub Pagesʹஔ
DEMO
࣮ͷϙΠϯτ
ᶃ Ϗϧυ࣌ʹಠࣗʹϖʔδΛੜ
ࠔͬͨͱ͜Ζ 😔
• VuePressͷݸผϖʔδͷURL `/ϑΝΠϧ໊.html` ͱͳΔ • esaʹग़ྗ͞ΕΔϚʔΫμϯϑΝΠϧͷϑΝΠϧ໊͕ɹɹɹɹɹɹɹ` هࣄID.html.md`ͳͷͰ`هࣄID.html.html`ͱͳΓඍົ 🚫 URL͕esaͷهࣄID.html.htmlͱͳΔ
• VuePressͷݸผϖʔδઃఆ FrontMatter • esaͷੜ͢ΔFrontMatter VuePressఆͷFrontMatterͱඍົ ʹҟͳΔ 🚫 FrontMatterΛมߋग़དྷͳ͍ esaඪ४ͷFrontMatter
Ͳ͏͢Δ..🤔
esaͷੜϑΝΠϧΛ ΘͣಠࣗʹϖʔδΛੜ͢Δ PluginΛ࡞Δ͜ͱͰճආ💪
• VuePress`docs/foo` ԼʹmdϑΝΠϧΛՃ͢ΕϏϧυ࣌ʹࣗಈ ͰಡΈऔͬͯɺΑ͠ͳʹϖʔδΛ࡞ͬͯ͘ΕΔ ௨ৗͷϖʔδੜ `/contents/bar.html`ͱ `/contents/foo.html`͕ੜ ͕ɺɺ͜Εͩͱલड़ͷ͕..
esaͷwebhookͰͷϑΝΠϧ࡞ઌΛdocsԼͱผʹࢦఆɻ VuePressͷϏϧυϑοΫͰϑΝΠϧΛಡΈऔΓɺ APIͰϑΝΠϧΛੜ͢Δɻ ಠࣗʹϖʔδੜ VuePressͷࣗಈಡΈࠐΈͷରͱͤͣɺ ϏϧυϑοΫͰɺfs.readFileSync() ͰϑΝΠϧΛಡΈࠐΉ ϖʔδ༰Λࣗ༝ʹΧελϚΠζͰ͖Δʂ
Pluginͷ࣮ʢesaͷੜϑΝΠϧ͔Βͷσʔλநग़ʣ
ࢦఆσΟϨΫτϦͷmd͔Β frontMatterͱίϯςϯπͷऔಘ ʢؔͷৄࡉZennهࣄʣ Pluginͷ࣮ʢesaͷੜϑΝΠϧ͔Βͷσʔλநग़ʣ
frontMatterͱ PathΛࢦఆ Pluginͷ࣮ʢesaͷੜϑΝΠϧ͔Βͷσʔλநग़ʣ
Pluginͷ࣮ʢϖʔδͷੜʣ
Ϗϧυ࣌ͷϑοΫʹొ mdϑΝΠϧ͔ΒϖʔδใΛ औಘʢલड़ͷؔʣ Pluginͷ࣮ʢϖʔδͷੜʣ
ϖʔδใ͔ΒݸผϖʔδΛ࡞ ࡞ͨ͠ϖʔδΛappʹొ Pluginͷ࣮ʢϖʔδͷੜʣ
Pluginͷ࣮ʢPluginͷొʣ
Pluginͷ࣮ʢPluginͷొʣ ύεΛ͚ͩ͢
ᶄ ಈతʹαΠυϦϯΫΛ࡞
ࠔͬͨͱ͜Ζ 😔
• VuePressͷαΠυϦϯΫcon fi gʹ จࣈྻͰఆٛ͢Δ • esaͷهࣄՃͷλΠϛϯάͰɺ con fi gΛຖճॻ͖͢ͷ໘
🚫 αΠυϦϯΫ͕ݻఆ
Ͳ͏͢Δ..🤔
Ϗϧυ࣌ʹesaͷϑΝΠϧΛ͔Β αΠυϦϯΫͷઃఆΛੜ͢Δ εΫϦϓτͰղܾʂ💪
௨ৗͷαΠυϦϯΫͷઃఆ `/contents`ϖʔδʹ `/contents/one.html`ͱ `/contents/bar.html`ͷ αΠυϦϯΫ͕ੜ͞ΕΔ
αΠυϦϯΫͷจࣈྻੜͷ࣮
αΠυϦϯΫͷจࣈྻੜͷ࣮ ࢦఆσΟϨΫτϦͷϑΝΠϧΛ ͯ͢ಡΈऔΓɺmdϑΝΠϧͷΈ Λநग़
αΠυϦϯΫͷจࣈྻੜͷ࣮ frontMatterʹهࡌͷtitleͷྻ ʹม
αΠυϦϯΫͷจࣈྻੜͷ࣮ λΠτϧจࣈྻͰฒͼସ͑ ※ ࣄલʹesaهࣄλΠτϧͷઌ಄ʹ ߲൪߸Λ͚ͯΒ͏ࣥචϧʔϧ
αΠυϦϯΫͷจࣈྻੜͷ࣮ VuePressͷαΠυϦϯΫͷઃఆܗࣜ ʹௐͯ͠Ϧλʔϯ
αΠυϦϯΫͷจࣈྻੜͷ࣮ VuePressͷαΠυϦϯΫͷઃఆܗࣜ ʹௐͯ͠Ϧλʔϯ
αΠυϦϯΫͷઃఆ ੜͨ͠จࣈྻΛ αΠυόʔʹઃఆ
ᶅ ϖʔδͷඇදࣔʹରԠ͢Δ
ࠔͬͨͱ͜Ζ 😔
• esa্ͰwebhookରͷهࣄΛΞʔ ΧΠϒ or আͯ͠ɺGitHub্ͷ MarkdownϑΝΠϧআ͞Εͳ͍.. • frontMatterͷpublishedมߋ͞Ε ͳ͍ 🚫
esaͷwebhook͕هࣄআʹରԠ͍ͯ͠ͳ͍ ΞʔΧΠϒɾআͯ͠ trueͷ··
Ͳ͏͢Δ..🤔
ϖʔδɾαΠυϦϯΫੜ࣌ʹ λΠτϧΛఆ͠ϑΟϧλʔ͢Δ ͜ͱͰղܾ
ϑΟϧλʔॲཧͷ࣮ ϑΟϧλʔؔ ϖʔδੜͷؔ
ϑΟϧλʔॲཧͷ࣮ ϑΟϧλʔؔ ϖʔδੜͷؔ [archived]ͱ͍͏จࣈྻ͕ ؚ·ΕΔ͔Ͳ͏͔ͷఆ ʢࣄલʹআ͢ΔهࣄλΠτϧ ʹ[archived]Λ͚Δͱௐʣ
ϑΟϧλʔॲཧͷ࣮ ϑΟϧλʔؔ ϖʔδੜͷؔ ϖʔδੜ࣌ʹλΠτϧΛ ఆͯ͠আهࣄؒҾ͘ ※ αΠυϦϯΫಉ༷
ৼΓฦΓ
Keep👍
• εϐʔυײͷ͋Δ։ൃ͕Ͱ͖ͨ • ࣮ΠϯϑϥؚΊ2ఔ • JamstackͰߏ͕γϯϓϧͳͷͰϝϯςָ͕ • ࣮ࡍʹฤू͢ΔϑΝΠϧϑΝΠϧ • αʔόʔ͕བྷ·ͳ͍
• ϖʔδͷՃɾमਖ਼ָ͕ • ΤϯδχΞ͕ؔ༩͢Δ͜ͱͳ͘Ճɾमਖ਼͕ਐΉ
• εϐʔυײͷ͋Δ։ൃ͕Ͱ͖ͨ ධ্ʑ👍ʢྑ͔ͬͨ..ʣ
Problem 📛
• ฤूݖݶͷཧ͕ग़དྷ͍ͯͳ͍ • esaʹϝϯόʔͷݖݶཧػೳͳ͍ͷͰɺฤूऀΛ੍ݶ͢ Δ͜ͱ͕ग़དྷͳ͍ • ϦϦʔεཧΛ͍ͯ͠ͳ͍ • ݱঢ়esaฤू ->
ଈσϓϩΠͱͳ͍ͬͯΔɻஸೡʹΔͳΒε ςʔδϯάڥͷ࡞ɺϦϦʔεϒϥϯνͷཧ͕ඞཁ
·ͱΊ
• एׯͷௐඞཁ͕ͩesaΛCMSʹ͢Δ͜ͱՄೳ • ࣥචϝϯόʔ͕͍͍͢πʔϧͰ࡞Δͱࣥච͕ḿΔ • VuePress ૉఢ • Jamstack ࠷ߴ
͓ΘΓ
https://zenn.dev/ryo_kawamata/articles/4bf52f97165058 ※εϥΠυͷ༰ɾίʔυҎԼهࣄʹ·ͱΊͯ·͢