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.9k
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
5
1.8k
SaaS公式MCPサーバーをリリースして得た学び
kawamataryo
7
2k
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
620
ts-morphのパフォーマンス改善Tips
kawamataryo
0
63
webpack to Rspack
kawamataryo
0
69
GitHub Actions と Datadog でコードベースの定点観測
kawamataryo
7
2k
個人開発駆動学習 / personal development driven learning
kawamataryo
1
250
GitHub Trending Bot, Sky Follower Bridge の紹介
kawamataryo
0
450
[Minecraft × ChatGPT] マイクラで作りたいものを伝えると魔法のように作ってくれるコマンドを作る
kawamataryo
0
2.4k
Other Decks in Technology
See All in Technology
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
0
100
初めてのDatabricks Apps開発
taka_aki
1
200
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
460
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
540
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
2
480
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
180
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
560
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
370
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
560
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
1k
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
140
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Code Reviewing Like a Champion
maltzj
526
40k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Typedesign – Prime Four
hannesfritz
42
2.8k
Side Projects
sachag
455
43k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Docker and Python
trallard
46
3.6k
Documentation Writing (for coders)
carmenintech
75
5.1k
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 ※εϥΠυͷ༰ɾίʔυҎԼهࣄʹ·ͱΊͯ·͢