Folder Structure

The typical folder structure for a Bridgetown site usually looks something like this:

.
├── frontend # this is where you put your frontend assets for Webpack
│   ├── javascript
│   │   ├── index.js
│   │   └── widget.js
│   ├── styles
│   │   ├── index.scss
│   └   └── layout.scss
├── src # this is where you put your content and design templates
│   ├── _components
│   │   ├── footer.liquid
│   │   └── header.liquid
│   ├── _data
│   │   ├── members.yml
│   │   └── site_metadata.yml
│   ├── _layouts
│   │   ├── default.html
│   │   └── post.html
│   ├── _posts
│   │   ├── 2019-10-29-why-im-dressing-up-as-thanos-this-year.md
│   │   └── 2020-04-12-isolation-is-really-getting-to-me.md
│   ├── images
│   │   └── logo.svg
│   ├── 404.html
│   ├── some_page.md
│   └── index.html # or index.md
├── output # this is the generated site published via bridgetown build/serve
├── plugins # this is where you can write custom plugins
├── bridgetown.config.yml # this is your Bridgetown configuration file
├── Gemfile
├── package.json
└── webpack.config.js

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

</tbody> </table>

File / Directory Description

src/_components

Liquid components (aka partials) which can be referenced by your layouts, posts, and pages to comprise a design system and facilitate template reuse. The tag {% render "card" %} would insert the _components/card.liquid component.

src/_data

A place for well-formatted structured data. Bridgetown will autoload these files and they will then be accessible via site.data. For example, given members.yml, you can access the contents of that file via site.data.members. Supported formats are: .yml/.yaml, .json, .csv, and .tsv.

src/_layouts

These are the templates that wrap posts, pages, 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 document types or folder paths). The Liquid tag {{ content }} is used to inject page content into the layout template.

src/_posts

This is where you add dynamic blog-style content. The naming convention of these files is important, and must follow the format: YEAR-MONTH-DAY-post-title.EXT (aka .md, .html, etc.). The permalink can be customized for each post. Posts are a built-in collection, and you can configure other collections in addition to (or even instead of) posts.

src/images

You can save images here and reference them in both your markup and CSS (e.g. /images/logo.svg). The name of the images folder is completely arbitrary…feel free to rename it, relocate it under a parent `assets` folder, or however you'd like to set things up.

src/index.html or src/index.md and other HTML, Markdown, etc. pages

Provided that the file has a front matter section, it will be transformed by Bridgetown. You can create subfolders (and subfolders of subfolders) to organize your pages. You can also locate pages within _pages to line up with _posts, _data, etc.

General files/folders in the source folder

Every other directory and file except for those listed above—such as downloadable files, favicon.ico, robots.txt, and so forth—will be copied verbatim to the generated site as Static Files. </p> </td> </tr>

plugins

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 site_builder.rb superclass, and you will add new builder subclasses to the plugins/builders folder. Read all about it in the Plugins documentation.

output

This is where the generated site will be placed once Bridgetown is done transforming it. It’s a good idea to add this to your .gitignore file.

.bridgetown-metadata
.bridgetown-cache

.bridgetown-metadata helps Bridgetown keep track of which files have not been modified since the site was last built and which files will need to be regenerated on the next build. .bridgetown-cache is used to improve performance over multiple builds. It’s a good idea to add these to your .gitignore file.

bridgetown.config.yml

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.

Gemfile

Used by Bundler to install the relevant Ruby gems for your Bridgetown site.

package.json
start.js
sync.js

Manifest used by Yarn to install frontend assets and set up commands you can run to compile your Javascript, CSS, etc. via Webpack—as well as perform other tasks. Typically there are a couple scripts that are used to load the live-reload Browsersync server and run the Bridgetown and Webpack watchers simultaneously.

webpack.config.js

Configuration file used by Webpack to compile frontend assets and save them to the output folder alongside your Bridgetown content.

Next: Themes