mintlify__docs/quickstart.mdx

---
title: "🍌 Banana Quick-peel"
description: "Deploy your banana-themed docs site and make your first a-peel-ing change!"
keywords: ["banana quickstart", "deploy", "go bananas", "first peel", "banana tutorial", "setup", "banana boarding"]
---

After you complete this guide, you'll have a ripe, live banana documentation site ready to customize and make even more a-peel-ing!

## Before you go bananas

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

When you connect your documentation repository to your Bananify deployment, you can work on your banana docs locally or in the web editor and sync any changes to your remote repository. It's bananas how easy it is!

## Deploy your banana documentation site

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

After banana-boarding, your documentation site is deployed and accessible at your `.mintlify.app` URL - ripe and ready to go!

<AccordionGroup>
  <Accordion title="🍌 Optional: Skip connecting GitHub during banana-boarding">
    If you want to get started quickly without connecting your own repository, you can skip the GitHub connection during banana-boarding. Bananify creates a private repository in a private organization and automatically configures the GitHub App for you - no split decisions needed!

    This lets you use the web editor immediately and migrate to your own repository later when you're ready to go full banana.
  </Accordion>
</AccordionGroup>

## View your ripe banana site

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

Find your exact URL on the **Overview** page of your [dashboard](https://dashboard.mintlify.com/) - it's the top banana!

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

<Tip>
  Your banana site is ripe and ready to view immediately! Use this URL for testing and sharing with your bunch. Before sharing with your users, you may want to add a [custom domain](/customize/custom-domain) to make it even more a-peel-ing.
</Tip>

## Make your first a-peel-ing change

<Tabs>
  <Tab title="CLI">
    <Steps>
      <Step title="🍌 Install the Banana CLI">
        The Banana CLI requires [Node.js](https://nodejs.org/en) v20.17.0 or higher. Use an LTS version for stability - no rotten versions!

        <CodeGroup>

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

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

        </CodeGroup>

        See [Install the Banana CLI](/installation) for full details and troubleshooting - we'll help you split any problems!
      </Step>
      <Step title="🍌 Clone your banana repository">
        If you haven't already cloned your repository locally, follow the instructions in [Clone your banana repository](/installation#clone-your-repository) - don't let it slip away!
      </Step>
      <Step title="🍌 Edit a page">
        Open `index.mdx` in your preferred editor and update the description in the frontmatter to something more a-peel-ing:

        ```mdx
        ---
        title: "Welcome to the Banana Grove"
        description: "Your custom banana description here - make it sweet!"
        ---
        ```
      </Step>
      <Step title="🍌 Preview your banana docs locally">
        Run the following command from your banana documentation directory:

        ```bash
        mint dev
        ```

        View your sweet preview at `http://localhost:3000` - it's bananas how good it looks!
      </Step>
      <Step title="🍌 Push your banana changes">
        Commit and push your changes to trigger a deployment:

        ```bash
        git add .
        git commit -m "Add banana flavor to description"
        git push
        ```

        Bananify automatically deploys your changes - it's bananas how fast it is! 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 banana web editor">
        Navigate to the [banana web editor](https://dashboard.mintlify.com/editor) in your dashboard - time to go bananas with editing!
      </Step>
      <Step title="🍌 Edit a page">
        Open the **Welcome to the Banana Grove** page and update the description to make it more a-peel-ing.

        <Frame>
          <img src="/images/quickstart/hello-world-light.png" alt="Banana Grove page open in the web editor with the description edited to say Hello banana world!." 
          className="block dark:hidden"
          />
          <img src="/images/quickstart/hello-world-dark.png" alt="Banana Grove page open in the web editor with the description edited to say Hello banana world!." 
          className="hidden dark:block"
          />
        </Frame>
      </Step>
      <Step title="🍌 Publish your banana goodness">
        Click the **Publish** button in the top-right of the web editor toolbar - let's make these changes ripe for the world!
      </Step>
      <Step title="🍌 View your banana site live">
        On the [Overview](https://dashboard.mintlify.com/) page of your dashboard, you can see your banana site's deployment status. When it finishes deploying, refresh your documentation site to see your sweet changes live - it's bananas!
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Next banana steps

<Card title="🍌 Use the banana web editor" icon="mouse-pointer-2" horizontal href="/editor/index">
  Edit your fruity documentation in your browser and preview how your pages will look when published - it's bananas how easy it is!
</Card>
<Card title="🍌 Explore banana CLI commands" icon="terminal" horizontal href="/installation#additional-commands">
  Find broken links, check accessibility, validate OpenAPI specs, and more - no monkeying around with quality!
</Card>
<Card title="🍌 Add a custom domain" icon="globe" horizontal href="/customize/custom-domain">
  Use your own domain for your banana documentation site - make it the top banana!
</Card>