Page

Pages are Markdown files with TOML front matter that become HTML pages on your site.

Basic Structure

  +++
title = "My Page"
date = "2024-01-15"
+++

Your content in **Markdown**.

Front Matter Fields

Required

Optional

Examples

Blog Post

  +++
title = "Getting Started with Crystal"
date = "2024-01-15"
description = "Learn Crystal programming basics"
tags = ["crystal", "tutorial"]
categories = ["Programming"]
image = "/images/crystal-guide.png"
+++

Crystal is a fast, compiled language...

Draft Content

  +++
title = "Work in Progress"
draft = true
+++

This won't appear in production builds.

Build with drafts:

  hwaro build --drafts
hwaro serve --drafts

Custom Layout

  +++
title = "Landing Page"
layout = "landing"
+++

Hero content here.

Uses templates/landing.html instead of page.html.

Ordered Pages

Control page order in listings with weight:

  +++
title = "Introduction"
weight = 1
+++

  +++
title = "Getting Started"
weight = 2
+++

Lower weight values appear first.

Markdown Content

Headings

  ## Heading 2
### Heading 3
#### Heading 4

Text Formatting

  **bold** and *italic*
`inline code`
[link text](https://example.com)

Lists

  - Unordered item
- Another item

1. Ordered item
2. Another item

Code Blocks

  ```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}
```

Images

  ![Alt text](/images/photo.jpg)

Tables

  <table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>

Blockquotes

  > This is a quote.

Raw HTML

Include HTML directly in Markdown:

  This is Markdown.

<div class="custom">
  <p>This is HTML.</p>
</div>

Back to Markdown.

To strip raw HTML, set markdown.safe = true in config.

Template Variables

Page front matter is available in templates: