Learn Enough Bridgetown to be Dangerous

Bridgetown is the future of building static and progressive websites with Ruby, and the future is now! We will look at the current landscape of static site generators and how the industry is evolving as Server Side Rendering and Dynamic Rendering become more popular. We will also look at other Ruby based static site generators to see what the other options are and why you should choose Bridgetown.

Transcript

1. Welcome 👋
2. Andrew Mason
3. @andrewmcodes https://andrewm.codes
4. .com
6. Learn Enough Bridgetown to be dangerous
8. 👨💻
10. What I Didn't Know
11. Static Site Generators
12. Cloud f lare A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates.
13. Jekyll
14. JAMstack
18. Bridgetown is born
19. I ❤ Bridgetown
20. What is Bridgetown?
21. www.bridgetownrb.com A next-generation, progressive site generator & fullstack framework, powered by Ruby.
22. Terminology ▪ SSR: known as Server-Side Rendering, this is where your HTML is not pre- built as static f iles, but where you render HTML in real-time before delivering it to the browser. ▪ CSR: known as Client-Side Rendering, this is where JavaScript libraries manipulate the DOM of the webpage based on user interactivity and API calls to backend or third-party services. ▪ Partial Hydration: this is essentially a hybrid of the two approaches. You start f irst with some combination of SSG & SSR, then “hydrate” certain components on the frontend to handle interactivity only if and when it’s needed.
23. Next-generation
24. progressive site generator
25. fullstack framework
26. Powered by Ruby
27. Let's Build a Blog
28. gem install bridgetown
29. Template Engine
30. Liquid Default Option
31. ERB Recommended Option
32. Serbea Additional Options
35. Resources
37. Frontmatter
39. Collections
41. Layouts
43. Pagination
45. Taxonomies
47. Components
49. Data
51. Turbocharge with Bundled Con f igurations
52. • Turbo • Stimulus • Lit • Shoelace • Open Props • Ruby2JS • PostCSS • Tailwind CSS • Render Con f ig • Netlify Con f ig • Vercel con f ig • GitHub Pages con f ig • Minitest • Cypress
54. Plugins & Automations
56. Add Tailwind CSS
58. Modern Frontend Powered by ESbuild
60. Advanced Ruby
61. Inspectors
63. Generators
64. Web Components
65. ViewComponents
66. I18n
67. Last Step
68. bin/bridgetown deploy
69. Why Bridgetown?
70. Productivity
71. Ruby
72. Community
73. Go forth and build!
74. Thank You • @andrewmcodes • https://andrewm.codes • Remote Ruby & Ruby for All Podcasts • Ruby Radar Newsletter • Podia!