Skip to content

Refactor quickstart page for better user experience #1379

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 4 commits into from
Closed

Refactor quickstart page for better user experience #1379

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
25be8a6
Update quickstart.mdx
mintlify[bot] Sep 29, 2025
6c60ecb
Update quickstart.mdx
mintlify[bot] Sep 29, 2025
80cc91e
Update quickstart.mdx
mintlify[bot] Sep 29, 2025
e39e747
Update quickstart.mdx
mintlify[bot] Sep 29, 2025
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
245 changes: 105 additions & 140 deletions quickstart.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,15 @@
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.
Get your documentation site live in minutes. This guide walks you through setup, your first edit, and deployment.

<Info>

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

**Prerequisites**: [Create an account](https://mintlify.com/start) and complete onboarding to get started.
</Info>

## Getting started
## Your live site

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

```
https://<your-project-name>.mintlify.app
Expand All @@ -29,58 +25,87 @@
<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.
## Connect GitHub

### Install the GitHub App

Mintlify provides a GitHub App that automates deployment when you push changes to your repository.
Set up automatic deployments by connecting your GitHub repository.

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

Check warning on line 32 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L32 

'Install the GitHub App' should use sentence-style capitalization.

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

<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. Go to **Settings** → **My Profile** in your dashboard

Check warning on line 45 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L45 

Avoid first-person pronouns such as 'My'.
2. Click **Authorize GitHub account**

<Info>
An admin for your GitHub organization may need to authorize your account depending on your organization settings.
Your GitHub organization admin may need to approve this authorization.

Check warning on line 49 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L49 

Use 'administrator' instead of 'admin'.
</Info>

## Editing workflows
## Choose your editing workflow

Mintlify offers two workflows for creating and maintaining your documentation:
Pick the workflow that fits your team:

<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 title="Web editor" icon="mouse-pointer-2" horizontal href="#web-editor">
Edit directly in your browser with a visual interface
</Card>

<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 title="Local development" icon="terminal" horizontal href="#local-development">
Work locally with your preferred code editor and Git workflow
</Card>

## Code-based workflow
## Web editor

Edit your documentation directly in your browser with a visual interface.

### Access the editor

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.
1. Go to your [dashboard](https://dashboard.mintlify.com)
2. Click **Editor** in the sidebar

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

### Make your first edit

Let's update your homepage title:

Check warning on line 80 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L80 

Try to avoid using first-person plural like 'Let's'.

1. Select `index.mdx` in the file explorer
2. Change the title field to "Hello World"

<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" />
</Frame>

<Tip>
Type <kbd>/</kbd> to open the command menu and access formatting tools and components.
</Tip>

### Publish your changes

Click **Publish** in the top-right corner. Your changes deploy immediately to your live site.

<Tip>
Use branches to preview changes before publishing. Learn more in our [web editor guide](/editor/getting-started).

Check warning on line 99 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L99 

Try to avoid using first-person plural like 'our'.
</Tip>

## Local development

Work with your documentation locally using your preferred code editor.

### Install the CLI

Check warning on line 106 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L106 

Use 'command-line tool' instead of '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:

Check warning on line 108 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L108 

Use 'command-line tool' instead of 'CLI'.

<CodeGroup>
```bash npm
Expand All @@ -93,24 +118,13 @@
</CodeGroup>

<Info>
You need Node.js installed on your machine. If you encounter installation issues, check the troubleshooting guide.
Requires Node.js v19+. Having issues? Check the troubleshooting section below.
</Info>

### Edit the documentation
### Make your first edit

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

1. Open your repository created during onboarding.
2. Open `index.mdx` and locate the top of the file:

```mdx index.mdx
---
title: "Introduction"
description: "This is the introduction to the documentation"
---
```

3. Update the `title` field to `"Hello World"`.
1. Open your repository in your code editor
2. Open `index.mdx` and update the title:

```mdx index.mdx {2}
---
Expand All @@ -119,133 +133,84 @@
---
```

### Preview the changes
### Preview locally

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

```bash
mint dev
```

Your preview will be available at `localhost:3000`.

<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" />
</Frame>

### Push the changes

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

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

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>

## Web editor workflow

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.

### Access the web editor

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

<Info>
If you have not installed the GitHub App, you will be prompted to install the app when you open the web editor.
</Info>
Your preview is available at `localhost:3000`.

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

### Edit the documentation
### Deploy your changes

In the web editor, you can navigate through your documentation files in the sidebar. Let's update the introduction page:
Push your changes to GitHub. Mintlify automatically builds and deploys your updates.

Find and select `index.mdx` in the file explorer.
Monitor deployment status in your GitHub repository or [dashboard](https://dashboard.mintlify.com).

Then, in the editor, update the title field to "Hello World".
## Add a custom domain

<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" />
</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.
</Tip>

### Publish your changes
Replace your `<your-project-name>.mintlify.app` URL with your own domain.

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.

<Tip>
Use branches to preview and review changes through pull requests before deploying to your live site.
</Tip>

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

## Adding a custom 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.

<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" />
</Frame>

Enter your domain (for example, `docs.yourcompany.com`) and follow the provided instructions to configure DNS settings with your domain provider.
1. Go to [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) in your dashboard
2. Enter your domain (e.g., `docs.yourcompany.com`)

Check warning on line 162 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L162 

Use parentheses judiciously.

Check warning on line 162 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L162 

Use 'for example' instead of 'e.g.'.
3. Add this DNS record with your domain provider:

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

Check warning on line 168 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L168 

Use parentheses judiciously.
</Table>

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

<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, but often complete much sooner.
</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 your own:

Check warning on line 182 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L182 

Don't use exclamation points in text.

<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.
Change colors, fonts, and styling to match your brand
</Card>

<Card title="Organize your navigation" icon="map" href="navigation" horizontal>
Structure your content with intuitive navigation
</Card>
<Card title="Organize navigation" icon="map" href="navigation" horizontal>
Structure your documentation with intuitive navigation to help users find what they need.

<Card title="Add components" icon="puzzle" href="/components/accordions" horizontal>
Use interactive elements like tabs, accordions, and code blocks
</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 title="Set up API docs" icon="code" href="/api-playground/overview" horizontal>
Create interactive API references from OpenAPI specs
</Card>
<Card title="Set up API references" icon="code" href="/api-playground/overview" horizontal>
Create interactive API references with OpenAPI and AsyncAPI specifications.

<Card title="Configure settings" icon="settings" href="settings" horizontal>
Customize site-wide settings in your `docs.json` file
</Card>

## Troubleshooting

If you encounter issues during the setup process, check these common troubleshooting solutions:

<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.
Ensure Node.js v19+ is installed and run `mint dev` from your project directory containing `docs.json`.

Check warning on line 208 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L208 

In general, use active voice instead of passive voice ('is installed').
</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 not appearing on live site">
Deployments take a few minutes. Check your GitHub Actions or dashboard deployment logs for errors.
</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 DNS records are correct and allow up to 48 hours for propagation. Use [DNSChecker](https://dnschecker.org) to verify your CNAME record.
</Accordion>
</AccordionGroup>
Loading