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
SaaS公式MCPサーバーをリリースして得た学び
kawamataryo
7
1.9k
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
480
ts-morphのパフォーマンス改善Tips
kawamataryo
0
45
webpack to Rspack
kawamataryo
0
52
GitHub Actions と Datadog でコードベースの定点観測
kawamataryo
7
2k
個人開発駆動学習 / personal development driven learning
kawamataryo
1
220
GitHub Trending Bot, Sky Follower Bridge の紹介
kawamataryo
0
410
[Minecraft × ChatGPT] マイクラで作りたいものを伝えると魔法のように作ってくれるコマンドを作る
kawamataryo
0
2.3k
Resumable な JavaScript フレームワーク Qwik を学ぶ / qwik-resumable
kawamataryo
0
3.4k
Other Decks in Technology
See All in Technology
生成AIをテストプロセスに活用し"よう"としている話 #jasstnano
makky_tyuyan
0
250
OCI Oracle Database Services新機能アップデート(2025/03-2025/05)
oracle4engineer
PRO
1
200
SFTPコンテナからファイルをダウンロードする
dip
0
510
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.1k
AIのAIによるAIのための出力評価と改善
chocoyama
0
260
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
hideakiaoyagi
1
150
IAMのマニアックな話 2025を執筆して、 見えてきたAWSアカウント管理の現在
nrinetcom
PRO
4
620
Definition of Done
kawaguti
PRO
5
430
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
yamanoku
1
200
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
10
2.4k
從四件事帶你見識見識 事件驅動架構設計 (EDA)
line_developers_tw
PRO
0
810
Snowflake Intelligenceで実現できるノーコードAI活用
takumimukaiyama
1
290
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Site-Speed That Sticks
csswizardry
10
640
Practical Orchestrator
shlominoach
188
11k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
It's Worth the Effort
3n
184
28k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Visualization
eitanlees
146
16k
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 ※εϥΠυͷ༰ɾίʔυҎԼهࣄʹ·ͱΊͯ·͢