Developing static sites with Ruby

Transcript

1. RubyͰ࡞Δ੩తαΠτ ๺཮Rubyձٞ01 OKURA Masafumi, 2025-12-06

2. self.introduce • ໊લɿ͓͓͘Β·͞;Έʢେ૔խ࢙ʣ • ॴଐɿϑϦʔϥϯε • ׆ಈɿKaigi on RailsνʔϑΦʔΨφΠβʔɺOSSʢAlbaͳͲʣɺ֤छ ొஃɺϙουΩϟετʢOH!

   MY RUBYISTSʣ
3. None
4. None

5. ͓͠ͳ͕͖ 1. ੩తαΠτͱ͸ɺͳͥඞཁͳͷ͔ 2. RubyΤίγεςϜʹ͓͚Δ੩తαΠτδΣωϨʔλʔʢSSGʣͷൺ ֱ 3. ͳͥRubyͳͷ͔

6. 1. ੩తαΠτͱ͸ɺ ͳͥඞཁͳͷ͔

7. ੩తαΠτ

8. None

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
31. None

32. ׆ൃͳ։ൃ ଟ༷ͳબ୒ࢶ

33. RubyͬΆ͍ʂ

34. 3. ͳͥRubyͳͷ͔

35. ຊ౰ʹඞཁͳ΋ͷʢ࠶ܝʣ • ϨΠΞ΢τ • HTMLʹม׵Ͱ͖Δ΋ͷʢMarkdown΍LiquidͳͲʣ • ͪΐͬͱͨ͠ϩδοΫ • ͋Δσʔλιʔε͔Βෳ਺ϖʔδΛੜ੒͢ΔͳͲ •

    গ͠ͷJavaScript • Ϗϧυπʔϧ

36. ຊ౰ʹඞཁͳ΋ͷʢ࠶ܝʣ • ϨΠΞ΢τ • HTMLʹม׵Ͱ͖Δ΋ͷʢMarkdown΍LiquidͳͲʣ • ͪΐͬͱͨ͠ϩδοΫ • ͋Δσʔλιʔε͔Βෳ਺ϖʔδΛੜ੒͢ΔͳͲ •

    গ͠ͷJavaScript • Ϗϧυπʔϧ

37. ͪΐͬͱͨ͠ ϩδοΫ

38. …Λॻ͘ݴޠ

39. εΫϦϓτݴޠ

40. Ruby

41. None
42. None

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͸࠷ద