# Getting Started

> Install lyvo, add your first page and build the site.

<Callout type="default" title="Requirements">
	Node.js 22+ and an Astro 7 project. Run `pnpm create astro@latest` if you don't have one yet.
</Callout>

## Quick Start

<Steps>
  <Step title="Install the package">

<Tabs>
	<TabItem value="pnpm">
		<Code code="pnpm add @mizuchilabs/lyvo @pagefind/component-ui sharp" lang="bash" />
	</TabItem>
	<TabItem value="npm">
		<Code code="npm install @mizuchilabs/lyvo @pagefind/component-ui sharp" lang="bash" />
	</TabItem>
	<TabItem value="bun">
		<Code code="bun add @mizuchilabs/lyvo @pagefind/component-ui sharp" lang="bash" />
	</TabItem>
</Tabs>

    Tailwind, MDX, the sitemap and Pagefind are set up by the integration. `sharp` is Astro's image optimizer and needs to be in your project.

  </Step>

  <Step title="Add the integration">

```js title="astro.config.mjs"

	site: 'https://my-app.dev',
	integrations: [lyvo({ title: 'My App' })]
});
```

  </Step>

  <Step title="Register the content collections">

```ts title="src/content.config.ts"

```

  </Step>

  <Step title="Write your first page">
    Create `src/content/docs/introduction.mdx` with a `title` in the frontmatter, then run `pnpm dev`. The page is live at [http://localhost:4321/docs/introduction](http://localhost:4321/docs/introduction).
  </Step>
</Steps>

## Project Structure

<FileTree>
	<Folder name="src" defaultOpen>
		<Folder name="assets">
			<File name="logo.svg" />
		</Folder>
		<Folder name="content" defaultOpen>
			<Folder name="docs" defaultOpen>
				<File name="introduction.mdx" />
				<Folder name="guides">
					<File name="install.mdx" />
				</Folder>
			</Folder>
		</Folder>
		<Folder name="pages">
			<File name="index.astro" />
		</Folder>
		<Folder name="styles">
			<File name="custom.css" />
		</Folder>
		<File name="content.config.ts" />
	</Folder>
	<Folder name="public">
		<File name="openapi.json" />
	</Folder>
	<File name="astro.config.mjs" />
</FileTree>

Your landing page is a normal Astro page in `src/pages/index.astro` built from the landing blocks. Docs, the API reference, OG images, `llms.txt`, `robots.txt` and the 404 page are generated.

## Building for Production

```bash
pnpm build
```

This writes a static site to `dist` and runs Pagefind to build the search index. Preview it with `pnpm preview`.