Basic SSG with Vite#

This example demonstrates how to use Ox Content with Vite for static site generation.

Setup#

Create a new Vite project and install dependencies:

npm create vite@latest my-docs -- --template vanilla-ts
cd my-docs
npm install @ox-content/vite-plugin

Configuration#

Create or update vite.config.ts:

import { defineConfig } from "vite";
import { oxContent } from "@ox-content/vite-plugin";

export default defineConfig({
  plugins: [
    oxContent({
      srcDir: "docs",
      outDir: "dist",
      gfm: true,
      highlight: true,
      // SSG is enabled by default
    }),
  ],
});

Usage#

Create markdown files in your docs directory:

---
title: My First Page
description: A sample page using Ox Content
---

# Hello World

This is my first page with **Ox Content**.

Using as Module Import#

Import and use in your application:

import content from "./docs/hello.md";

document.getElementById("app").innerHTML = content.html;

Using SSG (Static HTML Generation)#

By default, Ox Content generates static HTML files for each Markdown file during build:

docs/
  index.md      -> dist/index.html
  guide.md      -> dist/guide/index.html
  api/
    intro.md    -> dist/api/intro/index.html

Building for Production#

npm run build

The output will be in the dist directory, ready for deployment. Each Markdown file will have a corresponding HTML file.

Disabling SSG#

If you only want to use Ox Content as a module transformer (without generating static HTML files):

oxContent({
  srcDir: "docs",
  ssg: false, // Disable SSG
});

The plugin then emits .md modules only. Import official component CSS in the host that renders html — see Component styles.

@import "@ox-content/vite-plugin/styles/core.css";
@import "@ox-content/vite-plugin/styles/social.css";

Bare Mode#

For benchmarking or when using custom post-processing, use bare mode to output minimal HTML without navigation or styles:

oxContent({
  srcDir: "docs",
  ssg: {
    bare: true,
  },
});

Features#

Fast Rust-based Markdown parsing
Static HTML generation (SSG) by default
Sidebar navigation (auto-generated from files)
Dark mode support
Native tree-sitter syntax highlighting
GitHub Flavored Markdown support
Frontmatter parsing
Table of contents generation
Clean URLs (e.g., /guide/ instead of /guide.html)
Bare mode for benchmarking