Skip to content
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 18 additions & 36 deletions quickstart.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,31 @@ boost: 3

import SkillMcpPrompt from "/snippets/skill-mcp-prompt.mdx";

After you complete this guide, you'll have a live documentation site ready to customize and update.
Deploy a live documentation site and make your first change.

## Before you begin

Mintlify uses a docs-as-code approach to manage your documentation. Every page on your site has a corresponding file stored in your documentation <Tooltip tip="Your documentation's source code where all files and their history are stored. The web editor connects to your documentation repository to access and modify content, or you can edit files locally in your preferred IDE.">repository</Tooltip>.

When you connect your documentation repository to your project, you can work on your documentation locally or in the web editor and sync any changes to your remote repository.
Mintlify uses a docs-as-code approach: every page has a corresponding file in your documentation <Tooltip tip="Your documentation's source code where all files and their history are stored.">repository</Tooltip>. Edit locally or in the web editor and sync changes to your remote repository.

<Tip>
Using an AI coding tool?

Copy the following prompt to add the Mintlify [skill](/ai/skillmd) and [MCP server](/ai/model-context-protocol) for better results when updating your documentation.
Using an AI coding tool? Add the Mintlify [skill](/ai/skillmd) and [MCP server](/ai/model-context-protocol) for better results.
</Tip>

<SkillMcpPrompt />

## Deploy your documentation site

Go to [mintlify.com/start](https://mintlify.com/start) and complete the onboarding process. During onboarding, you'll connect your GitHub account, create or select a repository for your documentation, and install the GitHub App to enable automatic deployments.

After onboarding, your documentation site deploys and is accessible at your `.mintlify.app` URL.
Go to [mintlify.com/start](https://mintlify.com/start) and complete onboarding. You'll connect GitHub, create or select a repository, and install the GitHub App for automatic deployments. Your site deploys to a `.mintlify.app` URL.

<AccordionGroup>
<Accordion title="Optional: Skip connecting a Git provider during onboarding">
If you want to get started quickly without connecting your own repository, you can skip the Git provider connection during onboarding. Mintlify creates a private repository in a private organization and automatically configures the GitHub App for you.

This lets you use the web editor immediately. If you want to use your own repository later, go to [Git Settings](https://dashboard.mintlify.com/settings/deployment/git-settings) in your dashboard to migrate your content using the Git setup wizard. See [Clone to your own repository](/deploy/github#clone-to-your-own-repository) for details.
Skip the Git connection to get started immediately. Mintlify creates a private repository for you so you can use the web editor right away. Migrate to your own repository later from [Git Settings](https://dashboard.mintlify.com/settings/deployment/git-settings). See [Clone to your own repository](/deploy/github#clone-to-your-own-repository).
</Accordion>
</AccordionGroup>

## View your deployed site

Your documentation site is now deployed at `https://<your-project-name>.mintlify.app`.

Find your exact URL on the **Overview** page of your [dashboard](https://dashboard.mintlify.com/).
Find your URL at `https://<your-project-name>.mintlify.app` on the **Overview** page of your [dashboard](https://dashboard.mintlify.com/).

<Frame>
<img
Expand All @@ -57,7 +47,7 @@ Find your exact URL on the **Overview** page of your [dashboard](https://dashboa
</Frame>

<Tip>
Your site is ready to view immediately. Use this URL for testing and sharing with your team. Before sharing with your users, you may want to add a [custom domain](/customize/custom-domain).
Before sharing with users, add a [custom domain](/customize/custom-domain).
</Tip>

## Make your first change
Expand All @@ -66,7 +56,7 @@ Find your exact URL on the **Overview** page of your [dashboard](https://dashboa
<Tab title="CLI">
<Steps>
<Step title="Install the CLI">
The CLI requires [Node.js](https://nodejs.org/en) v20.17.0 or higher. Use an LTS version for stability.
Requires [Node.js](https://nodejs.org/en) v20.17.0 or higher.

<CodeGroup>

Expand All @@ -80,13 +70,13 @@ Find your exact URL on the **Overview** page of your [dashboard](https://dashboa

</CodeGroup>

See [Install the CLI](/cli/install) for full details and troubleshooting.
See [Install the CLI](/cli/install) for details.
</Step>
<Step title="Clone your repository">
If you haven't already cloned your repository locally, follow the instructions in [Clone your repository](/cli/install#clone-your-repository).
Follow [Clone your repository](/cli/install#clone-your-repository) if you haven't already.
</Step>
<Step title="Edit a page">
Open `index.mdx` in your preferred editor and update the description in the frontmatter:
Update the description in `index.mdx`:

```mdx
---
Expand All @@ -96,31 +86,23 @@ Find your exact URL on the **Overview** page of your [dashboard](https://dashboa
```
</Step>
<Step title="Preview locally">
Run the following command from your documentation directory:

```bash
mint dev
```

View your preview at `http://localhost:3000`.
Run `mint dev` and open `http://localhost:3000`.
</Step>
<Step title="Push your changes">
Commit and push your changes to trigger a deployment:

```bash
git add .
git commit -m "Update description"
git push
```

Mintlify automatically deploys your changes. View your deployment status on the [Overview](https://dashboard.mintlify.com/) page of your dashboard.
Mintlify deploys automatically. Check status on the [Overview](https://dashboard.mintlify.com/) page.
</Step>
</Steps>
</Tab>
<Tab title="Web editor">
<Steps>
<Step title="Open the web editor">
Navigate to the [web editor](https://dashboard.mintlify.com/editor) in your dashboard.
Go to the [web editor](https://dashboard.mintlify.com/editor) in your dashboard.
</Step>
<Step title="Edit a page">
Open the **Introduction** page and update the description.
Expand All @@ -132,17 +114,17 @@ Find your exact URL on the **Overview** page of your [dashboard](https://dashboa
src="/images/quickstart/hello-world-light.png"
/>
<img
alt="Introduction page open in the web editor with the description edited to say Hello world!."
alt="Introduction page open in the web editor with the description edited to say Hello world!."
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Accidental extra indentation on img alt attribute

Low Severity

The alt attribute on line 117 has significantly more indentation (24 spaces) than its sibling attributes className and src (12 spaces), and also doesn't match the identical <img> tag above it. This appears to be an unintentional whitespace change introduced during the condensation edit.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 2672323. Configure here.

className="hidden dark:block"
src="/images/quickstart/hello-world-dark.png"
/>
</Frame>
</Step>
<Step title="Publish">
Click **Publish** in the top-right of the web editor toolbar.
Click **Publish** in the top-right toolbar.
</Step>
<Step title="View live">
On the [Overview](https://dashboard.mintlify.com/) page of your dashboard, you can see your site's deployment status. When it finishes deploying, refresh your documentation site to see your changes live.
Check deployment status on the [Overview](https://dashboard.mintlify.com/) page, then refresh your site.
</Step>
</Steps>
</Tab>
Expand All @@ -160,4 +142,4 @@ Find your exact URL on the **Overview** page of your [dashboard](https://dashboa

<Card title="Add a custom domain" icon="globe" horizontal href="/customize/custom-domain">
Use your own domain for your documentation site.
</Card>
</Card>
Loading