diff --git a/quickstart.mdx b/quickstart.mdx index 076b50534..09990fbb6 100644 --- a/quickstart.mdx +++ b/quickstart.mdx @@ -1,251 +1,354 @@ --- -title: "Quickstart" -description: "Deploy your documentation in minutes" +title: "Get started with Mintlify" +description: "Deploy your first documentation site in under 10 minutes" 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. - - - -**Prerequisites**: Before you begin, [create an account](https://mintlify.com/start) and complete onboarding. - - - -## Getting started - -After you complete the onboarding process, your documentation site automatically deploys to a unique URL with this format: - -``` -https://.mintlify.app -``` - -Find your URL on the Overview page of your [dashboard](https://dashboard.mintlify.com/). - - - Mintlify Domain - Mintlify Domain - - -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 - -Mintlify provides a GitHub App that automates deployment when you push changes to your repository. - -Install the GitHub App by following the instructions from the onboarding checklist or your dashboard. - -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. - - - GitHub App Installation - GitHub App Installation - - - - Update the GitHub App permissions if you move your documentation to a different repository. - - -### Authorize your GitHub 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. +Transform your documentation from idea to live site in minutes. This guide walks you through everything from initial setup to your first published page. - An admin for your GitHub organization may need to authorize your account depending on your organization settings. +**Before you begin**: You'll need a [Mintlify account](https://mintlify.com/start) and a GitHub account. The setup process takes about 10 minutes. -## Editing workflows - -Mintlify offers two workflows for creating and maintaining your documentation: - - - For users who prefer working with existing tools in their local environment. Click to jump to this section. +## What you'll accomplish + +By the end of this guide, you'll have: + +- ✅ A live documentation site at `your-project.mintlify.app` +- ✅ GitHub integration for automatic deployments +- ✅ Your first customized documentation page +- ✅ Knowledge of both editing workflows (code and web editor) + +## Set up your documentation site + + + + [Sign up for Mintlify](https://mintlify.com/start) and complete the onboarding flow. + + During onboarding, you'll: + - Choose a project name (this becomes your URL) + - Connect your GitHub account + - Select a starter template + + + Your documentation site is now live at `https://your-project.mintlify.app` + + + + + Connect Mintlify to your GitHub repositories for automatic deployments. + + 1. Navigate to **Settings** → **GitHub App** in your [dashboard](https://dashboard.mintlify.com) + 2. Click **Install GitHub App** (opens new tab) + 3. Select your GitHub organization or personal account + 4. Choose repositories to connect (you can modify this later) + 5. Complete the installation + + + GitHub App installation page showing repository selection + GitHub App installation page showing repository selection + + + + Install the app on your organization account to give your team members access to collaborative features. + + + + + Complete the authorization to enable full GitHub integration. + + 1. Go to **Settings** → **My Profile** in your dashboard + 2. Click **Authorize GitHub account** + 3. Follow the GitHub authorization flow + + + If you're part of a GitHub organization, an admin may need to approve this authorization depending on your organization's settings. + + + + You can now push changes to GitHub and see them automatically deployed to your site. + + + + +## Choose your editing workflow + +Mintlify supports two distinct workflows. Pick the one that matches your team's preferences: + + + + Perfect for developers who want to work locally with familiar tools like VS Code, Git, and the command line. - - For users who prefer a visual interface in their web browser. Click to jump to this section. + + Ideal for content creators who prefer a visual, browser-based editing experience with instant previews. + -## Code-based workflow + +You can switch between workflows at any time. Many teams use both depending on the type of changes they're making. + -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. +## Code-based editing -### Install the CLI +Set up your local development environment to edit documentation with your favorite tools. -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 CLI to work with your documentation locally. + + ```bash npm - npm i -g mint + npm install -g mint ``` - + ```bash pnpm pnpm add -g mint ``` - - - - You need Node.js installed on your machine. If you encounter installation issues, check the troubleshooting guide. - - -### Edit the documentation - -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"`. - -```mdx index.mdx {2} ---- -title: "Hello World" -description: "This is the introduction to the documentation" ---- -``` - -### Preview the changes - -To preview the changes locally, run the following command: - -```bash -mint dev -``` - -Your preview will be available at `localhost:3000`. - - - Mintlify Dev - Mintlify Dev - - -### 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 `.mintlify.app`. - - - Optionally, skip the web editor workflow and jump to adding a custom domain. + + ```bash yarn + yarn global add mint + ``` + + + + Requires Node.js version 19 or higher. Check your version with `node --version`. + + + + Verify installation by running `mint --version` in your terminal. + + + + + Clone the repository that was created during your Mintlify onboarding. + + ```bash + git clone https://github.com/your-username/your-docs-repo.git + cd your-docs-repo + ``` + + + You should see files like `docs.json`, `index.mdx`, and other documentation files in the repository. + + + + + Preview your documentation site locally while you make changes. + + ```bash + mint dev + ``` + + Your site will be available at `http://localhost:3000`. + + + Local development server running in terminal + Local development server running in terminal + + + + The development server automatically reloads when you save changes to your files. + + + + + Update the homepage to see the editing workflow in action. + + 1. Open `index.mdx` in your code editor + 2. Find the frontmatter at the top of the file: + + ```mdx index.mdx + --- + title: "Introduction" + description: "Welcome to our documentation" + --- + ``` + + 3. Change the title to something personal: + + ```mdx index.mdx {2} + --- + title: "Welcome to Mintlify" + description: "Your beautiful documentation starts here" + --- + ``` + + 4. Save the file and check your local preview + + + Your changes should appear immediately at `http://localhost:3000`. + + + + + Push your changes to see them live on your documentation site. + + ```bash + git add . + git commit -m "Update homepage title" + git push origin main + ``` + + Mintlify automatically builds and deploys your changes. This typically takes 1-2 minutes. + + + Visit `your-project.mintlify.app` to see your changes live. + + + + +## Web editor editing + +Use the browser-based editor for a visual editing experience with instant feedback. + + + + Open the visual editor directly in your browser. + + 1. Go to your [Mintlify dashboard](https://dashboard.mintlify.com) + 2. Click **Editor** in the left sidebar + + The editor loads with your documentation files in a file explorer on the left. + + + Mintlify web editor showing file explorer and visual editing interface + Mintlify web editor showing file explorer and visual editing interface + + + + If you haven't installed the GitHub App yet, you'll be prompted to do so when opening the editor. + + + + + Find and edit your documentation files using the visual interface. + + 1. Click on `index.mdx` in the file explorer + 2. The file opens in the visual editor + 3. Click on the title to edit it directly + 4. Change it to "Welcome to Mintlify" + + + Editing a page title in the Mintlify web editor + Editing a page title in the Mintlify web editor + + + + Press `/` in the editor to open the command palette and access formatting tools, components, and other features. + + + + + Review your changes and publish them to your live site. + + 1. Your changes appear in real-time in the preview pane + 2. When satisfied, click **Publish** in the top-right corner + 3. Your changes are immediately deployed to your documentation site + + + Visit `your-project.mintlify.app` to see your published changes. + + + + + +The web editor supports advanced features like branch-based editing and pull request workflows. Learn more in our [web editor documentation](/editor/getting-started). + + +## Add a custom domain + +Replace your `.mintlify.app` domain with your own branded domain. + + + + Navigate to [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) in your dashboard. + + + + Enter your desired domain (e.g., `docs.yourcompany.com`) and follow the DNS instructions. + + + Custom domain configuration interface + Custom domain configuration interface + + + Add this CNAME record with your DNS provider: + + | Record Type | Name | Value | TTL | + |-------------|------|-------|-----| + | CNAME | docs (or your subdomain) | cname.mintlify.app | 3600 | + + + + DNS changes typically take 5-15 minutes but can take up to 48 hours. + + + Use [DNSChecker](https://dnschecker.org) to verify your CNAME record is propagating correctly. + + + + When configured correctly, your documentation will be available at your custom domain. + + + + +## What's next? + +You've successfully deployed your documentation site! Here are the most important next steps: + + + + Customize your site's appearance, navigation, and integrations through the `docs.json` configuration file. -## 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. - - - If you have not installed the GitHub App, you will be prompted to install the app when you open the web editor. - - - - The Mintlify web editor in the visual editor mode - The Mintlify web editor in the visual editor mode - - -### Edit the documentation - -In the web editor, you can navigate through your documentation files in the sidebar. Let's update the introduction page: - -Find and select `index.mdx` in the file explorer. - -Then, in the editor, update the title field to "Hello World". - - - Editing in Web Editor - Editing in Web Editor - - - - The editor provides a rich set of formatting tools and components. Type / in the editor to open the command menu and access these tools. - - -### Publish your changes - -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. + + Structure your documentation with clear navigation that helps users find what they need quickly. + - - Use branches to preview and review changes through pull requests before deploying to your live site. - + + Enhance your content with tabs, accordions, code blocks, and other interactive elements. + -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). + + Create interactive API references from your OpenAPI specifications. + + -## Adding a custom domain +## Troubleshooting -While your `.mintlify.app` subdomain works well for testing and development, most teams prefer using a custom domain for production documentation. +Run into issues? Here are solutions to the most common problems: -To add a custom domain, navigate to the [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) page in your dashboard. + + +**Check Node.js version**: Ensure you have Node.js v19+ installed (`node --version`) - - Custom Domain - Custom Domain - +**Verify file location**: Run `mint dev` from the directory containing your `docs.json` file -Enter your domain (for example, `docs.yourcompany.com`) and follow the provided instructions to configure DNS settings with your domain provider. +**Clear cache**: Try `mint dev --clean` if you see build errors + - -| Record Type | Name | Value | TTL | -|-------------|------|-------|-----| -| CNAME | docs (or subdomain) | cname.mintlify.app | 3600 | -
+ +**Check deployment status**: Visit your GitHub repository's Actions tab to see build status - - DNS changes can take up to 48 hours to propagate, though changes often complete much sooner. - +**Wait for deployment**: Deployments can take 2-3 minutes to complete -## Next steps +**Clear browser cache**: Hard refresh your browser (`Ctrl+F5` or `Cmd+Shift+R`) + -Congratulations! You have successfully deployed your documentation site with Mintlify. Here are suggested next steps to enhance your documentation: + +**Update repository access**: Go to GitHub Settings → Applications → Mintlify and adjust repository permissions - - Configure site-wide styling, navigation, integrations, and more with the `docs.json` file. - - - Learn how to customize colors, fonts, and the overall appearance of your documentation site. - - - Structure your documentation with intuitive navigation to help users find what they need. - - - Enhance your documentation with interactive components like accordions, tabs, and code samples. - - - Create interactive API references with OpenAPI and AsyncAPI specifications. - +**Re-authorize account**: Try disconnecting and reconnecting your GitHub account in Mintlify settings + -## Troubleshooting + +**Verify DNS records**: Use [DNSChecker](https://dnschecker.org) to confirm your CNAME record -If you encounter issues during the setup process, check these common troubleshooting solutions: +**Allow propagation time**: DNS changes can take up to 48 hours to fully propagate - - - Make sure you have Node.js v19+ installed and that you run the `mint dev` command from the directory containing your `docs.json` file. - - - 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. - - - 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 subdomain**: Ensure you're using the correct subdomain (e.g., `docs` not `www`) +
+ +Need more help? Visit our [support documentation](/help) or join our [Discord community](https://discord.gg/mintlify) for assistance. \ No newline at end of file