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.8k
esa+VuePressでJamstackなドキュメントサイトを作る / Build Jamstack site with VuePress & esa
ジャムジャムJamstack勉強会
ryo
September 30, 2021
Tweet
Share
More Decks by ryo
See All by ryo
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
4
1.6k
SaaS公式MCPサーバーをリリースして得た学び
kawamataryo
7
2k
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
570
ts-morphのパフォーマンス改善Tips
kawamataryo
0
56
webpack to Rspack
kawamataryo
0
64
GitHub Actions と Datadog でコードベースの定点観測
kawamataryo
7
2k
個人開発駆動学習 / personal development driven learning
kawamataryo
1
240
GitHub Trending Bot, Sky Follower Bridge の紹介
kawamataryo
0
440
[Minecraft × ChatGPT] マイクラで作りたいものを伝えると魔法のように作ってくれるコマンドを作る
kawamataryo
0
2.4k
Other Decks in Technology
See All in Technology
KotlinConf 2025_イベントレポート
sony
1
130
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
240
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
410
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
200
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
550
Agile PBL at New Grads Trainings
kawaguti
PRO
1
420
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
470
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
850
Rustから学ぶ 非同期処理の仕組み
skanehira
1
130
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
410
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
840
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.4k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Writing Fast Ruby
sferik
628
62k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
The Language of Interfaces
destraynor
161
25k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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 ※εϥΠυͷ༰ɾίʔυҎԼهࣄʹ·ͱΊͯ·͢