Bridgetown

Bridgetown Review and Features

Written by Arkadiusz Gorecki

Last update: 6/11/2024

FeatureBridgetown

Written in

Ruby

Template Language

The syntax or language used to define the layout and structure of web pages.

Liquid

Based on JS framework

Built-in module bundler

webpack

Static pages (SSG)

Dynamic pages (SSR)

Developer Experience

TypeScript support

Serverless Functions (API)

Small pieces of code that run on-demand without managing servers, typically used for API endpoints.

Focus on plugin system

Themes ecosystem

Hot reloading

The ability to instantly see changes in the browser without refreshing the page when developing.

Code Splitting

The ability of splitting code into smaller chunks to load them only when needed, improving performance.

Content Preview

Allows content editors to see live changes to draft content in a staging environment before it goes live.

Builit-in Optimizations

Third-party Script Optimization

Optimizing external scripts (like analytics or ads) to improve the performance and loading speed of your website.

Image Optimization

An option to disable runtime JS

For certain use cases, like static HTML + CSS websites where interactivity isn't needed, shipping JavaScript is unnecessary.
No runtime JS required by default

Critical CSS Extraction

Extracting only the CSS needed for the initial page load to improve performance.

Starters or examples with common use cases

Data fetching

Methods to fetch data from APIs or other sources, either at build time or runtime.

10+ Headless CMS examples

Authentication

Adding search

Ecommerce

Security

Regular security audits by external researchers

Environment Variables

Variables used to configure applications based on different environments (development, production).

Content Security Policy (CSP)

Community example

Bridgetown gets rid of all deprecated Jekyll configurations. It comes with a default configuration of Webpack to handle building and exporting frontend assets such as Javascript and Typescript, CSS/SCSS, and related files that are imported through Webpack (fonts, images, etc.)

Data Sources

Sourcing data is very straightforward in terms of local files. Default config comes with support for posts in _posts folder. What makes making blog-aware websites very fast.

To fetch data from an external source you need to know the basics of Ruby, as it required writing a function (plugin in fact) which will be run during the build process, for example:

class LoadPostsFromAPI < SiteBuilder
  def build
    get "https://domain.com/posts.json" do |data|
      data.each do |post|
        doc "#{post[:slug]}.md" do
          front_matter post
          categories post[:taxonomy][:category].map { |category| category[:slug] }
          date Bridgetown::Utils.parse_date(post[:date])
          content post[:body]
        end
      end
    end
  end
end

File structure

├── frontend
│		├── javascript
│		└── styles
├── node_modules
├── plugins
├── src
│		├── _components
│		├── _data
│		├── _layouts
│		├── _posts
│		├── 404.html
│		└── index.md
├── bridgetown.config.yml
├── Gemfile
├── Gemfile.lock
├── start.js
├── sync.js
├── yarn.lock
├── webpack.config.js
└── package.json

Ecosystem

One of the core features of Bridgetown is that it can be extended by custom plugins. Starting from fetching data from external API, adding support for new markup or template language to taking full control over the build process.

Bridgetown despite being very fresh, has a pretty lively Discord community. Everyone is welcome to ask questions or just chat.

Showcase

[@portabletext/react] Unknown block type "showcase", specify a component for it in the `components.types` prop

How to get started

First, you need to install Ruby, that's the harder step if you don't have installed. You can find here instructions on how to make it done.

Next, you can install Bridgetown

gem install bridgetown -N

To create a new Bridgetown website, run:

bridgetown new mysite

The build is a very simple process, you need to run only one command and the production bundle will be created in the "output" folder which can be later pushed to any static files hosting provider, eg: Netlify or Vercel.

Conclusion

Bridgetown is still way behind the competitors, but it's worth keeping an eye on. Especially, if you like Ruby. It's still in its early days but in the future, it can bring some fresh fruit.

[@portabletext/react] Unknown block type "prosCons", specify a component for it in the `components.types` prop