Skip to content

Commit fbd1bf8

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

File tree

1 file changed

+86
-151
lines changed

1 file changed

+86
-151
lines changed

‎quickstart.mdx‎

Lines changed: 86 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,251 +1,186 @@
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="Local development" icon="terminal" href="#local-development">
48+
Edit files locally with your favorite tools
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>
98-
99-
### Edit the documentation
72+
### Make your first edit
10073

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"
110-
---
111-
```
112-
113-
3. Update the `title` field to `"Hello World"`.
114-
115-
```mdx index.mdx {2}
116-
---
117-
title: "Hello World"
118-
description: "This is the introduction to the documentation"
79+
title: "My Documentation"
80+
description: "Welcome to my docs"
11981
---
12082
```
12183

122-
### Preview the changes
84+
### Preview locally
12385

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 reloading.
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
99+
### Deploy changes
138100

139-
When you are ready to publish your changes, push them to your repository.
101+
Push your changes to GitHub. Mintlify automatically builds and deploys your updates.
140102

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).
103+
## Web editor
142104

143-
After the deployment completes, your latest update will be available at `<your-project-name>.mintlify.app`.
105+
Edit documentation directly in your browser with a visual interface.
144106

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>
107+
### Access the editor
148108

149-
## Web editor workflow
150-
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>
161-
162-
<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" />
165-
</Frame>
166-
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:
170-
171-
Find and select `index.mdx` in the file explorer.
172-
173-
Then, in the editor, update the title field to "Hello World".
109+
1. Open your [dashboard](https://dashboard.mintlify.com)
110+
2. Click **Editor** in the sidebar
174111

175112
<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" />
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" />
178115
</Frame>
179116

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
117+
### Edit content
185118

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.
119+
Select any file from the sidebar to start editing. The editor provides rich formatting tools and live preview.
187120

188121
<Tip>
189-
Use branches to preview and review changes through pull requests before deploying to your live site.
122+
Type `/` to open the command menu and access components, formatting, and more.
190123
</Tip>
191124

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).
193-
194-
## Adding a custom domain
195-
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.
125+
### Publish changes
197126

198-
To add a custom domain, navigate to the [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) page in your dashboard.
127+
Click **Publish** to deploy your changes instantly.
199128

200129
<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" />
130+
<img alt="Publishing changes" src="/images/quickstart/web-editor-editing-light.png" className="block dark:hidden" />
131+
<img alt="Publishing changes" src="/images/quickstart/web-editor-editing-dark.png" className="hidden dark:block" />
203132
</Frame>
204133

205-
Enter your domain (for example, `docs.yourcompany.com`) and follow the provided instructions to configure DNS settings with your domain provider.
134+
## Add a custom domain
135+
136+
Replace your `.mintlify.app` URL with your own domain:
137+
138+
1. Go to **Settings** → **Custom Domain** in your dashboard
139+
2. Enter your domain (e.g., `docs.company.com`)
140+
3. Add this DNS record with your domain provider:
206141

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

213-
<Info>
214-
DNS changes can take up to 48 hours to propagate, though changes often complete much sooner.
215-
</Info>
148+
<Frame>
149+
<img src="/images/quickstart/custom-domain-light.png" alt="Custom Domain Setup" className="block dark:hidden" />
150+
<img src="/images/quickstart/custom-domain-dark.png" alt="Custom Domain Setup" className="hidden dark:block" />
151+
</Frame>
216152

217-
## Next steps
153+
DNS changes typically take 5-30 minutes to propagate.
218154

219-
Congratulations! You have successfully deployed your documentation site with Mintlify. Here are suggested next steps to enhance your documentation:
155+
## What's next?
220156

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>
157+
Your documentation site is live! Here's how to make it even better:
236158

237-
## Troubleshooting
159+
<CardGroup cols={2}>
160+
<Card title="Customize appearance" icon="paintbrush" href="themes">
161+
Change colors, fonts, and branding
162+
</Card>
163+
<Card title="Organize navigation" icon="map" href="navigation">
164+
Structure your content with menus and groups
165+
</Card>
166+
<Card title="Add components" icon="puzzle" href="/components/accordions">
167+
Use tabs, callouts, code blocks, and more
168+
</Card>
169+
<Card title="API documentation" icon="code" href="/api-playground/overview">
170+
Generate interactive API references
171+
</Card>
172+
</CardGroup>
238173

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

241176
<AccordionGroup>
242177
<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.
178+
Ensure Node.js v19+ is installed and run `mint dev` from your project root directory.
244179
</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.
180+
<Accordion title="Changes not appearing">
181+
Check your GitHub Actions or dashboard deployment logs for build errors. Deployments typically take 1-3 minutes.
247182
</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.
183+
<Accordion title="Custom domain issues">
184+
Verify your CNAME record is correct and allow time for DNS propagation. Use [DNSChecker](https://dnschecker.org) to verify.
250185
</Accordion>
251186
</AccordionGroup>

0 commit comments

Comments
 (0)