Documentation Setup

Bundled Configurations

Bridgetown bundles a number of automation scripts to set up common project configurations. You can run these scripts using bin/bridgetown configure [CONFIGURATION]

The configurations we include are:

The full list of configurations can also be seen by running bridgetown configure without arguments.

Bundled configurations can also be run while creating a new Bridgetown project using the --configure= or -c flag and passing in a comma-separated list of configurations.

bridgetown new my_project -c turbo,purgecss

Configuration Setup Details

Turbo

⚙️ Adds and configures Turbo.

🛠 Configure using:

bin/bridgetown configure turbo

An optional script (turbo_transitions.js) is provided to add transition animation to Turbo navigation. If you don’t wish to use any transition animations, you’re welcome to delete the file. You can also edit the script to adjust the animation style or change the element being animated from <main> to whatever you prefer.

It is recommended you add the data-turbo-track="reload" attribute to the script and CSS link tags in your HTML head. This will allow Turbo to perform a full page reload any time newly-deployed assets are available.

Stimulus

⚙️ Sets up Stimulus and adds an example controller.

🛠 Configure using:

bin/bridgetown configure stimulus

TailwindCSS

🍃 Adds TailwindCSS with an empty configuration along with PurgeCSS.

Please be aware that you need to have PostCSS installed to run this configuration.

This configuration will overwrite any existing postcss.config.js file.

🛠 Configure using:

bin/bridgetown configure tailwindcss

PurgeCSS Post-Build Hook

🧼 Adds a builder plugin which runs PurgeCSS against the output HTML + frontend JavaScript and produces a much smaller CSS output bundle for sites which use large CSS frameworks.

🛠 Configure using:

bin/bridgetown configure purgecss

⛓️ Installs and configures a set of PostCSS plugins recommended by the Bridgetown community:

It will also configure postcss-preset-env to polyfill all features at stage 2 and above. If you don’t need certain polyfills for your use case, you can bump up stage to 3 or 4 (for example, custom properties won’t get polyfilled if stage is set to 4). nesting-rules and custom-media-queries are explicitly enabled.

This configuration will overwrite your postcss.config.js file.

🛠 Configure using:

bin/bridgetown configure bt-postcss

If you’d like to customize your setup further you can find more plugins here.

Render YAML Configuration

⚙️ Adds a static site service defined in YAML to your site for use in Render deployments.

🛠 Configure using:

bin/bridgetown configure render

Netlify TOML Configuration

⚙️ Adds a basic configuration to your site for use in Netlify deployments.

🛠 Configure using:

bin/bridgetown configure netlify

Vercel JSON Configuration

⚙️ Adds a basic configuration to your site for use in Vercel deployments along with a builder to ensure Bridgetown uses the correct absolute_url on preview deployments.

🛠 Configure using:

bin/bridgetown configure vercel

GitHub Pages Configuration

⚙️ Sets up a GitHub Action so you can host your Bridgetown site directly on GitHub.

Make sure you follow the provided instructions after you run this command so your base_path is configured correctly.

🛠 Configure using:

bin/bridgetown configure gh-pages

Automated Test Suite using Minitest

⚙️ Adds a basic test suite using Minitest and Rails DOM assertions for extremely fast verification of your output HTML. Check out our automated testing guide for more info!

🛠 Configure using:

bin/bridgetown configure minitesting

Cypress

⚙️ Installs and sets up Cypress for browser based end-to-end testing. Check out our automated testing guide for more info!

🛠 Configure using:

bin/bridgetown configure cypress

Command Line Usage