Manual Installation

If you’ve already used the automated Willamette installer, you can skip this section. Otherwise, keep reading to see how you can integrate Willamette into your Bridgetown project manually.

Install the Gem and NPM Package #

Run the following commands in your project:

bundle add nokolexbor
bundle add willamette
npm install willamette

This installs the nokolexbor gem (used for Bridgetown’s HTML Inspectors functionality), as well as Willamette’s Ruby and frontend CSS/JS code packages.

Configure the Project #

Next, you’ll need to update your config/initializers.rb file to set up Willamette. Add the following to your config:

html_inspector_parser "nokolexbor"

# no need to add this block if you've previously enabled pagination in your project
pagination do
  enabled true
end

init :willamette

You can add additional settings to the Willamette initializer, see the Customizing Your Theme docs for further details.

Enrich the Frontend #

You’ll need to load in the Willamette theme’s JavaScript initialization and included Web Awesome components. Update your frontend/javascript/index.js file with the following:

import Willamette from "willamette"

Willamette.init()

Similarly, update your frontend/styles/index.jss file to load in the Willamette & Web Awesome styles:

@import "@awesome.me/webawesome/dist/styles/webawesome.css";
@import "willamette/frontend/styles/theme.css";

That’s all you need in your stylesheet to start. From there, you might add additional CSS Variables to a :root scope to customize the design of the site, as well as further rulesets.

Add Willamette Templates #

Finally, you’ll need to update the components & templates which ordinarily ship in a basic Bridgetown project.

These updates are contained within the various automation files in the Willamette repo, namely components.automation.rb and layouts.automation.rb.

You’ll have to follow the logic of the file operations and copy out the text to the relevant files. Alternatively, you can add a new bridgetown.automation.rb file to your project root, copy the Ruby-based Freyia automations to that file, then run bin/bt apply.

Once you’ve completed this step, you should be able to run bin/bt s and verify you have a fully working Bridgetown + Willamette website!