Skip to content

Rewrite quickstart page with fresh content #1151

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 with fresh content #1151

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
185 changes: 95 additions & 90 deletions quickstart.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,86 @@
---
title: "Quickstart"
description: "Deploy your documentation in minutes"
description: "Build beautiful documentation in under 10 minutes"
icon: "rocket"
---

This quickstart guide shows you how to set up and deploy your documentation site in minutes.
Get your documentation site live in minutes with this step-by-step guide.

After completing this guide, you will have a live documentation site ready to customize and expand.
You'll go from zero to a fully deployed documentation site with custom branding and interactive features.

<Info>

**Prerequisites**: Before you begin, [create an account](https://mintlify.com/start) and complete onboarding.
**Before you start**: [Sign up for Mintlify](https://mintlify.com/start) and complete the initial setup wizard.

</Info>

## Getting started
## Launch your site

After you complete the onboarding process, your documentation site automatically deploys to a unique URL with this format:
Once you finish the setup wizard, your documentation automatically goes live at:

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

Find your URL on the Overview page of your [dashboard](https://dashboard.mintlify.com/).
Check your [dashboard](https://dashboard.mintlify.com/) to find your exact URL.

<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.
Your site is ready to share immediately. Use this URL while you customize your documentation.

### 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 make changes.

Install the GitHub App by following the instructions from the onboarding checklist or your dashboard.
Follow these steps to connect GitHub:

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** in your dashboard.
2. Click **GitHub App** in the sidebar.
3. Click **Install GitHub App** to open the installation page.
4. Choose your organization or personal account.
5. Select which 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.
Remember to update permissions if you move your docs to a different repository later.
</Info>

### Authorize your GitHub account
### Link your GitHub profile

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** in your dashboard.
2. Click **My Profile** in the sidebar.
3. Click **Authorize GitHub account** to complete the connection.

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

## Editing workflows
## Choose your editing style

Mintlify offers two workflows for creating and maintaining your documentation:
Pick the workflow that matches how you prefer to work:

<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="Developer workflow" icon="terminal" horizontal href="#developer-workflow">
Work locally with your favorite code editor and Git workflow.
</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="Visual editor" icon="mouse-pointer-2" horizontal href="#visual-editor">
Edit directly in your browser with a rich visual interface.
</Card>

## Code-based workflow
## Developer workflow

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.
Perfect for teams who want to manage docs alongside their codebase using familiar development tools.

### Install the CLI
### Set up 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 work with your docs locally:

<CodeGroup>
```bash npm
Expand All @@ -93,15 +93,15 @@
</CodeGroup>

<Info>
You need Node.js installed on your machine. If you encounter installation issues, check the troubleshooting guide.
Requires Node.js v19 or higher. Having trouble? Check our 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:
Let's customize your homepage to see how editing works:

1. Open your repository created during onboarding.
2. Open `index.mdx` and locate the top of the file:
1. Open your documentation repository.
2. Find `index.mdx` and look at the frontmatter:

Check warning on line 104 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L104 

Did you really mean 'frontmatter'?

```mdx index.mdx
---
Expand All @@ -110,142 +110,147 @@
---
```

3. Update the `title` field to `"Hello World"`.
3. Change the title to something unique:

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

### Preview the changes
### Test locally

To preview the changes locally, run the following command:
Preview your changes before publishing:

```bash
mint dev
```

Your preview will be available at `localhost:3000`.
Open `localhost:3000` to see your site running locally.

<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
### Deploy your changes

When you are ready to publish your changes, push them to your repository.
When you're happy with your edits, commit and push 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).
```bash
git add .
git commit -m "Update homepage title"
git push
```

After the deployment completes, your latest update will be available at `<your-project-name>.mintlify.app`.
Mintlify detects your changes and automatically rebuilds your site. Track the deployment in your GitHub Actions or [dashboard](https://dashboard.mintlify.com).

<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.
Your updates will be live at `<your-project-name>.mintlify.app` within minutes.

<Card title="Skip to custom domain setup" icon="arrow-down" href="#custom-domain" horizontal>
Ready to use your own domain? Jump ahead to the custom domain section.
</Card>

## Web editor workflow
## Visual editor

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.
Ideal for content creators who want to focus on writing without dealing with code or command lines.

### Access the web editor
### Open the editor

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

<Info>
If you have not installed the GitHub App, you will be prompted to install the app when you open the web editor.
The editor will prompt you to install the GitHub App if you haven't already.
</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" />
</Frame>

### Edit the documentation

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

Find and select `index.mdx` in the file explorer.
Navigate to any page using the file tree on the left. Let's update your homepage:

Then, in the editor, update the title field to "Hello World".
1. Click on `index.mdx` in the file explorer.
2. Change the title field to "Welcome to our docs".

<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.
Press <kbd>/</kbd> anywhere in the editor to open the component menu and add rich elements like callouts, code blocks, and more.

Check warning on line 186 in quickstart.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

quickstart.mdx#L186 

Did you really mean 'callouts'?
</Tip>

### Publish your changes
### Go live

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 the **Publish** button in the top-right corner to deploy your changes instantly.

<Tip>
Use branches to preview and review changes through pull requests before deploying to your live site.
Use branches to collaborate with your team and preview changes before they go live.
</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).
Learn more about advanced editor features in our [web editor guide](/editor/getting-started).

## Adding a custom domain
## 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.
Replace your `.mintlify.app` URL with your own branded domain for a professional look.

To add a custom domain, navigate to the [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) page in your dashboard.
Navigate to [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) 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.
Enter your desired domain (like `docs.yourcompany.com`) and 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 |
</Table>

<Info>
DNS changes can take up to 48 hours to propagate, though changes often complete much sooner.
DNS changes typically take 15-30 minutes but can take up to 48 hours in some cases.
</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:
You now have a live documentation site! 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 title="Customize your brand" icon="paintbrush" href="themes" horizontal>
Add your colors, fonts, and logo to match your brand identity.
</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 title="Structure your content" icon="map" href="navigation" horizontal>
Organize pages with intuitive navigation that helps users find what they need.
</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 rich components" icon="puzzle" href="/components/accordions" horizontal>
Make your docs interactive with tabs, accordions, code examples, and more.
</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="Configure site settings" icon="settings" href="settings" horizontal>
Set up analytics, SEO, custom scripts, and other site-wide configurations.
</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="Build API docs" icon="code" href="/api-playground/overview" horizontal>
Turn your OpenAPI specs into beautiful, interactive API references.
</Card>

## Troubleshooting
## Common issues

If you encounter issues during the setup process, check these common troubleshooting solutions:
Run into problems? Here are quick fixes for the most common issues:

<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="Can't run mint dev locally">
Ensure you have Node.js v19+ installed and you're running the command from the folder containing your `docs.json` file.
</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 showing up">
Deployments usually take 2-3 minutes. Check your GitHub Actions tab or dashboard deployment logs for any 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.
<Accordion title="Custom domain isn't working">
Double-check your CNAME record is pointing to `cname.mintlify.app`. Use [DNSChecker](https://dnschecker.org) to verify your DNS settings have propagated.
</Accordion>
</AccordionGroup>