Folder Structure
The typical folder structure for a Bridgetown site usually looks something like this:
.
├── config # this is where frontend and server defaults are stored
├── frontend # this is where you put your CSS and JS for esbuild/Webpack
│ ├── javascript
│ │ ├── index.js
│ │ └── widget.js
│ ├── styles
│ │ ├── index.css
│ └ └── layout.css
├── server # this is where you can (optionally) add API routes using Roda
├── src # this is where you put your resources and design templates
│ ├── _components
│ │ ├── footer.liquid
│ │ └── header.liquid
│ ├── _data
│ │ ├── members.yml
│ │ └── site_metadata.yml
│ ├── _layouts
│ │ ├── default.erb
│ │ └── post.serb
│ ├── _posts
│ │ ├── 2021-09-18-enjoying-the-celebration.md
│ │ └── 2022-04-07-checking-out-bridgetown-now.md
│ ├── images
│ │ └── logo.svg
│ ├── 404.html
│ ├── some_page.md
│ └── index.html # or index.md
├── output # this is the generated site after build process
├── plugins # this is where you can write custom plugins
├── bridgetown.config.yml # this is your Bridgetown configuration file
├── config.ru # Puma uses this to boot up the web server
├── esbuild.config.js # frontend bundler config
├── Gemfile
├── Rakefile
└── package.json
The location of pages in your source folder structure will by default be mirrored in your output folder, whereas posts are handled in a special way. You can customize these permalinks via front matter and global configuration options.
Overview of Files & Folders #
File / Directory | Description |
---|---|
|
A location for all your components which can be referenced by your layouts and resources to comprise a design system and facilitate template reuse. In Liquid, |
|
A place for well-formatted structured data. Bridgetown will autoload these files and they will then be accessible via |
|
These are the templates that wrap resources and even other layouts. Layouts are chosen on a file-by-file basis via the front matter (and you can configure default layouts for different collections or folder paths). |
|
This is where you add dynamic blog-style content. The naming convention of these files is important, and must follow the format: |
|
You can save images here and reference them in both your markup and CSS (e.g. |
|
Provided that the file has a front matter section, it will be transformed by Bridgetown as a resource. You can create subfolders (and subfolders of subfolders) to organize your pages. You can also locate pages within |
General files/folders in the source folder |
Every other directory and file except for those listed above—such as downloadable files, |
|
This is where the generated site will be placed once Bridgetown is done transforming all the content. |
|
This is where you'll write custom plugins for your site to use.
(Third-party plugins are installed as Gems via Bundler.) Typically
there will be one |
|
This contains the base Roda appplication structure, used by Bridgetown to faciliate both the static files server and SSR/dynamic routes (if present). |
|
|
|
Stores configuration data. A few of these options can be specified from the command line executable but it’s generally preferable to save them here. |
|
Used by Bundler to install the relevant Ruby gems for your Bridgetown site. |
|
Manifest used by Yarn to install frontend assets and set up commands you can run to compile your JavaScript, CSS, etc. via esbuild/Webpack. |
|
Configuration file used by esbuild to compile frontend assets and save them to the output folder alongside your Bridgetown content. |