mintlify__docs/quickstart.mdx

---
title: "Quickstart"
description: "Deploy your documentation site and make your first change."
keywords: ["quickstart", "deploy", "get started", "first steps", "tutorial", "setup", "onboarding"]
---

After you complete this guide, you'll have a live documentation site ready to customize and update.

## Before you begin

You'll need a GitHub account to deploy your documentation site. Mintlify uses a docs-as-code approach where 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>.

Your documentation repository connects to your Mintlify deployment, allowing you to work locally or in the web editor and sync changes automatically.

## Deploy your documentation site

<Steps>
  <Step title="Start onboarding">
    Go to [mintlify.com/start](https://mintlify.com/start) to begin the onboarding process.
  </Step>
  <Step title="Connect GitHub">
    Connect your GitHub account and create or select a repository for your documentation.
  </Step>
  <Step title="Install GitHub App">
    Install the Mintlify GitHub App to enable automatic deployments when you push changes.
  </Step>
</Steps>

After completing onboarding, your documentation site is deployed and accessible at your `.mintlify.app` URL.

<Tip>
  Want to get started quickly? You can skip connecting your own repository during onboarding. Mintlify will create a private repository for you, letting you use the web editor immediately and migrate to your own repository later.
</Tip>

## 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/).

<Frame>
  <img
    src="/images/quickstart/mintlify-domain-light.png"
    alt="Overview page of the Mintlify dashboard."
    className="block dark:hidden"
  />

  <img
    src="/images/quickstart/mintlify-domain-dark.png"
    alt="Overview page of the Mintlify dashboard."
    className="hidden dark:block"
  />
</Frame>

<Note>
  Your site is live and ready to view. Use this URL for testing and sharing with your team. Add a [custom domain](/customize/custom-domain) before sharing with users.
</Note>

## Make your first change

<Tabs>
  <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.

        <CodeGroup>

        ```bash npm
        npm i -g mint
        ```

        
        ```bash pnpm
        pnpm add -g mint
        ```

        </CodeGroup>

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

        ```mdx
        ---
        title: "Introduction"
        description: "Your custom description here"
        ---
        ```
      </Step>
      <Step title="Preview locally">
        Run the following command from your documentation directory:

        ```bash
        mint dev
        ```

        View your preview at `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.
      </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.
      </Step>
      <Step title="Edit a page">
        Open the **Introduction** page and update the description.

        <Frame>
          <img src="/images/quickstart/hello-world-light.png" alt="Introduction page open in the web editor with the description edited to say Hello world!." 
          className="block dark:hidden"
          />
          <img src="/images/quickstart/hello-world-dark.png" alt="Introduction page open in the web editor with the description edited to say Hello world!." 
          className="hidden dark:block"
          />
        </Frame>
      </Step>
      <Step title="Publish">
        Click the **Publish** button in the top-right of the web editor 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.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Next steps

<CardGroup cols={2}>
  <Card title="Use the web editor" icon="mouse-pointer-2" href="/editor/index">
    Edit documentation in your browser and preview how your pages will look when published.
  </Card>
  <Card title="Explore CLI commands" icon="terminal" href="/installation#additional-commands">
    Find broken links, check accessibility, validate OpenAPI specs, and more.
  </Card>
  <Card title="Add a custom domain" icon="globe" href="/customize/custom-domain">
    Use your own domain for your documentation site.
  </Card>
  <Card title="Customize your theme" icon="palette" href="/customize/themes">
    Configure colors, fonts, and branding to match your product.
  </Card>
  <Card title="Organize your navigation" icon="map" href="/organize/navigation">
    Structure your documentation with groups, tabs, and sections.
  </Card>
  <Card title="Add API documentation" icon="file-json" href="/api-playground/overview">
    Auto-generate interactive API reference from your OpenAPI spec.
  </Card>
</CardGroup>