Lay out the folders

Baseline has an opinion about where things live. src/ for what you write, dist/ for what gets built, and a handful of folders in between that it finds by name.

Build that shape first and every file in the rest of the tutorial has an obvious place to go.

simple-baseline-site/
  src/
    _data/              # site identity lives here
    _includes/
      layouts/          # the shell your pages render into
    assets/
      css/              # one CSS entry point
      js/               # one JS entry point
    content/            # everything you write
      pages/            # pages, which stay put
      posts/            # posts, which are dated and listed
    static/             # copied to the site root untouched

Make the folders

What goes inside splits in two: the folders you write in, and the folders Baseline goes looking for.

Content folders

This is the one you will live in. Every word you publish goes here, and the shape it takes is the first real decision of the tutorial.

pages/ and posts/ split the two kinds of thing a small site has. A page stays put. A post is dated and turns up in a list. Giving them separate folders is what lets each one have its own rules later, which is exactly what the next few pages do: they get different addresses, and eventually different layouts, because they sit in different folders.

There is a third position, and it is the root of content/ itself. A file there is in no folder, so no folder's rules reach it, which turns out to be what the homepage wants.

content/, pages/ and posts/ are conventions rather than requirements. Eleventy renders whatever it finds in src/, so the naming is your call in the end, but they are worth keeping while you learn where things go.

The ones Baseline expects

_data, _includes, assets and static are Baseline's. It finds them by looking, so renaming one means telling Eleventy about it yourself.

static/ is the odd one of the four: on disk it stays static/, but in templates and config Baseline calls it public, the name most generators use. Two names, one folder. It only matters the day you go looking for it in project structure.

Here's one Bash command to make them all at once:

mkdir -p src/_data src/_includes/layouts src/assets/css src/assets/js src/content/pages src/content/posts src/static

If your shell doesn't take -p, make them by hand from the tree above.

The dist/ folder is missing on purpose. It appears the first time you build your site.

You are ready to wire in Baseline next.