{% extends "../../layouts/topic.tera" %}
{% block content %}
## Your first page
We're going to speedrun making your first site with Roxy.
Create a new directory for the project.
```bash
mkdir my-new-site
cd my-new-site
```
Create two direcroties in your new project, one for input and one for output.
```bash
mkdir {input,output}
```
Create a new file with some markdown content in `input` to add a page.
```bash
touch input/index.md
cat << EOF > input/index.md
# Hello, world!
This is my new site!
EOF
```
Build the site with `roxy-cli`.
```bash
roxy-cli ./input/ ./output/
```
Host the content and view it.
```bash
cd output
python3 -m http.server # visit localhost:8000 with your browser
```
## Adding a layout
At the top level of your project, create a new directory and add a new file. We don't want this being built with the rest of the content.
```bash
mkdir layouts
touch layouts/base.tera
```
Let's add some boilerplate HTML to `layouts/base.tera`
```html
My New Site!
{% raw -%}
{% block body %}{% endblock body %}{% endraw %}
```
The `{% raw %}{% ... %}{% endraw %}` bit is the [Tera templating language](https://keats.github.io/tera/docs/) (it's meant to look like Jinja, if you're familiar with that). This syntax is how we do fun templating things -- in this case, we're creating a `block` that other pages can fill later.
Let's go back to `input/index.md` and use this layout.
```md
{%- raw -%}{% extends "../layouts/base.tera" %}
{% block body %}{% endraw -%}
# Hello, world!
This is my new site!{% raw -%}
{% endblock body %}{% endraw -%}
```
Build the site again, host it, and look at the result. There should be a title that says "My New Site!" and the content should be the same. Check out the `output` folder to get an idea of how Roxy builds and structures files.
Tera has many more features to explore, so I'd highly recommend looking at the [documentation](https://keats.github.io/tera/docs/).
{% endblock content %}