Skip to content

Rewrite quickstart page #1140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Rewrite quickstart page #1140

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
254 changes: 112 additions & 142 deletions quickstart.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,251 +1,221 @@
---
title: "Quickstart"
description: "Deploy your documentation in minutes"
description: "Get your documentation site live in under 5 minutes"
icon: "rocket"
---

This quickstart guide shows you how to set up and deploy your documentation site in minutes.

After completing this guide, you will have a live documentation site ready to customize and expand.
Build and deploy beautiful documentation in minutes. This guide walks you through creating your first documentation site from setup to deployment.

<Info>

**Prerequisites**: Before you begin, [create an account](https://mintlify.com/start) and complete onboarding.

**Before you start**: You'll need a [Mintlify account](https://mintlify.com/start). Sign up and complete the onboarding flow first.
</Info>

## Getting started
## Create your site

After you complete the onboarding process, your documentation site automatically deploys to a unique URL with this format:
Once you complete onboarding, your documentation site is automatically deployed to:

```
https://<your-project-name>.mintlify.app
```

Find your URL on the Overview page of your [dashboard](https://dashboard.mintlify.com/).
Your site URL is available immediately on your [dashboard](https://dashboard.mintlify.com/) overview page.

<Frame>
<img src="/images/quickstart/mintlify-domain-light.png" alt="Mintlify Domain" className="block dark:hidden" />
<img src="/images/quickstart/mintlify-domain-dark.png" alt="Mintlify Domain" className="hidden dark:block" />
</Frame>

Your site's URL is available immediately. Use this URL for testing and sharing with your team while you are setting up your docs site.

### Install the GitHub App
## Connect GitHub

Mintlify provides a GitHub App that automates deployment when you push changes to your repository.
Link your GitHub repository to enable automatic deployments when you push changes.

Install the GitHub App by following the instructions from the onboarding checklist or your dashboard.
### Install the GitHub App

1. Navigate to **Settings** in your Mintlify dashboard.
2. Select **GitHub App** from the sidebar.
3. Select **Install GitHub App**. This opens a new tab to the GitHub App installation page.
4. Select the organization or user account where you want to install the app.
5. Select the repositories that you want to connect.
1. Go to **Settings** → **GitHub App** in your dashboard
2. Click **Install GitHub App**
3. Select your organization and repositories
4. Complete the installation

<Frame>
<img src="/images/quickstart/github-app-installation-light.png" alt="GitHub App Installation" className="block dark:hidden" />
<img src="/images/quickstart/github-app-installation-dark.png" alt="GitHub App Installation" className="hidden dark:block" />
</Frame>

<Info>
Update the GitHub App permissions if you move your documentation to a different repository.
</Info>

### Authorize your GitHub account
### Authorize your account

1. Navigate to **Settings** in your Mintlify dashboard.
2. Select **My Profile** from the sidebar.
3. Select **Authorize GitHub account**. This opens a new tab to the GitHub authorization page.
1. Navigate to **Settings** → **My Profile**
2. Click **Authorize GitHub account**
3. Complete the authorization flow

<Info>
An admin for your GitHub organization may need to authorize your account depending on your organization settings.
</Info>

## Editing workflows
<Tip>
Organization admins may need to approve the authorization depending on your GitHub settings.
</Tip>

Mintlify offers two workflows for creating and maintaining your documentation:
## Choose your workflow

<Card title="Code-based workflow" icon="terminal" horizontal href="#code-based-workflow">
For users who prefer working with existing tools in their local environment. Click to jump to this section.
</Card>
Pick the editing approach that works best for your team:

<Card title="Web editor workflow" icon="mouse-pointer-2" horizontal href="#web-editor-workflow">
For users who prefer a visual interface in their web browser. Click to jump to this section.
</Card>
<CardGroup cols={2}>
<Card title="Local development" icon="terminal" href="#local-development">
Edit files locally with your favorite tools and Git workflow
</Card>
<Card title="Web editor" icon="mouse-pointer-2" href="#web-editor">
Visual editing directly in your browser with instant preview
</Card>
</CardGroup>

## Code-based workflow
## Local development

The code-based workflow integrates with your existing development environment and Git repositories. This workflow is best for technical teams who want to manage documentation alongside code.
Work with documentation files in your local environment using familiar development tools.

### Install the CLI

To work locally with your documentation, install the Command Line Interface (CLI), called [mint](https://www.npmjs.com/package/mint), by running this command in your terminal:
Install the Mintlify CLI to preview changes locally:

<CodeGroup>
```bash npm
npm i -g mint
```
```bash npm
npm i -g mint
```

```bash pnpm
pnpm add -g mint
```
```bash pnpm
pnpm add -g mint
```
</CodeGroup>

<Info>
You need Node.js installed on your machine. If you encounter installation issues, check the troubleshooting guide.
</Info>

### Edit the documentation
<Warning>
Requires Node.js v19 or higher. Check your version with `node --version`.
</Warning>

After setting up your environment, you can start editing your documentation files. For example, update the title of the introduction page:
### Make your first edit

1. Open your repository created during onboarding.
2. Open `index.mdx` and locate the top of the file:
1. Clone your repository from the onboarding process
2. Open `index.mdx` and update the title:

```mdx index.mdx
---
title: "Introduction"
description: "This is the introduction to the documentation"
title: "My awesome docs"
description: "Welcome to my documentation"
---
```

3. Update the `title` field to `"Hello World"`.
# Welcome

```mdx index.mdx {2}
---
title: "Hello World"
description: "This is the introduction to the documentation"
---
This is my documentation homepage.
```

### Preview the changes
### Preview locally

To preview the changes locally, run the following command:
Start the development server:

```bash
mint dev
```

Your preview will be available at `localhost:3000`.
Your site runs at `http://localhost:3000` with live reload.

<Frame>
<img src="/images/quickstart/mintlify-dev-light.png" alt="Mintlify Dev" className="block dark:hidden" />
<img src="/images/quickstart/mintlify-dev-dark.png" alt="Mintlify Dev" className="hidden dark:block" />
<img src="/images/quickstart/mintlify-dev-light.png" alt="Local preview" className="block dark:hidden" />
<img src="/images/quickstart/mintlify-dev-dark.png" alt="Local preview" className="hidden dark:block" />
</Frame>

### Push the changes

When you are ready to publish your changes, push them to your repository.
### Deploy changes

Mintlify automatically detects the changes, builds your documentation, and deploys the updates to your site. Monitor the deployment status in your GitHub repository commit history or the [dashboard](https://dashboard.mintlify.com).
Push your changes to trigger automatic deployment:

After the deployment completes, your latest update will be available at `<your-project-name>.mintlify.app`.

<Card title="Jump to adding a custom domain" icon="arrow-down" href="#adding-a-custom-domain" horizontal>
Optionally, skip the web editor workflow and jump to adding a custom domain.
</Card>
```bash
git add .
git commit -m "Update homepage title"
git push origin main
```

## Web editor workflow
Your site updates automatically within minutes.

The web editor workflow provides a what-you-see-is-what-you-get (WYSIWYG) interface for creating and editing documentation. This workflow is best for people who want to work in their web browser without additional local development tools.
## Web editor

### Access the web editor
Edit documentation visually in your browser without local setup.

1. Log in to your [dashboard](https://dashboard.mintlify.com).
2. Select **Editor** on the left sidebar.
### Access the editor

<Info>
If you have not installed the GitHub App, you will be prompted to install the app when you open the web editor.
</Info>
1. Open your [dashboard](https://dashboard.mintlify.com)
2. Click **Editor** in the sidebar

<Frame>
<img alt="The Mintlify web editor in the visual editor mode" src="/images/quickstart/web-editor-light.png" className="block dark:hidden" />
<img alt="The Mintlify web editor in the visual editor mode" src="/images/quickstart/web-editor-dark.png" className="hidden dark:block" />
<img alt="Web editor interface" src="/images/quickstart/web-editor-light.png" className="block dark:hidden" />
<img alt="Web editor interface" src="/images/quickstart/web-editor-dark.png" className="hidden dark:block" />
</Frame>

### Edit the documentation

In the web editor, you can navigate through your documentation files in the sidebar. Let's update the introduction page:

Find and select `index.mdx` in the file explorer.
### Edit content

Then, in the editor, update the title field to "Hello World".
1. Select `index.mdx` from the file tree
2. Update the title field to "My awesome docs"
3. Add content using the rich text editor

<Frame>
<img alt="Editing in Web Editor" src="/images/quickstart/web-editor-editing-light.png" className="block dark:hidden" />
<img alt="Editing in Web Editor" src="/images/quickstart/web-editor-editing-dark.png" className="hidden dark:block" />
<img alt="Editing content" src="/images/quickstart/web-editor-editing-light.png" className="block dark:hidden" />
<img alt="Editing content" src="/images/quickstart/web-editor-editing-dark.png" className="hidden dark:block" />
</Frame>

<Tip>
The editor provides a rich set of formatting tools and components. Type <kbd>/</kbd> in the editor to open the command menu and access these tools.
Press `/` to open the command menu and access formatting tools and components.
</Tip>

### Publish your changes
### Publish changes

When you're satisfied with your edits, select the **Publish** button in the top-right corner. Your changes are immediately deployed to your documentation site.
Click **Publish** to deploy your changes instantly.

<Tip>
Use branches to preview and review changes through pull requests before deploying to your live site.
</Tip>
For collaborative workflows, use branches to review changes before publishing. Learn more in our [web editor guide](/editor/getting-started).

For more details about using the web editor, including using branches and pull requests to collaborate and preview changes, see our [web editor documentation](/editor/getting-started).
## Add a custom domain

## Adding a custom domain
Replace your `.mintlify.app` subdomain with your own domain.

While your `<your-project-name>.mintlify.app` subdomain works well for testing and development, most teams prefer using a custom domain for production documentation.

To add a custom domain, navigate to the [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) page in your dashboard.
1. Go to **Settings** → **Custom Domain** in your dashboard
2. Enter your domain (e.g., `docs.company.com`)
3. Add the CNAME record to your DNS provider:

<Frame>
<img src="/images/quickstart/custom-domain-light.png" alt="Custom Domain" className="block dark:hidden" />
<img src="/images/quickstart/custom-domain-dark.png" alt="Custom Domain" className="hidden dark:block" />
<img src="/images/quickstart/custom-domain-light.png" alt="Custom domain setup" className="block dark:hidden" />
<img src="/images/quickstart/custom-domain-dark.png" alt="Custom domain setup" className="hidden dark:block" />
</Frame>

Enter your domain (for example, `docs.yourcompany.com`) and follow the provided instructions to configure DNS settings with your domain provider.

<Table>
| Record Type | Name | Value | TTL |
|-------------|------|-------|-----|
| CNAME | docs (or subdomain) | cname.mintlify.app | 3600 |
</Table>
| CNAME | docs | cname.mintlify.app | 3600 |

<Info>
DNS changes can take up to 48 hours to propagate, though changes often complete much sooner.
DNS changes can take up to 48 hours to propagate globally.
</Info>

## Next steps
## What's next?

Congratulations! You have successfully deployed your documentation site with Mintlify. Here are suggested next steps to enhance your documentation:
Your documentation site is live! Here's how to make it even better:

<Card title="Configure your global settings" icon="settings" href="settings" horizontal>
Configure site-wide styling, navigation, integrations, and more with the `docs.json` file.
</Card>
<Card title="Customize your theme" icon="paintbrush" href="themes" horizontal>
Learn how to customize colors, fonts, and the overall appearance of your documentation site.
</Card>
<Card title="Organize navigation" icon="map" href="navigation" horizontal>
Structure your documentation with intuitive navigation to help users find what they need.
</Card>
<Card title="Add interactive components" icon="puzzle" href="/components/accordions" horizontal>
Enhance your documentation with interactive components like accordions, tabs, and code samples.
</Card>
<Card title="Set up API references" icon="code" href="/api-playground/overview" horizontal>
Create interactive API references with OpenAPI and AsyncAPI specifications.
</Card>
<CardGroup cols={2}>
<Card title="Configure settings" icon="settings" href="/settings">
Customize site-wide options in `docs.json`
</Card>
<Card title="Style your theme" icon="paintbrush" href="/themes">
Brand your docs with custom colors and fonts
</Card>
<Card title="Organize navigation" icon="map" href="/navigation">
Structure your content with intuitive navigation
</Card>
<Card title="Add components" icon="puzzle" href="/components/accordions">
Enhance pages with interactive elements
</Card>
</CardGroup>

## Troubleshooting

If you encounter issues during the setup process, check these common troubleshooting solutions:
## Need help?

<AccordionGroup>
<Accordion title="Local preview not working">
Make sure you have Node.js v19+ installed and that you run the `mint dev` command from the directory containing your `docs.json` file.
<Accordion title="Local preview isn't working">
Ensure you have Node.js v19+ and run `mint dev` from your project root directory containing `docs.json`.
</Accordion>
<Accordion title="Changes not reflecting on live site">
Deployment can take upwards to a few minutes. Check your GitHub Actions (for code-based workflow) or deployment logs in the Mintlify dashboard to ensure there are no build errors.
<Accordion title="Changes aren't deploying">
Check your GitHub Actions tab for build errors. Deployments typically take 2-3 minutes.
</Accordion>
<Accordion title="Custom domain not connecting">
Verify that your DNS records are set up correctly and allow sufficient time for DNS propagation (up to 48 hours). You can use tools like [DNSChecker](https://dnschecker.org) to verify your CNAME record.
Verify your CNAME record is correct and allow time for DNS propagation. Use [DNSChecker](https://dnschecker.org) to verify.
</Accordion>
</AccordionGroup>

Still stuck? [Contact our support team](/contact-support) for help.