Basic setup

The lowdown

This tutorial lets you jump into Bedrock quickly.

We are going to assume you have some knowledge about modern web development, including working with Git, HTML and SCSS.

One part that might be a bit more exotic about working with Bedrock is the usage of the Pug templating language.

If this is new to you, see working with Pug.


Getting Bedrock

The easiest way to set up Bedrock is:

npx degit usebedrock/bedrock my-bedrock-project

You can read the details about this command combination at the bottom of this page. Now navigate into the directory you just copied:

cd my-bedrock-project

Next, install the project’s node modules:

npm install

(We follow the Node LTS (Long term stable release. Take a look at Bedrock’s requirements). After installing the node modules, run the following:

npm start

This starts a development server and opens your default browser at http://localhost:3000.

Please keep this server running while working on a Bedrock project.

Congratulations, you got Bedrock up and running!

Next steps

To use Bedrock, start making some templates! Import your custom CSS in main.scss. By default, there is some CSS powered by water.css. You should completely remove this and replace it with your own1

Document your components using the folders in templates/_components. Documenting a component is a simple as making a pug file in a folder. Read more about working with the styleguide.

Make a new page by creating a new .pug file under content/templates. Read more about pages.

Degit + npx. How does it work?

The degit command allows you to clone a repository without the Bedrock Git repository itself (since you won’t be working on Bedrock, but on your own project). Npx allows you to run a command without having to install it.