Bedrock
Bedrock

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 CSS.

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, check out working with Pug.

Getting Bedrock

The easiest way to set up Bedrock is:

# Stable version
npx degit usebedrock/bedrock my-bedrock-project

For pre-release versions, use:

# Sort of stable
npx degit usebedrock/bedrock#develop my-bedrock-project
# Latest and greatest, but can be buggy
npx degit usebedrock/bedrock#canary my-bedrock-project

Curious how this works? Check the blog post.

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! Some things to try:

  • Make a new page by creating a new .pug file under content/templates. Read more about pages.
  • Start writing your CSS in main.scss. By default, there is some CSS powered by water.css. The default logic uses SCSS. You can customize Bedrock to use PostCSS. See configuration. These are just some defau;t styles. You should completely remove this and replace it with your own!
  • Document an HTM/CSS component using the structure in templates/_components. Documenting a component is as simple as making a pug file in a folder. Read more about working with the styleguide.