Your First File

Time to write code. By the end of this section you'll have a running server that reads a Markdown file and renders it in the browser.

Why Markdown?

HTML gives you full control but it's verbose. Markdown is plain text with a tiny set of conventions that convert automatically to HTML. You write # Title instead of <h1>Title</h1>. You focus on content, not markup.

LiteNode has native Markdown support, so the two fit together naturally.

Anatomy of a Markdown file

Every Markdown file in this project has two sections:

---
title: My Page
description: "A short description."
href: my-page
---

# Heading

Content goes here.

The block between the --- delimiters is called frontmatter. It's written in YAML and holds metadata: title, description, tags, and any other properties you want to attach to the page. LiteNode reads this block and gives it back to you as a plain JavaScript object.

Everything after the frontmatter is content — regular Markdown that gets converted to HTML.

Create the directory structure

Create these folders and files:

litenode-markdown-app/
├── index.js
├── package.json
└── views/
    ├── index.md
    └── layouts/
        └── index.html

Using LiteNode in default mode (const app = new LiteNode()) — like this tutorial for simplicity — requires Markdown files and HTML templates to live inside views/ (or a subfolder of it).

Write the Markdown file

Create views/index.md:

---
title: Home
description: "A Markdown-based app built with LiteNode."
---

# Welcome

This page is rendered from a Markdown file.

## Requirements

All you need is [Node.js](https://nodejs.org/en/download/prebuilt-installer) installed on your machine.

Write the template

Create views/layouts/index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="{{description}}" />
        <title>{{title}}</title>
    </head>
    <body>
        <main>{{html_content}}</main>
    </body>
</html>

Double curly braces {{ }} are LiteNode's template syntax. Values wrapped in html_ are injected as raw HTML — this is how the converted Markdown reaches the page.

Write the server

Create index.js at the project root:

import { LiteNode } from "litenode"
import { marked } from "marked"

const app = new LiteNode()

app.get("/", (req, res) => {
    const parsed = app.parseMarkdownFile("index.md")

    const html_content = marked.parse(parsed.content)
    const { title, description } = parsed.frontmatter

    res.render("layouts/index.html", { title, description, html_content })
})

app.startServer()

Run the server

npm start

For development with auto-restart on file changes:

npm run dev

In both cases you'll see something like:

App @ http://localhost:5000

Open that URL in your browser. You should see your Markdown content rendered as HTML.

If you see a warning about a missing static directory, you can ignore it for now. LiteNode will still run — it just won't serve static assets yet. We'll add that in a later section.

You've rendered your first Markdown file. Next, we'll break the single-file template into reusable components and handle multiple pages at once.