Getting Started

This page will provide an overview on how to get started with Deenie. Later pages will cover the details of setting up and configuring Deenie in more detail.

Install

Install the Deenie command line application from JSR with Deno:

deno install --global \
  --allow-read="." --allow-write="." --allow-env="DEENIE" \
  jsr:@ansley/deenie@^0.0.1-alpha.4/cli

If you don't have Deno on your machine, install it first. See the Deno installation documentation for more information.

Project Structure

A Deenie project needs three components:

A configuration file: This is a JavaScript file that default exports your site configuration
A source folder: This is where all your Markdown, assets, JavaScript, and CSS will go.
A templates folder: This is where all your Nunjucks templates will go.

When the Deenie build command is run, a static site will be generated in an output directory.

These files and folders can be given any names. For the following example, they are called: config.js, site, templates, and build.

Example Project

If you want to see an example of Deenie out in the wild, check out the source code for the Deenie docs themselves. The Deenie doc source code is available on Codeberg.

The following sections walk through how to set up a basic Deenie site.

Project Structure

Let's say we have the following project structure:

config.js
site/
- config.yaml
- index.md
- page.md
- styles.css
templates/
- base.njk

With the following file contents:

`config.js`

export default {
    title: "My site",  // This is optional data we define here
    src: "site",  // The source directory
    templates: "templates",  // The templates directory
    out: "build",  // The output directory
};

`site/config.yaml`

template: base.njk

`site/index.md`

---
title: My Cool Page
order: 100
---

# My Super Cool Page

This is my <em>really</em> cool page. But wait until you
see [this other page](/page.html).

`site/page.md`

---
order: 200
---

# The Other Page

Look! Another page!

`site/styles.css`

main {
    inline-size: 60ch;
    max-inline-size: 100%;
    margin: auto;
}

`templates/base.njk`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ page.metadata.title or global.title }}</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
<h2>Site Index</h2>
<ul>
    {% for child in root.children %}{% if child.isPage %}
    <li><a href="{{ child.url }}">
        {{ child.metadata.title or child.url }}
    </a></li>
    {% endif %}{% endfor %}
</ul>
<main>
    {{ page.content | safe }}
</main>
</body>
</html>

Building the Site

To build the site, run the following in the project directory:

deenie build config.js

This will create a new directory: build. The build directory contains the static HTML and asset files for your website.

These pages can then be served. For example, if you have Python installed on your machine, the command:

python3 -m http.server -d build

Will serve your site locally at localhost:8000.