> ## Documentation Index > Fetch the complete documentation index at: https://docs.bytesell.io/llms.txt > Use this file to discover all available pages before exploring further. # Quickstart > Building a page, extracting a component, and adding a layout. This walks through a small project from an empty directory to a rendered page. It takes about five minutes and requires only a terminal. ```bash theme={"languages":{"custom":["/languages/slurp.json"]}} cargo install slurp-compiler ``` That gives you a binary named `slurp`. Check it: ```bash theme={"languages":{"custom":["/languages/slurp.json"]}} slurp --version ``` For options that do not need a Rust toolchain, see [Installation](/slurp/installation). ```bash theme={"languages":{"custom":["/languages/slurp.json"]}} mkdir hello && cd hello ``` Slurp has no scaffolding command and no config file to start with. A project is a directory of `.slurp` files, and everything else is convention. Create `pages/index.slurp`: ```slurp pages/index.slurp theme={"languages":{"custom":["/languages/slurp.json"]}}

${ site.title }

{each product in products | sort("price")}

${ product.name } - ${ product.price | currency("USD") }

{empty}

Nothing for sale yet.

{/each} ``` Three constructs are in use. `${ }` interpolates a value and escapes it for wherever it lands. `{each}` loops, with `{empty}` as the branch taken when there is nothing to loop over. `| sort` and `| currency` are filters, which transform a value on its way out. A `pages/` directory is a convention rather than a requirement. Slurp emits an HTML file for every `.slurp` file except those under `components/` and `layouts/`, so a file at the root would work too. Use `pages/` anyway: the dev server in step 8 only serves routes from there. A template renders against a JSON context. At build time that comes from a file: ```json data.json theme={"languages":{"custom":["/languages/slurp.json"]}} { "site": { "title": "My Shop" }, "products": [ { "name": "Notebook", "price": 12.5 }, { "name": "Pen", "price": 3 } ] } ``` Every top-level key becomes a global the template can read, which is why `site` and `products` resolve above. ```bash theme={"languages":{"custom":["/languages/slurp.json"]}} slurp build --globals data.json ``` ```html dist/pages/index.html theme={"languages":{"custom":["/languages/slurp.json"]}}

My Shop

Pen - $3.00

Notebook - $12.50 ``` The output is minified, and the `sort` filter ordered the products cheapest first. `${ }` escaped everything on the way out, so a product named `