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
129 changes: 98 additions & 31 deletions quickstart.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,17 @@

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.

Check warning on line 9 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L9

Avoid using 'will'.

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

Check warning on line 12 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L12

': B' should be in lowercase.
</Info>

**Prerequisites**: Before you begin, [create an account](https://mintlify.com/start) and complete onboarding.
this is just to show jack how this works

</Info>
<Card title="New Card" icon="sparkles">

</Card>

## Getting started

Expand All @@ -25,13 +29,22 @@
Find your URL on the Overview page of your [dashboard](https://dashboard.mintlify.com/).

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

Check warning on line 47 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L47

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

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

Expand All @@ -44,8 +57,17 @@
5. Select the repositories that you want 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" />
<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>
Expand All @@ -55,11 +77,11 @@
### Authorize your GitHub account

1. Navigate to **Settings** in your Mintlify dashboard.
2. Select **My Profile** from the sidebar.

Check warning on line 80 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L80

Avoid first-person pronouns such as 'My'.
3. Select **Authorize GitHub account**. This opens a new tab to the GitHub authorization page.

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

Check warning on line 84 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L84

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

## Editing workflows
Expand All @@ -78,18 +100,21 @@

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.

### Install the CLI

Check warning on line 103 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L103

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:

Check warning on line 105 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L105

Use parentheses judiciously.

Check warning on line 105 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L105

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

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

```bash pnpm
pnpm add -g mint
```
```bash npm
npm i -g mint
```


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

Copy link

Choose a reason for hiding this comment

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

Bug: CodeGroup Parsing Error

The CodeGroup component's structure is broken. Its child code blocks are no longer properly indented, causing them to be parsed as siblings. This leaves the CodeGroup empty and prevents the grouped code block functionality from working.

Fix in Cursor Fix in Web

</CodeGroup>

<Info>
Expand Down Expand Up @@ -127,11 +152,20 @@
mint dev
```

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

Check warning on line 155 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L155

Avoid using 'will'.

<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="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
Expand All @@ -140,15 +174,15 @@

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

Check warning on line 177 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L177

Avoid using 'will'.

<Card title="Jump to adding a custom domain" icon="arrow-down" href="#adding-a-custom-domain" horizontal>
<Card title="Jump to adding a custom domain" icon="arrow-down" horizontal href="#adding-a-custom-domain">
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.

Check warning on line 185 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L185

Use parentheses judiciously.

### Access the web editor

Expand All @@ -156,29 +190,49 @@
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.

Check warning on line 193 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L193

Use 'haven't' instead of 'have not'.

Check warning on line 193 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L193

Avoid using 'will'.

Check warning on line 193 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L193

In general, use active voice instead of passive voice ('be prompted').
</Info>

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

### Edit the documentation

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

Check warning on line 212 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L212

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

Find and select `index.mdx` in the file explorer.

Then, in the editor, update the title field to "Hello World".

Check warning on line 216 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L216

Commas and periods go inside quotation marks.

<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 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.
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.
Copy link

Choose a reason for hiding this comment

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

Bug: Tip Component Text Flow Issue

An unnecessary line break was introduced within the Tip component in quickstart.mdx, splitting the sentence "Type / in the editor..." This breaks the natural flow and readability of the text.

Fix in Cursor Fix in Web

</Tip>

### Publish your changes
Expand All @@ -189,7 +243,7 @@
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).

Check warning on line 246 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L246

Try to avoid using first-person plural like 'our'.

## Adding a custom domain

Expand All @@ -198,39 +252,52 @@
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" />
<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.

Check warning on line 268 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L268

Use parentheses judiciously.

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

Check warning on line 273 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L273

Use parentheses judiciously.
</Table>

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

## Next steps

Check warning on line 280 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L280

'Next steps' should use sentence-style capitalization.

Congratulations! You have successfully deployed your documentation site with Mintlify. Here are suggested next steps to enhance your documentation:

Check warning on line 282 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L282

Don't use exclamation points in text.

Check warning on line 282 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L282

In general, use active voice instead of passive voice ('are suggested').

<Card title="Configure your global settings" icon="settings" href="settings" horizontal>
<Card title="Configure your global settings" icon="settings" horizontal href="settings">
Configure site-wide styling, navigation, integrations, and more with the `docs.json` file.
</Card>
<Card title="Customize your theme" icon="paintbrush" href="themes" horizontal>

<Card title="Customize your theme" icon="paintbrush" horizontal href="themes">
Learn how to customize colors, fonts, and the overall appearance of your documentation site.
</Card>
<Card title="Organize navigation" icon="map" href="navigation" horizontal>

<Card title="Organize navigation" icon="map" horizontal href="navigation">
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>

<Card title="Add interactive components" icon="puzzle" horizontal href="/components/accordions">
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>

<Card title="Set up API references" icon="code" horizontal href="/api-playground/overview">
Create interactive API references with OpenAPI and AsyncAPI specifications.
</Card>

Expand All @@ -246,6 +313,6 @@
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>
<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.

Check warning on line 316 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L316

In general, use active voice instead of passive voice ('are set').
</Accordion>
</AccordionGroup>
</AccordionGroup>