Skip to content

Commit 25743c8

Browse files
mintlify-development[bot]mintlify-development[bot]
authored
Update quickstart.mdx
1 parent 0b5b2ea commit 25743c8

File tree

1 file changed

+80
-148
lines changed

1 file changed

+80
-148
lines changed

‎quickstart.mdx‎

Lines changed: 80 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,251 +1,183 @@
11
---
22
title: "Quickstart"
3-
description: "Deploy your documentation in minutes"
3+
description: "Get your documentation site running in under 5 minutes"
44
icon: "rocket"
55
---
66

7-
This quickstart guide shows you how to set up and deploy your documentation site in minutes.
8-
9-
After completing this guide, you will have a live documentation site ready to customize and expand.
7+
Build and deploy beautiful documentation in minutes. This guide walks you through creating your first documentation site from setup to deployment.
108

119
<Info>
12-
13-
**Prerequisites**: Before you begin, [create an account](https://mintlify.com/start) and complete onboarding.
14-
10+
**Prerequisites**: You need a [Mintlify account](https://mintlify.com/start) to get started.
1511
</Info>
1612

17-
## Getting started
13+
## Create your site
1814

19-
After you complete the onboarding process, your documentation site automatically deploys to a unique URL with this format:
15+
Sign up for Mintlify and complete the onboarding flow. Your documentation site deploys automatically to:
2016

2117
```
2218
https://<your-project-name>.mintlify.app
2319
```
2420

25-
Find your URL on the Overview page of your [dashboard](https://dashboard.mintlify.com/).
21+
Your site is live immediately. Find the URL in your [dashboard](https://dashboard.mintlify.com/).
2622

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

32-
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.
28+
## Connect GitHub
3329

34-
### Install the GitHub App
30+
Connect your GitHub repository to enable automatic deployments:
3531

36-
Mintlify provides a GitHub App that automates deployment when you push changes to your repository.
37-
38-
Install the GitHub App by following the instructions from the onboarding checklist or your dashboard.
39-
40-
1. Navigate to **Settings** in your Mintlify dashboard.
41-
2. Select **GitHub App** from the sidebar.
42-
3. Select **Install GitHub App**. This opens a new tab to the GitHub App installation page.
43-
4. Select the organization or user account where you want to install the app.
44-
5. Select the repositories that you want to connect.
32+
1. Go to **Settings** → **GitHub App** in your dashboard
33+
2. Click **Install GitHub App**
34+
3. Select your organization and repositories
35+
4. Authorize your GitHub account under **Settings** → **My Profile**
4536

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

51-
<Info>
52-
Update the GitHub App permissions if you move your documentation to a different repository.
53-
</Info>
54-
55-
### Authorize your GitHub account
56-
57-
1. Navigate to **Settings** in your Mintlify dashboard.
58-
2. Select **My Profile** from the sidebar.
59-
3. Select **Authorize GitHub account**. This opens a new tab to the GitHub authorization page.
60-
61-
<Info>
62-
An admin for your GitHub organization may need to authorize your account depending on your organization settings.
63-
</Info>
64-
65-
## Editing workflows
66-
67-
Mintlify offers two workflows for creating and maintaining your documentation:
42+
## Choose your workflow
6843

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

73-
<Card title="Web editor workflow" icon="mouse-pointer-2" horizontal href="#web-editor-workflow">
74-
For users who prefer a visual interface in their web browser. Click to jump to this section.
75-
</Card>
46+
<CardGroup cols={2}>
47+
<Card title="Code editor" icon="terminal" href="#local-development">
48+
Edit files locally with your favorite code editor
49+
</Card>
50+
<Card title="Web editor" icon="mouse-pointer-2" href="#web-editor">
51+
Edit directly in your browser with a visual interface
52+
</Card>
53+
</CardGroup>
7654

77-
## Code-based workflow
55+
## Local development
7856

79-
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.
57+
Work with documentation files in your local environment alongside your code.
8058

8159
### Install the CLI
8260

83-
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:
61+
Install the Mintlify CLI to preview changes locally:
8462

8563
<CodeGroup>
8664
```bash npm
8765
npm i -g mint
8866
```
89-
9067
```bash pnpm
9168
pnpm add -g mint
9269
```
9370
</CodeGroup>
9471

95-
<Info>
96-
You need Node.js installed on your machine. If you encounter installation issues, check the troubleshooting guide.
97-
</Info>
72+
### Make your first edit
9873

99-
### Edit the documentation
100-
101-
After setting up your environment, you can start editing your documentation files. For example, update the title of the introduction page:
102-
103-
1. Open your repository created during onboarding.
104-
2. Open `index.mdx` and locate the top of the file:
74+
1. Clone your repository from the onboarding process
75+
2. Open `index.mdx` and update the title:
10576

10677
```mdx index.mdx
10778
---
108-
title: "Introduction"
109-
description: "This is the introduction to the documentation"
79+
title: "My Documentation"
80+
description: "Welcome to my docs"
11081
---
11182
```
11283

113-
3. Update the `title` field to `"Hello World"`.
84+
### Preview locally
11485

115-
```mdx index.mdx {2}
116-
---
117-
title: "Hello World"
118-
description: "This is the introduction to the documentation"
119-
---
120-
```
121-
122-
### Preview the changes
123-
124-
To preview the changes locally, run the following command:
86+
Run the development server:
12587

12688
```bash
12789
mint dev
12890
```
12991

130-
Your preview will be available at `localhost:3000`.
92+
Your site runs at `localhost:3000` with live reload.
13193

13294
<Frame>
13395
<img src="/images/quickstart/mintlify-dev-light.png" alt="Mintlify Dev" className="block dark:hidden" />
13496
<img src="/images/quickstart/mintlify-dev-dark.png" alt="Mintlify Dev" className="hidden dark:block" />
13597
</Frame>
13698

137-
### Push the changes
138-
139-
When you are ready to publish your changes, push them to your repository.
99+
### Deploy changes
140100

141-
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).
101+
Push your changes to GitHub. Mintlify automatically builds and deploys your updates.
142102

143-
After the deployment completes, your latest update will be available at `<your-project-name>.mintlify.app`.
103+
## Web editor
144104

145-
<Card title="Jump to adding a custom domain" icon="arrow-down" href="#adding-a-custom-domain" horizontal>
146-
Optionally, skip the web editor workflow and jump to adding a custom domain.
147-
</Card>
105+
Edit documentation directly in your browser without any local setup.
148106

149-
## Web editor workflow
107+
### Access the editor
150108

151-
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.
152-
153-
### Access the web editor
154-
155-
1. Log in to your [dashboard](https://dashboard.mintlify.com).
156-
2. Select **Editor** on the left sidebar.
157-
158-
<Info>
159-
If you have not installed the GitHub App, you will be prompted to install the app when you open the web editor.
160-
</Info>
109+
1. Open your [dashboard](https://dashboard.mintlify.com)
110+
2. Click **Editor** in the sidebar
161111

162112
<Frame>
163-
<img alt="The Mintlify web editor in the visual editor mode" src="/images/quickstart/web-editor-light.png" className="block dark:hidden" />
164-
<img alt="The Mintlify web editor in the visual editor mode" src="/images/quickstart/web-editor-dark.png" className="hidden dark:block" />
113+
<img alt="The Mintlify web editor" src="/images/quickstart/web-editor-light.png" className="block dark:hidden" />
114+
<img alt="The Mintlify web editor" src="/images/quickstart/web-editor-dark.png" className="hidden dark:block" />
165115
</Frame>
166116

167-
### Edit the documentation
168-
169-
In the web editor, you can navigate through your documentation files in the sidebar. Let's update the introduction page:
117+
### Edit content
170118

171-
Find and select `index.mdx` in the file explorer.
119+
Select any file from the sidebar to start editing. The editor provides:
172120

173-
Then, in the editor, update the title field to "Hello World".
174-
175-
<Frame>
176-
<img alt="Editing in Web Editor" src="/images/quickstart/web-editor-editing-light.png" className="block dark:hidden" />
177-
<img alt="Editing in Web Editor" src="/images/quickstart/web-editor-editing-dark.png" className="hidden dark:block" />
178-
</Frame>
179-
180-
<Tip>
181-
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.
182-
</Tip>
183-
184-
### Publish your changes
185-
186-
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.
121+
- Rich text formatting
122+
- Component insertion with `/` commands
123+
- Real-time preview
124+
- Branch management for collaboration
187125

188126
<Tip>
189-
Use branches to preview and review changes through pull requests before deploying to your live site.
127+
Type `/` in the editor to access components and formatting options.
190128
</Tip>
191129

192-
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).
130+
### Publish changes
193131

194-
## Adding a custom domain
132+
Click **Publish** to deploy your changes instantly.
195133

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

198-
To add a custom domain, navigate to the [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) page in your dashboard.
136+
Replace your `.mintlify.app` domain with your own:
199137

200-
<Frame>
201-
<img src="/images/quickstart/custom-domain-light.png" alt="Custom Domain" className="block dark:hidden" />
202-
<img src="/images/quickstart/custom-domain-dark.png" alt="Custom Domain" className="hidden dark:block" />
203-
</Frame>
204-
205-
Enter your domain (for example, `docs.yourcompany.com`) and follow the provided instructions to configure DNS settings with your domain provider.
138+
1. Go to **Settings** → **Custom Domain** in your dashboard
139+
2. Enter your domain (e.g., `docs.yourcompany.com`)
140+
3. Add this CNAME record to your DNS:
206141

207142
<Table>
208143
| Record Type | Name | Value | TTL |
209144
|-------------|------|-------|-----|
210-
| CNAME | docs (or subdomain) | cname.mintlify.app | 3600 |
145+
| CNAME | docs | cname.mintlify.app | 3600 |
211146
</Table>
212147

213148
<Info>
214-
DNS changes can take up to 48 hours to propagate, though changes often complete much sooner.
149+
DNS changes can take up to 48 hours to propagate.
215150
</Info>
216151

217-
## Next steps
218-
219-
Congratulations! You have successfully deployed your documentation site with Mintlify. Here are suggested next steps to enhance your documentation:
152+
## What's next
220153

221-
<Card title="Configure your global settings" icon="settings" href="settings" horizontal>
222-
Configure site-wide styling, navigation, integrations, and more with the `docs.json` file.
223-
</Card>
224-
<Card title="Customize your theme" icon="paintbrush" href="themes" horizontal>
225-
Learn how to customize colors, fonts, and the overall appearance of your documentation site.
226-
</Card>
227-
<Card title="Organize navigation" icon="map" href="navigation" horizontal>
228-
Structure your documentation with intuitive navigation to help users find what they need.
229-
</Card>
230-
<Card title="Add interactive components" icon="puzzle" href="/components/accordions" horizontal>
231-
Enhance your documentation with interactive components like accordions, tabs, and code samples.
232-
</Card>
233-
<Card title="Set up API references" icon="code" href="/api-playground/overview" horizontal>
234-
Create interactive API references with OpenAPI and AsyncAPI specifications.
235-
</Card>
154+
Your documentation site is ready. Here's how to make it shine:
236155

237-
## Troubleshooting
156+
<CardGroup cols={2}>
157+
<Card title="Configure settings" icon="settings" href="settings">
158+
Customize navigation, styling, and integrations
159+
</Card>
160+
<Card title="Choose a theme" icon="paintbrush" href="themes">
161+
Pick colors and fonts that match your brand
162+
</Card>
163+
<Card title="Add components" icon="puzzle" href="/components/accordions">
164+
Use interactive elements like tabs and code blocks
165+
</Card>
166+
<Card title="API documentation" icon="code" href="/api-playground/overview">
167+
Generate interactive API references
168+
</Card>
169+
</CardGroup>
238170

239-
If you encounter issues during the setup process, check these common troubleshooting solutions:
171+
## Need help?
240172

241173
<AccordionGroup>
242174
<Accordion title="Local preview not working">
243-
Make sure you have Node.js v19+ installed and that you run the `mint dev` command from the directory containing your `docs.json` file.
175+
Ensure Node.js v19+ is installed and run `mint dev` from your project root directory.
244176
</Accordion>
245-
<Accordion title="Changes not reflecting on live site">
246-
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.
177+
<Accordion title="Changes not appearing">
178+
Check your GitHub Actions or dashboard deployment logs for build errors. Deployments typically take 1-2 minutes.
247179
</Accordion>
248-
<Accordion title="Custom domain not connecting">
249-
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.
180+
<Accordion title="Custom domain issues">
181+
Verify your CNAME record is correct and allow time for DNS propagation. Use [DNSChecker](https://dnschecker.org) to verify.
250182
</Accordion>
251183
</AccordionGroup>

0 commit comments

Comments
 (0)