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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
ryo
September 30, 2021
Technology
2
3k
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を使ってちょっと便利なAI拡張機能を作ってみた
kawamataryo
1
410
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
5
2.1k
SaaS公式MCPサーバーをリリースして得た学び
kawamataryo
7
2.1k
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
1
770
ts-morphのパフォーマンス改善Tips
kawamataryo
0
92
webpack to Rspack
kawamataryo
0
90
GitHub Actions と Datadog でコードベースの定点観測
kawamataryo
7
2.1k
個人開発駆動学習 / personal development driven learning
kawamataryo
1
270
GitHub Trending Bot, Sky Follower Bridge の紹介
kawamataryo
0
480
Other Decks in Technology
See All in Technology
顧客の言葉を、そのまま信じない勇気
yamatai1212
1
360
ランサムウェア対策としてのpnpm導入のススメ
ishikawa_satoru
0
220
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
10k
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
torumakabe
1
600
Bedrock PolicyでAmazon Bedrock Guardrails利用を強制してみた
yuu551
0
260
20260208_第66回 コンピュータビジョン勉強会
keiichiito1978
0
190
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
sansantech
PRO
3
1.6k
Exadata Fleet Update
oracle4engineer
PRO
0
1.1k
Embedded SREの終わりを設計する 「なんとなく」から計画的な自立支援へ
sansantech
PRO
3
2.6k
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
ama_ch
0
190
OWASP Top 10:2025 リリースと 少しの日本語化にまつわる裏話
okdt
PRO
3
840
Cloud Runでコロプラが挑む 生成AI×ゲーム『神魔狩りのツクヨミ』の裏側
colopl
0
130
Featured
See All Featured
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
310
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.3k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
140
My Coaching Mixtape
mlcsv
0
49
Odyssey Design
rkendrick25
PRO
1
500
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
1
57
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
170
For a Future-Friendly Web
brad_frost
182
10k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
130
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
1
1.4k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
150
Faster Mobile Websites
deanohume
310
31k
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 ※εϥΠυͷ༰ɾίʔυҎԼهࣄʹ·ͱΊͯ·͢