---
title: "Installation"
description: "Install the comark-docs layer from GitHub, extend your Nuxt config, and write your first page."
canonical_url: "https://docs-template.comark.dev/getting-started/installation"
---
# Installation

> Install the comark-docs layer from GitHub, extend your Nuxt config, and write your first page.

## Prerequisites

- A [Nuxt](https://nuxt.com) 4 app in a GitHub repository. Production content is read from GitHub, so the repository must exist there (public or private).
- Node.js 20 or later.

## Install the layer

comark-docs isn't published to npm yet — install it from GitHub:

<code-group>
```bash [pnpm]
pnpm add comark-docs@github:comarkdown/comark-docs
```



```bash [npm]
npm install comark-docs@github:comarkdown/comark-docs
```
</code-group>

This adds a git dependency to your `package.json`:

```json [package.json]
{
  "dependencies": {
    "comark-docs": "github:comarkdown/comark-docs"
  }
}
```

<note>
Your package manager pins the resolved commit in the lockfile, so installs are reproducible. Run `pnpm update comark-docs` (or the npm equivalent) to move to the latest commit.
</note>

## Extend your Nuxt config

Add the layer with [`extends`](https://nuxt.com/docs/getting-started/layers) and set your site's URL and name:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  extends: ['comark-docs'],
  site: {
    url: 'https://docs.example.com',
    name: 'My Project',
  },
})
```

The layer brings its own modules (Nuxt UI, Comark, SEO, OG images, MCP, and more) — you don't need to install or register anything else.

## Write your first pages

Create a `content/` directory at the app root. Numeric prefixes order sections and pages; they're stripped from URLs:

```
content/
├── index.md                     → /
└── 1.getting-started/
    ├── .navigation.yml
    └── 1.introduction.md        → /getting-started/introduction
```

```md [content/1.getting-started/1.introduction.md]
---
title: Introduction
description: What this project does and why it exists.
---

Welcome to the docs!
```

See [Writing pages](https://docs-template.comark.dev/writing/pages) for the full structure, frontmatter, and navigation conventions.

## Run it

```bash [Terminal]
nuxt dev
```

In development, content is read from your working tree with hot reload. Edit a Markdown file and the page updates immediately.

## Diagrams

Mermaid diagrams work out of the box — write a `````mermaid`` code fence and it renders as a diagram:

```mermaid {theme="zinc-light" theme-dark="zinc-dark"}
flowchart LR
  A[Markdown push] --> B[GitHub webhook]
  B --> C[ISR purge]
  C --> D[Fresh page]

```

## Next steps

- [Configuration](https://docs-template.comark.dev/getting-started/configuration) — branding, navigation tabs, and environment variables.
- [Deploy on Vercel](https://docs-template.comark.dev/deployment/vercel) — production setup with instant content updates.


## Sitemap

See the full [sitemap](https://docs-template.comark.dev/sitemap.md) for all pages.