:-  :~  navhome/'/docs/'
        sort/'3'
        title/'A static site'
    ==
;>

# A static site

Hosting a static tree of content is easy.  Let's put together a really
simple site for an imaginary Urbit meetup group.

We assume you have at least followed the beginning of [our first
examples](/../blog) and created a desk called `site` and mounted it to
unix.

Note: below we use Urbit's implementation of Markdown, [Udon](/docs/tutorials/udon).
This markup language allows you to use snippets of Hoon code but not HTML.
In particular, we use Sail, a subset of Hoon.  This Sail is rendered as HTML
when the file is served to a client.  To learn about Udon and Sail, head over to
the [Tutorial](/docs/tutorials) section of the docs.

In `site/web/meet.udon` put:

```
:-  :~  navhome/'/meet'
        navdpad/'false'
        navpath/'/meet'
        mavmode/'navbar'
    ==
;>

# Neo-Tokyo Urbit meetup

;img@"https://ofheroesandcliches.files.wordpress.com/2014/06/neo-tokyo.png"(width "100%");

Hi there! We meet once a week at The Chat to work on Urbit projects
together.

You can find out more about the group on the [about](about) page and
follow our projects in [projects](projects).
```

This is our landing page.  Here we're using a few new bits of frontmatter:
`navdpad`, `navmode` and `navpath`.  `navdpad` just turns off the nav
arrows. `navmode` can be set to 'navbar' to switch to a horizontal top
nav instead of a left bar. `navpath` sets the path to load the nav
items from.

Let's create `about.udon` and `projects.udon`.  From Unix use the
technique from before to create a new directory: `mkdir
your-urbit/site/web/meet/; touch your-urbit/site/web/meet/about.udon`.
Then put the following in `site/web/about.udon`:

```
:-  :~  navhome/'/meet'
        navdpad/'false'
        navpath/'/meet'
        mavmode/'navbar'
        title/'About'
    ==
;>

# About

## Mission statement

The existing framework cannot subdue the new human force that is increasing day
by day alongside the irresistible development of technology and the
dissatisfaction of its possible uses in our senseless social life.

## Members

Membership is open to anyone.  Just send a message to `~talsur-todres`.

- Shōtarō Kaneda
- Motoko Kusanagi
- Ishikawa
- Faye Valentine
- Spike Spiegel
```

And `site/web/projects.udon`:

```
:-  :~  navhome/'/meet'
        navdpad/'false'
        navpath/'/meet'
        mavmode/'navbar'
        title/'Projects'
    ==
;>

# Projects

## Active

;list;

## Discussion

;div(class "mini-module")
    ;script(src "/~/at/lib/js/urb.js");
    ;script(src "https://cdn.rawgit.com/seatgeek/react-infinite/0.8.0/dist/react-infinite.js");
    ;script(src "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment-with-locales.js");
    ;script(src "https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.1/moment-timezone.js");
    ;script(src "/talk/main.js");
    ;link(href "/talk/main.css", rel "stylesheet");
    ;talk(readonly "", chrono="reverse", station="comments");
==
```

This page introduces a new thing: the `:talk` module.  Inside of the
`mini-module` div we load the scripts needed by the `;talk`
component.  The `;talk` component is a static component for
displaying a feed from a talk channel inline.  Here we're going to
display the discussion from our active projects inline.

We'll need a few active projects though.  From unix: `mkdir
your-urbit/site/web/meet/projects; touch
your-urbit/site/web/meet/projects/bike.udon`.

In `site/web/meet/projects/bike.udon`:

```
:-  :~  navhome/'/meet'
        navdpad/'false'
        navpath/'/meet'
        mavmode/'navbar'
        title/'Kaneda's Bike'
        comments/'true'
    ==
;>

# Urbit on a Motorcycle

Discussion on getting urbit to power Kaneda's motorcycle.
```

Here we just use the `comments` frontmatter to enable comments on the page.
Adding other imaginary projects is left to the reader.

Building a static site takes only a few minutes and a few Udon files.  Have fun!