### Create and start a new Bridgetown site Source: https://www.bridgetownrb.com/docs/installation/macos Creates a new Bridgetown site, installs dependencies, and starts the live-reload development server. ```bash bridgetown new mysite cd mysite bin/bridgetown start ``` -------------------------------- ### Install Gem-based Plugin with Automation Source: https://www.bridgetownrb.com/docs/plugins Use a provided script to automate the installation of a gem-based plugin and its associated setup. ```bash bin/bridgetown apply https://github.com/bridgetownrb/bridgetown-cloudinary ``` -------------------------------- ### Install Mise Version Manager Source: https://www.bridgetownrb.com/docs/installation/windows Installs the Mise version manager by downloading and executing its installation script, then configures the bash environment to use Mise. ```bash curl https://mise.run | sh eval "$(~/.local/bin/mise activate bash)" >> ~/.bashrc source ~/.bashrc ``` -------------------------------- ### Install Lit Renderer Source: https://www.bridgetownrb.com/docs/components/lit Run this command to install the Lit library and the Lit Renderer plugin. ```bash bin/bridgetown configure lit ``` ```bash bridgetown new mysite -t erb -c lit ``` -------------------------------- ### SSR Initializer with Setup Block Source: https://www.bridgetownrb.com/docs/configuration/initializers Configure SSR with a `setup` block to run custom site setup code on first boot or file refresh during development. The `site` object is accessible within the block. ```ruby init :ssr do sessions true setup -> site do # access the site object, add data with `site.data`, whatever end end ``` -------------------------------- ### Install Ruby Dependencies Source: https://www.bridgetownrb.com/docs/installation/ubuntu Install the necessary dependencies required to compile and install Ruby. ```bash sudo apt-get install autoconf bison build-essential libssl-dev libyaml-dev libreadline6-dev zlib1g-dev libncurses5-dev libffi-dev libgdbm6 libgdbm-dev libdb-dev ``` -------------------------------- ### Preview Route Example Source: https://www.bridgetownrb.com/docs/routes This example demonstrates how to create a server-side route to preview content. It handles requests for `/preview/:collection/:path`, finds the content item, and renders it. If the content is empty, it returns a 404. ```APIDOC ## GET /preview/:collection/:path ### Description This route allows for server-side rendering of content items based on collection and path. It's useful for previewing content before it's statically generated. ### Method GET ### Endpoint `/preview/:collection/:path` ### Parameters #### Path Parameters - **collection** (String) - Required - The name of the collection to find the item in. - **path** (String) - Required - The path to the content item within the collection. ### Response #### Success Response (200) - **Bridgetown::Model::Base** - The rendered content item. #### Error Response (404) - **Bridgetown::Model::Base** - The content for the 404 page if the requested item is not found or empty. ``` -------------------------------- ### Start Bridgetown Development Server Source: https://www.bridgetownrb.com/docs Builds the site and starts a live-reload development server. Browse to http://localhost:4000 to view your site. ```bash bin/bridgetown start ``` -------------------------------- ### Install Node.js Source: https://www.bridgetownrb.com/docs/installation/ubuntu Install Node.js version 20.x using the NodeSource repository. ```bash curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - sudo apt-get update sudo apt-get install -y nodejs ``` -------------------------------- ### Install Node.js and Node-gyp Source: https://www.bridgetownrb.com/docs/installation/fedora Installs Node.js and its development headers using the dnf package manager. ```bash sudo dnf update sudo dnf install nodejs nodejs-devel ``` -------------------------------- ### Install and Import CSS Frameworks Source: https://www.bridgetownrb.com/docs/frontend-assets Install a CSS framework using npm and import its styles into your main Sass file. ```bash npm install name-of-css-framework ``` ```scss @use "~css-framework/css-framework"; ``` ```bash npm install bulma ``` ```scss @use "~bulma/bulma"; ``` ```bash npm install bootstrap ``` ```scss @use "~bootstrap/scss/bootstrap.scss"; ``` -------------------------------- ### Install Ruby with Homebrew Source: https://www.bridgetownrb.com/docs/installation/macos Installs Ruby directly using Homebrew. Ensure Homebrew is installed first. ```bash # Install Homebrew /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" brew install ruby ``` -------------------------------- ### Install and Set Ruby Version Source: https://www.bridgetownrb.com/docs/installation/ubuntu Install a specific Ruby version (e.g., 3.0.2) and set it as the global default. ```bash rbenv install 3.0.2 rbenv global 3.0.2 ruby -v > ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [aarch64-linux] ``` -------------------------------- ### Example Component File Structure Source: https://www.bridgetownrb.com/docs/components Illustrates a typical project structure for organizing different component types and their associated assets. ```tree .\n└── src\n └── _components\n ├── blog_entry.liquid\n ├── products\n │ ├── buy-now.lit.js\n │ ├── buying.rb\n │ ├── product-cart.lit.css\n │ └── product-cart.lit.js\n └── shared\n ├── navbar.erb\n ├── navbar.js\n ├── navbar.rb\n └── navbar.css ``` -------------------------------- ### Install Bundler Source: https://www.bridgetownrb.com/docs/installation/macos Installs the Bundler gem for managing Ruby dependencies. Use `--user-install` for user-specific installations. ```bash gem install --user-install bundler ``` -------------------------------- ### Install ruby-build Plugin Source: https://www.bridgetownrb.com/docs/installation/ubuntu Install the ruby-build plugin to enable easy Ruby version installation with rbenv. ```bash git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build ``` -------------------------------- ### Install Ruby from Fedora Repositories Source: https://www.bridgetownrb.com/docs/installation/fedora Installs the Ruby interpreter provided by the Fedora repositories. ```bash sudo dnf install ruby ``` -------------------------------- ### Configure Cypress for Testing Source: https://www.bridgetownrb.com/docs/bundled-configurations Installs and sets up Cypress for end-to-end browser-based testing. Refer to the automated testing guide for more information. ```bash bin/bridgetown configure cypress ``` -------------------------------- ### Create New Bridgetown Site Source: https://www.bridgetownrb.com/docs/installation/windows Creates a new Bridgetown project named 'mysite' and automatically runs bundle install and npm install to set up project dependencies. It then changes the directory into the new project. ```bash bridgetown new mysite cd mysite ``` -------------------------------- ### Install a Theme using Bundler Source: https://www.bridgetownrb.com/docs/themes Add a theme as a plugin to your Bridgetown site by running this command and updating your initializers file. ```bash bundle add really-cool-theme ``` -------------------------------- ### Install and set Ruby version with rbenv Source: https://www.bridgetownrb.com/docs/installation/macos Installs a specific Ruby version (e.g., 3.0.2) and sets it as the global default. Verifies the installation. ```bash rbenv install 3.0.2 rbenv global 3.0.2 ruby -v > ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [arm64-darwin20] ``` -------------------------------- ### Nginx Configuration for Bridgetown Site Source: https://www.bridgetownrb.com/docs/deployment Example Nginx configuration for serving a Bridgetown static site, including SSL setup and URL rewriting. ```nginx server { server_name bridgetown.example.com; index index.html; root /var/www/bridgetown/output; location / { rewrite ^(.+)/+$ $1 permanent; try_files $uri $uri/index.html $uri.html /index.html; access_log /var/www/bridgetown/shared/log/nginx.access.log; error_log /var/www/bridgetown/shared/log/nginx.error.log; } location ^~ /_bridgetown/ { gzip_static on; expires max; add_header Cache-Control public; } listen 443 ssl; # You can get a free SSL in https://freessl.cn or using let's encrypt certbot ssl_certificate /etc/ssl/certs/bridgetown.example.com.pem; ssl_certificate_key /etc/ssl/private/bridgetown.example.com.key; } server { if ($host = bridgetown.example.com) { return 301 https://$host$request_uri; } listen 80; server_name bridgetown.example.com; return 404; } ``` -------------------------------- ### Create a New Bridgetown Site Source: https://www.bridgetownrb.com/docs/installation/fedora Generates a new Bridgetown site in the 'mysite' directory and automatically runs bundle install and npm install. ```bash bridgetown new mysite cd mysite ``` -------------------------------- ### Install a Theme using Automation Source: https://www.bridgetownrb.com/docs/themes Apply a theme to your Bridgetown site by using the `bridgetown apply` command with the theme's repository URL. ```bash bin/bridgetown apply https://github.com/super-great-themes/theme-one ``` -------------------------------- ### Verify Node Installation Source: https://www.bridgetownrb.com/docs/installation/windows Checks the installed Node.js version to confirm successful installation and configuration. ```bash node --version ``` -------------------------------- ### Install Build Dependencies on Ubuntu Source: https://www.bridgetownrb.com/docs/installation/windows Installs essential development tools and libraries required for building software on Ubuntu, including compilers and development headers. ```bash sudo apt install build-essential rustc libssl-dev libyaml-dev zlib1g-dev libgmp-dev ``` -------------------------------- ### Multiple Contexts with `only` Source: https://www.bridgetownrb.com/docs/configuration/initializers Applies configuration settings to multiple specified contexts. This example targets both static builds and the server process. ```ruby only :static, :server do puts "I get run for both static builds and the server process, but not for the console or Rake tasks." end ``` -------------------------------- ### Install and Set Ruby Version with rbenv Source: https://www.bridgetownrb.com/docs/installation/fedora Installs Ruby version 3.0.2 using rbenv and sets it as the global default. Also installs the bundler gem. ```bash rbenv install 3.0.2 rbenv global 3.0.2 ruby -v > ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [x86_64-linux] gem install bundler -N ``` -------------------------------- ### Example Liquid Component Structure Source: https://www.bridgetownrb.com/docs/components/liquid This is an example of how a Liquid component file (`src/_components/sections/aside.liquid`) might be structured, using variables passed to it. ```liquid {% assign typeclass = "sidebar-default" %} {%- if type == "important" %} {% assign typeclass = "sidebar-important" %} {% endif %} ``` -------------------------------- ### Configure Web Awesome Source: https://www.bridgetownrb.com/docs/bundled-configurations Installs Web Awesome for a design system and UI component library. Individual components can be imported into `./frontend/javascript/index.js`. ```bash bin/bridgetown configure webawesome ``` -------------------------------- ### Run Cypress Tests with Server Source: https://www.bridgetownrb.com/docs/testing Starts the Bridgetown server and opens the Cypress test runner for integrated testing. ```bash # Starts the Bridgetown server and opens the Cypress test runner. bin/bridgetown cy:test ``` -------------------------------- ### Install Bundler Gem Source: https://www.bridgetownrb.com/docs/installation/fedora Installs the bundler gem, which manages project dependencies. ```bash gem install bundler ``` -------------------------------- ### Verify Node.js Installation Source: https://www.bridgetownrb.com/docs/installation/fedora Checks the installed Node.js version. ```bash node -v > v20.x ``` -------------------------------- ### Verify Ruby Installation Source: https://www.bridgetownrb.com/docs/installation/fedora Checks the installed Ruby version. ```bash ruby -v > ruby 2.6.6p146 (2020-03-31 revision 67876) [x86_64-linux] ``` -------------------------------- ### Configure Cypress for Bridgetown Source: https://www.bridgetownrb.com/docs/testing Run this command to install Cypress and add a `cypress/` directory to your project. ```bash bin/bridgetown configure cypress ``` -------------------------------- ### Verify Node.js installation Source: https://www.bridgetownrb.com/docs/installation/macos Checks the installed Node.js version. ```bash node -v ``` -------------------------------- ### Install Node.js with Homebrew Source: https://www.bridgetownrb.com/docs/installation/macos Updates Homebrew and installs Node.js, a JavaScript runtime essential for frontend asset compilation. ```bash brew update brew install node ``` -------------------------------- ### Data File Example for Prototype Integration Source: https://www.bridgetownrb.com/docs/prototype-pages An example data file ('authors.yml') used with prototype pages to provide additional information about authors, such as their name and Mastodon handle. ```yaml jared: name: Jared White mastodon: jaredwhite@indieweb.social ``` -------------------------------- ### Install Ubuntu on Windows Source: https://www.bridgetownrb.com/docs/installation/windows Installs Ubuntu 24.04 LTS as a Linux distribution using the Windows Subsystem for Linux. A restart may be required after execution. ```bash wsl --install --distribution Ubuntu-24.04 ``` -------------------------------- ### Configure Plugin with Keyword Arguments Source: https://www.bridgetownrb.com/docs/plugins Users can pass keyword arguments from their `initializers.rb` to configure plugin settings, such as an API key. This example shows how to set the `api_key` parameter. ```ruby Bridgetown.configure do |config| init :my_nifty_plugin do api_key "some-api-key" end end ``` -------------------------------- ### Install Homebrew and rbenv Source: https://www.bridgetownrb.com/docs/installation/macos Installs Homebrew and rbenv for managing Ruby versions. Restart your terminal after running these commands. ```bash /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" brew install rbenv rbenv init ``` -------------------------------- ### Configure Open Props Source: https://www.bridgetownrb.com/docs/bundled-configurations Installs Open Props, a collection of "supercharged CSS variables" and an optional normalize stylesheet for creating a design system. ```bash bin/bridgetown configure open-props ``` -------------------------------- ### Install the `` Web Component Source: https://www.bridgetownrb.com/docs/islands Run this command to add the `` web component, which enables lazy loading of islands, to your main JavaScript bundle. ```bash bin/bridgetown configure is-land ``` -------------------------------- ### Install Latest Node 24.x with Mise Source: https://www.bridgetownrb.com/docs/installation/windows Installs the latest available Node.js version within the 24.x series using Mise and sets it as the global default. This ensures a compatible Node.js environment for Bridgetown. ```bash mise use --global node@24 ``` -------------------------------- ### Using Custom Refinements Source: https://www.bridgetownrb.com/docs/plugins/foundation-gem Example of how to use a custom refinement that has been added to Foundation. This demonstrates calling the `add` method defined in the `Adding` refinement. ```ruby class AddNumbers using Bridgetown::Refinements def initialize(num) = @num = num def together(new_num) = @num.add new_num end AddNumbers.new(10).together(15) # 25 ``` -------------------------------- ### Bridgetown Build and Serve Commands Source: https://www.bridgetownrb.com/docs/migrating/jekyll Use these commands to build your site for production or start a local development server. The `BRIDGETOWN_ENV` variable is crucial for deployment builds. ```bash bin/bridgetown build bin/bt b ``` ```bash bin/bridgetown start bin/bt s ``` ```bash BRIDGETOWN_ENV=production bin/bridgetown deploy ``` -------------------------------- ### Add Bridgetown Plugin and Update Configuration Source: https://www.bridgetownrb.com/docs/automations This automation installs a Bridgetown plugin, prompts the user for configuration details, and appends them to `bridgetown.config.yml`. ```ruby say_status "Cloudinary", "Installing the bridgetown-cloudinary plugin..." cloud_name = ask("What's your Cloudinary cloud name?") add_bridgetown_plugin "bridgetown-cloudinary" append_to_file "bridgetown.config.yml" do <<~YAML cloudinary: cloud_name: #{cloud_name} YAML end ``` -------------------------------- ### Example Liquid Component Source: https://www.bridgetownrb.com/docs/template-engines/erb-and-beyond A simple Liquid component that displays a passed parameter. ```liquid

{{ param }}

``` -------------------------------- ### Low-level Boot Customization with Bundler Setup Source: https://www.bridgetownrb.com/docs/configuration/initializers Add a `config/boot.rb` file to run Ruby code at the earliest possible moment during `bridgetown` executable startup. Ensure Bundler is set up correctly. ```ruby # Normally the following is run automatically, so by adding config/boot.rb, you should include # this Bundler setup: Bundler.setup(:default, Bridgetown.env) # Now you can require a gem which adds a command to `bridgetown` via Samovar: require "some_gem_here" # Or require your own Ruby file: require_relative "../ruby_code_file.rb" ``` -------------------------------- ### Create a New Collection with Custom Layout Source: https://www.bridgetownrb.com/docs/plugins/external-apis You can create new collections on the fly and use existing layouts. This example creates a 'blogish' collection for a fake blog post. ```ruby add_resource :blogish, "fake-blog-post.html" do layout :post title "I'm a blog post…sort of" date "2020-05-17" content "

I might look like a blog post, but I'm not!

" end ``` -------------------------------- ### Configure Tutorials Collection with Custom Metadata (YAML) Source: https://www.bridgetownrb.com/docs/collections Define a 'tutorials' collection with output enabled and custom metadata 'name' in Bridgetown's configuration using YAML. ```yaml collections: tutorials: output: true name: Terrific Tutorials ``` -------------------------------- ### Use Tag with Instance Method Source: https://www.bridgetownrb.com/docs/plugins/tags Example of using the `upcase` tag block, which converts its content to uppercase. ```html {% upcase %} i am upper case {% endupcase %} ``` -------------------------------- ### Access Convertible Object in Converter Source: https://www.bridgetownrb.com/docs/plugins/converters This example shows how to access the `convertible` object within the `convert` method to get more context about the file being processed. This allows you to include information about the source document or layout in the converted output. ```ruby def convert(content, convertible) content + " — brought to you by the #{convertible.class} object." end ``` -------------------------------- ### Configure Bridgetown PostCSS Plugins Source: https://www.bridgetownrb.com/docs/bundled-configurations Installs and configures recommended PostCSS plugins, including `postcss-mixins`, `postcss-color-mod-function`, `cssnano`, and `postcss-preset-env`. This overwrites your `postcss.config.js` file. ```bash bin/bridgetown configure bt-postcss ``` -------------------------------- ### Configure Tutorials Collection with Custom Metadata (Ruby) Source: https://www.bridgetownrb.com/docs/collections Define a 'tutorials' collection with output enabled and custom metadata 'name' in Bridgetown's configuration using Ruby. ```ruby Bridgetown.configure do collections do tutorials do output true name "Terrific Tutorials" end end end ``` -------------------------------- ### Previewing Unpublished Content Source: https://www.bridgetownrb.com/docs/migrating/jekyll To preview content marked as unpublished locally, use the `--unpublished` or `-U` command-line option when starting the server. ```bash bin/bridgetown start --unpublished ``` -------------------------------- ### Create a Local Custom Plugin with SiteBuilder Source: https://www.bridgetownrb.com/docs/plugins Define a local custom plugin by subclassing `SiteBuilder` and implementing the `build` method. This example registers a Liquid tag. ```ruby # plugins/builders/add_some_tags.rb class Builders::AddSomeTags < SiteBuilder def build liquid_tag "cool_stuff", :cool_tag end def cool_tag(attributes, tag) "This is so cool!" end end ``` -------------------------------- ### Install ruby-build Plugin for rbenv Source: https://www.bridgetownrb.com/docs/installation/fedora Installs the ruby-build plugin for rbenv, enabling the installation of different Ruby versions. ```bash git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc source ~/.bashrc ``` -------------------------------- ### Load Site Configuration and Initialize Site Object Source: https://www.bridgetownrb.com/docs/plugins/commands Use the ConfigurationOverridable mixin to load site configuration, potentially overriding settings with command-line options. Then, initialize a Bridgetown::Site object and optionally run its setup hooks and read/generate content. ```ruby config = configuration_with_overrides(options) config.run_initializers! context: :static site = Bridgetown::Site.new(config) # optionally run setup hooks and read in content if needed: site.reset site.read site.generate ``` -------------------------------- ### Install Bridgetown Gem Source: https://www.bridgetownrb.com/docs Installs the Bridgetown gem and its dependencies. Use the -N flag to install all necessary gems. ```ruby gem install bridgetown -N ``` -------------------------------- ### Basic Roda App Configuration in Bridgetown Source: https://www.bridgetownrb.com/docs/roda This is the default Roda application setup in Bridgetown, integrating the bridgetown_server plugin and Bridgetown's routing system. ```ruby class RodaApp < Roda plugin :bridgetown_server route do |r| r.bridgetown end end ``` -------------------------------- ### Configure Static Site Deployment on Dokku Source: https://www.bridgetownrb.com/docs/deployment Create an empty .static file to indicate a static site deployment for Dokku. ```text .static ``` -------------------------------- ### Create First Island Entrypoint (breezy.js) Source: https://www.bridgetownrb.com/docs/islands Define your first island component in `src/_islands/breezy.js`. This JavaScript file and its imports are self-contained and not bundled with your main JavaScript. ```javascript class BreezyDay extends HTMLElement { static { customElements.define("breezy-day", this) } connectedCallback() { this.textContent = "Welcome to your first island." } } ``` -------------------------------- ### Apply Automation to New Site Source: https://www.bridgetownrb.com/docs/automations Use the `--apply` or `-a` flag with `bridgetown new` to apply an automation script during site creation. ```bash bridgetown new mysite --apply=/path/to/automation.rb ``` -------------------------------- ### Copy Plugin Layouts to Site Source: https://www.bridgetownrb.com/docs/commands/plugins An example of using `bridgetown plugins cd` to copy all layouts from a plugin's `Layouts` directory into your site's `src/_layouts` folder. Remember to type `exit` when finished. ```bash bridgetown plugins cd AwesomePlugin/Layouts cp -r * $BRIDGETOWN_SITE/src/_layouts exit ``` -------------------------------- ### Create Initializers File for New Configuration Format Source: https://www.bridgetownrb.com/docs/installation/upgrade Create this file to opt into the new configuration format and disable legacy mode. This file replaces the need for the `bridgetown_plugins` Gemfile group. ```ruby Bridgetown.configure do |config|\n # add configuration here\nend ``` -------------------------------- ### Apply Automation to Existing Site Source: https://www.bridgetownrb.com/docs/automations Use the `bin/bridgetown apply` command to run an automation script on an existing site. ```bash bin/bridgetown apply /path/to/automation.rb ``` -------------------------------- ### Install Fedora Dependencies for Ruby Source: https://www.bridgetownrb.com/docs/installation/fedora Installs necessary development tools and libraries required for Ruby compilation on Fedora. ```bash sudo dnf install git-core zlib zlib-devel gcc-c++ patch readline readline-devel libyaml-devel libffi-devel openssl-devel make bzip2 autoconf automake libtool bison curl sqlite-devel ``` -------------------------------- ### Add Query String Parameters to GET Request Source: https://www.bridgetownrb.com/docs/plugins/external-apis Pass query string parameters to the GET request endpoint using keyword arguments. ```ruby def build get "https://example.com", test: 123 do |data| # data from https://example.com?test=123 end end ``` -------------------------------- ### Configure Bridgetown with Initializers Source: https://www.bridgetownrb.com/docs/configuration The `config/initializers.rb` file allows for expressive configuration using Ruby, including environment-specific settings and plugin initialization. ```ruby Bridgetown.configure do |config| init :dotenv config.autoload_paths << "jobs" url "https://www.bridgetownrb.com" permalink "pretty" timezone "America/Los_Angeles" template_engine "serbea" collections do docs do output true permalink "/:collection/:path.*" name "Documentation" end end if Bridgetown.env.development? unpublished true end only :server do init :mail, password: ENV["SENDGRID_API_KEY"] end end ``` -------------------------------- ### Make a GET Request and Store Data Source: https://www.bridgetownrb.com/docs/plugins/external-apis Make a GET request within a site hook and store the parsed JSON data in `site.data`. ```ruby def build hook :site, :post_read do get url do |data| site.data[:remote_api_info] = data end end end ``` -------------------------------- ### Initialize SSR and Routes Plugins with Initializers Source: https://www.bridgetownrb.com/docs/installation/upgrade Replace `plugin` statements in `server/roda_app.rb` with `init` statements in the initializers file for SSR and dynamic routes plugins. ```ruby Bridgetown.configure do |config|\n init :ssr\n init :"bridgetown-routes"\nend ``` -------------------------------- ### Configure Minitesting for Bridgetown Source: https://www.bridgetownrb.com/docs/testing Run this command to add Minitest and RackTest gems and set up the test environment. ```bash bin/bridgetown configure minitesting ``` -------------------------------- ### Front Matter Example for Post Metadata Source: https://www.bridgetownrb.com/docs/first-steps-for-newbies Example of front matter for a post, defining metadata like order, title, section, description, and category. This data can be accessed via `post.data`. ```yaml --- order: 45 title: First Steps for Newbies top_section: Setup description: If Bridgetown is your first web framework category: first-steps --- ``` -------------------------------- ### Initialize SSR and Dynamic Routes Source: https://www.bridgetownrb.com/docs/configuration/initializers Use the `init` command to enable Bridgetown's Server-Side Rendering (SSR) and dynamic routing features. The `dotenv` initializer is also recommended. ```ruby init :ssr, sessions: true # the dotenv initializer is also recommended, more on that below # optional: init :"bridgetown-routes" ``` -------------------------------- ### Install Latest Ruby 3.x with Mise Source: https://www.bridgetownrb.com/docs/installation/windows Installs the latest available Ruby version within the 3.x series using Mise and sets it as the global default. This command ensures a compatible Ruby environment for Bridgetown. ```bash mise use --global ruby@3 ``` -------------------------------- ### Verify rbenv Installation Source: https://www.bridgetownrb.com/docs/installation/ubuntu Check if the rbenv command is recognized by your shell. ```bash type rbenv ``` -------------------------------- ### Apply Default Automation Source: https://www.bridgetownrb.com/docs/automations If no automation file is specified, `bin/bridgetown apply` looks for `bridgetown.automation.rb` in the current directory. ```bash vim bridgetown.automation.rb # save an automation script bin/bridgetown apply ``` -------------------------------- ### Update Package List Source: https://www.bridgetownrb.com/docs/installation/ubuntu Update your system's package list before installing new software. ```bash sudo apt update ``` -------------------------------- ### Configure Custom Taxonomy in Bridgetown Config Source: https://www.bridgetownrb.com/docs/resources Example of configuring a custom 'genre' taxonomy in the `bridgetown.config.yml` file. ```yaml # bridgetown.config.yml taxonomies: genre: key: genres title: "Musical Genre" other_metadata: "can go here!" ``` -------------------------------- ### Setup Primer Builder in Bridgetown Source: https://www.bridgetownrb.com/docs/components/view-component This Ruby code sets up a SiteBuilder to load Primer View Components, configure Zeitwerk for autoloading, and ensure Primer's engine configuration is applied to the Rails shim. It's designed to run only once in Bridgetown's watch mode. ```ruby require "action_dispatch" require "rails/engine" require "primer/view_components/engine" class Builders::PrimerBuilder < SiteBuilder def build site.config.loaded_primer ||= begin primer_loader = Zeitwerk::Loader.new Primer::ViewComponents::Engine.config.eager_load_paths.each do |path| primer_loader.push_dir path end primer_loader.setup Rails.application.config = Primer::ViewComponents::Engine.config true end end end ``` -------------------------------- ### Define Taxonomy Front Matter Source: https://www.bridgetownrb.com/docs/resources Example of how to define categories and tags using front matter in Bridgetown resources. ```yaml categories: - category 1 - another category 2 tags: - blessed - super awesome ``` -------------------------------- ### Enable Liquid Profiling Source: https://www.bridgetownrb.com/docs/configuration/options Use the `--profile` flag or set `profile: BOOL` to generate a Liquid rendering profile for performance analysis. ```bash profile: BOOL --profile ``` -------------------------------- ### Variable Interpolation in Translations (ERB) Source: https://www.bridgetownrb.com/docs/internationalization Pass variables to the `t` helper to interpolate values into translations, as shown in this ERB example. ```erb <%= t("products.price", price: resource.data.price) %> ``` -------------------------------- ### Configure Lit Source: https://www.bridgetownrb.com/docs/bundled-configurations Sets up Lit, the Lit SSR Renderer plugin, and includes an example component. Lit components are native web components ideal for shareable components and sites. ```bash bin/bridgetown configure lit ``` -------------------------------- ### Change Directory Source: https://www.bridgetownrb.com/docs Navigates into the newly created Bridgetown site directory. ```bash cd mysite ``` -------------------------------- ### Create File Automation Source: https://www.bridgetownrb.com/docs/automations This automation script creates a new file named `netlify.toml` with specified build configurations. ```ruby create_file "netlify.toml" do <<~NETLIFY [build] command = "bin/bridgetown deploy" publish = "output" [build.environment] NODE_VERSION = "22" [context.production.environment] BRIDGETOWN_ENV = "production" NETLIFY end ``` -------------------------------- ### Dockerfile for Static Bridgetown Site Deployment Source: https://www.bridgetownrb.com/docs/deployment This Dockerfile builds a production-ready static version of your Bridgetown site. It uses a multi-stage build process, first compiling the site with Ruby and Node.js, then serving the output using a lightweight HTTP server. ```dockerfile FROM combos/ruby_node:3_22 AS builder ENV BRIDGETOWN_ENV=production WORKDIR /opt/src COPY . . RUN bundle install && npm install && bundle exec bridgetown deploy FROM lipanski/docker-static-website:latest COPY --from=builder /opt/src/output . CMD ["/busybox-httpd", "-f", "-v", "-p", "4000"] ``` -------------------------------- ### Define a Navbar Liquid Component Source: https://www.bridgetownrb.com/docs/components/liquid This is an example of a Liquid component definition for a navbar, using placeholders for logo and navigation items. ```liquid ``` -------------------------------- ### Configure GitHub Pages Deployment Source: https://www.bridgetownrb.com/docs/bundled-configurations Sets up a GitHub Action for hosting your Bridgetown site directly on GitHub. Ensure your `base_path` is configured correctly after running this command. ```bash bin/bridgetown configure gh-pages ``` -------------------------------- ### Configure Bridgetown with Initializers Source: https://www.bridgetownrb.com/docs/configuration/initializers Use the `Bridgetown.configure` block to set options, load initializers, and define context-specific configurations. This is the primary way to customize your site's behavior. ```ruby Bridgetown.configure do |config| init :dotenv config.autoload_paths << "jobs" init :ssr do sessions true setup -> site do # perform site setup tasks only in the server context end end init :"bridgetown-routes" # you can configure site settings here just like you would in bridgetown.config.yml permalink "pretty" timezone "America/Los_Angeles" # some initializers accept additional options init :stripe, api_key: ENV["STRIPE_API_KEY"] only :server do # code which runs only in server context init :parse_routes # you can also provide initializer options in block DSL form: init :mail do password ENV["SENDGRID_API_KEY"] end end only :static, :console do # code which runs only in static and console contexts end only :rake do # code which runs only in the Rake context end except :static, :console do # you can define hooks within your initializers file: hook :site, :after_init do |site| # runs after a site is initialized in server, Rake, etc. contexts, but not static or console end end end Bridgetown.initializer :stripe do |api_key:| Bridgetown.logger.info "Stripe:", "Setting the API key" Stripe.api_key = api_key end ``` -------------------------------- ### Define Product Report Route Source: https://www.bridgetownrb.com/docs/routes Defines a GET route for /reports/:id that captures an integer ID and maps it to a controller. ```ruby class Routes::Reports < Bridgetown::Rack::Routes route do |r| r.on "reports" do # route: /reports/:id r.get Integer do |id| Controllers::Reports::Show.new(id:) end end end end ``` -------------------------------- ### Get All Descendants of a Class Source: https://www.bridgetownrb.com/docs/plugins/foundation-gem The `descendants` class method returns a flattened array of all named, globally accessible descendants of a class. ```ruby MyClass.descendants ``` -------------------------------- ### Copy Theme Files to Site Repo Source: https://www.bridgetownrb.com/docs/themes Use the `bridgetown plugins cd` command to copy files from a theme into your site's repository directly. ```bash bridgetown plugins cd ``` -------------------------------- ### Switch from Yarn to NPM Source: https://www.bridgetownrb.com/docs/installation/upgrade To switch to NPM as your default package manager, delete `yarn.lock`, run `npm install`, and commit `package-lock.json`. ```bash npm install ``` -------------------------------- ### Context-Specific Configuration (Except Static) Source: https://www.bridgetownrb.com/docs/configuration/initializers Applies configuration settings to all contexts except for static builds. Use `except` to exclude specific initialization contexts. ```ruby except :static do puts "I get run for any context other than a static build!" end ``` -------------------------------- ### Layout Variables Example Source: https://www.bridgetownrb.com/docs/layouts Shows how to set and access variables within a layout's front matter using the `layout` variable. This allows for dynamic content within the layout itself. ```liquid --- city: San Francisco ---

{{ layout.data.city }}

{{ content }} ``` -------------------------------- ### Build Movie Collection Layout with ERB Source: https://www.bridgetownrb.com/docs/resources Example of an ERB layout for a movie collection, demonstrating how to display resource data and relations. ```html

<%= resource.data.name %> (<%= resource.data.year %>)

<%= resource.data.description %>

Starring:

Released by <%= link_to resource.relations.studio.name, resource.relations.studio %>

``` -------------------------------- ### Configure Resource Relations in Bridgetown Config Source: https://www.bridgetownrb.com/docs/resources Example of configuring one-to-many and many-to-one resource relations between 'actors', 'movies', and 'studios' collections. ```yaml collections: actors: output: true relations: has_many: movies movies: output: true relations: belongs_to: - actors - studio studios: output: true relations: has_many: movies ``` -------------------------------- ### Use Custom Taxonomy in Resource Front Matter Source: https://www.bridgetownrb.com/docs/resources Example of assigning values to a custom 'genres' taxonomy in resource front matter. ```yaml genres: - Jazz - Big Band ``` -------------------------------- ### Navigate to Plugin Source Directory Source: https://www.bridgetownrb.com/docs/commands/plugins Use `bridgetown plugins cd /` to enter a temporary shell within a plugin's source folder. This is useful for accessing and copying plugin-provided content like layouts or components. ```bash bridgetown plugins cd / ``` -------------------------------- ### Add Resource to a Collection Source: https://www.bridgetownrb.com/docs/plugins/external-apis Use `add_resource` to save a resource in any collection, even custom ones. This example adds an author resource. ```ruby add_resource :authors, "rlstevenson.md" do name "Robert Louis Stevenson" born 1850 nationality "Scottish" end ```