Developing static sites with Ruby

https://regional.rubykaigi.org/hokuriku01/

Transcript

1. RubyͰ࡞Δ੩తαΠτ ๺཮Rubyձٞ01 OKURA Masafumi, 2025-12-06
2. self.introduce • ໊લɿ͓͓͘Β·͞;Έʢେ૔խ࢙ʣ • ॴଐɿϑϦʔϥϯε • ׆ಈɿKaigi on RailsνʔϑΦʔΨφΠβʔɺOSSʢAlbaͳͲʣɺ֤छ ొஃɺϙουΩϟετʢOH! MY RUBYISTSʣ
5. ͓͠ͳ͕͖ 1. ੩తαΠτͱ͸ɺͳͥඞཁͳͷ͔ 2. RubyΤίγεςϜʹ͓͚Δ੩తαΠτδΣωϨʔλʔʢSSGʣͷൺ ֱ 3. ͳͥRubyͳͷ͔
6. 1. ੩తαΠτͱ͸ɺ ͳͥඞཁͳͷ͔
7. ੩తαΠτ
9. HTML CSS JavaScript
10. αʔόʔ͕ͳ͍ ຊདྷαʔόʔϨεͬͯͬͪ͜ʹ࢖͏΂͖୯ޠͩͬͨΑͶ…
11. ੈ͸େ ੩తαΠτ࣌୅ ʂʂʂʂʂ [ཁग़య]
12. Digital Garden
13. Digital Gardenͱ͸ʁʢࢲͳΓͷཧղʣ • ݫີͳఆٛ͸ͳ͍Β͍͠ • ϓϨʔϯςΩετʢMarkdownؚΉʣΛ޷Ή • SaaSΑΓϩʔΧϧΛ޷Ή • ࣌ܥྻͷฒͼΛ޷·ͳ͍ʢϒϩάͱͷࠩҟʣ • ΞϯνϏοάςοΫ
14. Digital GardenΛ ڞ༗͍ͨ͠ͱ͖ɺ
15. ੩తαΠτʂ
16. ੩తαΠτͰे෼ͦ͏ͳ΋ͷͨͪ • ݸਓαΠτʢϦϯΫूͱͪΐͬͱͨ͠ίϯςϯπʣ • https://okuramasafumi.com • ΠϕϯταΠτʢΧϯϑΝϨϯεͳͲʣ • https://kaigionrails.org/2025 • اۀαΠτʢখن໛ͳ΋ͷʣ
17. ੩తαΠτʂʂ
18. …ͦ΋ͦ΋ɺ
19. ຊ౰ʹͦΕඞཁʁ • ΄͍͠ͷ͸ͪΐͬͱͨ͠σʔλͰखॻ͖ͷYAMLͰे෼Ͱ͸ʁ • σʔλϕʔε͍Δʁ؅ཧ͢Δʁ • ಈతͳϩδοΫ͸ຊ౰ʹඞཁʁ੬ऑੑରԠͰ͖Δʁ • Ϗϧυ࣌ʹશ෦ܾΊΒΕͨΒɺ͋ͱ͸GitHub PagesͰແྉɻ • SPAͰ͋Δඞཁ͋Δʁ • ͳ͍ɺੈͷத͸SPA͕ա৒ద༻͞Εͯ͠·͍ͬͯΔ͠ΈΜͳ֮ࣗͯ͠ͳ͍
20. ຊ౰ʹඞཁͳ΋ͷ • ϨΠΞ΢τ • HTMLʹม׵Ͱ͖Δ΋ͷʢMarkdown΍LiquidͳͲʣ • ͪΐͬͱͨ͠ϩδοΫ • ͋Δσʔλιʔε͔Βෳ਺ϖʔδΛੜ੒͢ΔͳͲ • গ͠ͷJavaScript • Ϗϧυπʔϧ
21. ੩తαΠτʂʂʂ
22. 2.RubyΤίγεςϜ ʹ͓͚Δ੩తαΠτ δΣωϨʔλʔͷൺֱ
23. ੩తαΠτ δΣωϨʔλʔ
24. Static Site Generator
25. ͓͓͘Β͕࢖ͬͨ͜ͱͷ͋ΔSSG • Jekyll • Middleman • Nanoc • Bridgetown
26. Jekyll • ݹࢀʢ2008೥ʣͷSSGɺGitHub PagesͷσϑΥϧτ • μ΢ϯϩʔυ਺͕ಥग़ʢ3000ສ௒ʣɺϓϥάΠϯ΋ඇৗʹ๛෋ • ϒϩάͱͷ૬ੑ͕ྑ͍Β͍͠ • 2025೥࣌఺Ͱϝϯςφϯεܧଓத • εϖϧ͕֮͑ΒΕͳ͍
27. middleman • ݹࢀʢJekyllͱ΄΅ಉ࣌ظʣͷSSG • RailsʹدͤͨAPIʢlink_toͳͲʣ͕ಛ௃ • μ΢ϯϩʔυ਺͸໿600ສɺϓϥάΠϯͷ਺͸ଟ͘͸ͳ͍ • Kaigi on RailsͷαΠτߏஙʹར༻ʢʙ2023ʣ • 2025೥࣌఺Ͱϝϯςφϯεܧଓத
28. Nanoc • ࣮͸࠷ݹࢀͷSSGʢ2007೥ʹόʔδϣϯ1ʣ • μ΢ϯϩʔυ਺͕গͳ͘ʢ໿100ສʣɺར༻ྫ΋গͳ͍ • ґଘؔ܎͕গͳ͘ɺػೳతʹ΋ܰྔͰγϯϓϧ • ͓͓͘ΒͷݸਓαΠτ͸͜ΕͰߏங͞Ε͍ͯΔ • 2025೥࣌఺Ͱϝϯςφϯεܧଓத
29. Bridgetown • 2020೥ʹొ৔ͨ͠ظ଴ͷ৽੕ɺSSG݉ϑϧελοΫϑϨʔϜϫʔΫΛ ᨳ͏ • μ΢ϯϩʔυ਺͸30ສҎԼɺϓϥάΠϯ΋গͳ͍ • Roda΍esbuildΛར༻͍ͯ͠Δͷ͕ಛ௃త • Kaigi on RailsͷαΠτߏஙʹར༻ʢ2024ʙʣ • 2025೥࣌఺Ͱϝϯςφϯεܧଓதʢόʔδϣϯ2͕ϦϦʔεʣ
30. ໨తผ෼ྨ • ͱʹ͔ͬ͘͘͞ͱαΠτΛ࡞Γ͍ͨɺϖϥΠνʹ͍ۙ -> Nanoc • GitHub PagesͰ࢖͍͍ͨ -> Jekyll • Railsͷײ֮Ͱ։ൃ͍ͨ͠ -> Middleman • ৽͍͜͠ͱΛࢼ͍ͨ͠ -> Bridgetown
32. ׆ൃͳ։ൃ ଟ༷ͳબ୒ࢶ
33. RubyͬΆ͍ʂ
34. 3. ͳͥRubyͳͷ͔
35. ຊ౰ʹඞཁͳ΋ͷʢ࠶ܝʣ • ϨΠΞ΢τ • HTMLʹม׵Ͱ͖Δ΋ͷʢMarkdown΍LiquidͳͲʣ • ͪΐͬͱͨ͠ϩδοΫ • ͋Δσʔλιʔε͔Βෳ਺ϖʔδΛੜ੒͢ΔͳͲ • গ͠ͷJavaScript • Ϗϧυπʔϧ
36. ຊ౰ʹඞཁͳ΋ͷʢ࠶ܝʣ • ϨΠΞ΢τ • HTMLʹม׵Ͱ͖Δ΋ͷʢMarkdown΍LiquidͳͲʣ • ͪΐͬͱͨ͠ϩδοΫ • ͋Δσʔλιʔε͔Βෳ਺ϖʔδΛੜ੒͢ΔͳͲ • গ͠ͷJavaScript • Ϗϧυπʔϧ
37. ͪΐͬͱͨ͠ ϩδοΫ
38. …Λॻ͘ݴޠ
39. εΫϦϓτݴޠ
40. Ruby
43. ΍Γ͍ͨΑ͏ʹ ΍ΕΔʂ
44. ʮ͜ͷαΠτϏϧμɺ ͜ͷػೳ͕ͳ͍ͷ ͭΒ͍ͳ͋…ʯ
45. ʮͦΕɺSSGͳΒ Ͱ͖ΔΑʯ
46. ͱ͜ΖͰɿ ϗεςΟϯάʹ ͍ͭͯ
47. લఏ৚݅ • ϩʔΧϧͰϏϧυ͢Δͱ੒Ռ෺͸׬શʹ੩తʹͰ͖Δ • S3ʹஔ͘͜ͱ͢ΒͰ͖Δ • `git push`ͷΈͰϏϧυΛؚΊͨσϓϩΠΛ׬͍݁ͤͨ͞৔߹ɺϗε ςΟϯάαʔϏεଆʹRubyͷ࣮ߦ؀ڥ͕ඞཁ • جຊతʹશ෦ແྉͰ͍͚Δ͸ͣ
48. ͓͓͘Β͕࢖ͬͨ͜ͱ͕͋Δ΋ͷʢશͯແྉʣ • GitHub Pages • మ൘ɺͨͩ͠एׯบ͕͋ΓɺͰ͖ͳ͍͜ͱ΋ଟ͍ • Netlify • ओʹSPAͷσϓϩΠʹ࢖ΘΕΔҹ৅͕ͩ੩తαΠτʹ΋े෼ • Cloud fl are Pages • CDN͕౰વࠐΈࠐΈɺҰ൪શ෦ೖΓʹ͍ۙҹ৅
49. ׆ൃͳ։ൃ ଟ༷ͳબ୒ࢶ
50. RubyͬΆ͍ʂ
51. ·ͱΊ
52. ·ͱΊ • ඞཁͳ΋ͷ͚ͩͰࡁΉ੩తαΠτ͸͍͍ͧ • Rubyʹ͸ͨ͘͞ΜͷSSG͕͋Δ • αΠτߏஙʹ͓͚Δͪΐͬͱͨ͠ϩδοΫΛॻ͘ͷʹRuby͸࠷ద