diff --git a/quickstart.mdx b/quickstart.mdx index 076b50534..7f1f0cb70 100644 --- a/quickstart.mdx +++ b/quickstart.mdx @@ -1,251 +1,311 @@ --- -title: "Quickstart" -description: "Deploy your documentation in minutes" +title: "Get started in 10 minutes" +description: "Transform your raw content into beautiful, professional documentation that your users will love" icon: "rocket" --- -This quickstart guide shows you how to set up and deploy your documentation site in minutes. +Ready to create documentation that actually gets used? This guide will take you from zero to a live, professional documentation site in under 10 minutes. -After completing this guide, you will have a live documentation site ready to customize and expand. +**You'll end up with:** +- A live documentation site at your custom URL +- Automated deployments from your Git repository +- A powerful editor that works how you want to work +- Beautiful, responsive design that works on any device - -**Prerequisites**: Before you begin, [create an account](https://mintlify.com/start) and complete onboarding. - +**Start here**: [Create your free account](https://mintlify.com/start) and complete the quick onboarding to get your foundation ready. -## Getting started +## Your site is already live -After you complete the onboarding process, your documentation site automatically deploys to a unique URL with this format: +The moment you complete onboarding, your documentation site is automatically deployed and ready to share: ``` -https://.mintlify.app +https://your-project-name.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 + Your live documentation URL in the Mintlify dashboard + Your live documentation URL in the Mintlify dashboard - - 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. - - - An admin for your GitHub organization may need to authorize your account depending on your organization settings. - - -## 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. + +Your site is live and shareable right now. Find your URL in your [dashboard](https://dashboard.mintlify.com/) overview. + + +## Connect your GitHub repository + +Enable automatic deployments so your documentation updates whenever you push changes to your repository. + + + + From your dashboard, navigate to **Settings** → **GitHub App** and select **Install GitHub App**. + + Choose your organization and select which repositories should connect to Mintlify. + + + GitHub App installation interface + GitHub App installation interface + + + + + Go to **Settings** → **My Profile** and select **Authorize GitHub account**. + + + Organization admins may need to approve this authorization depending on your GitHub organization settings. + + + + Once connected, Mintlify will automatically deploy changes whenever you push to your repository. + + + + +## Choose your editing workflow + +Pick the approach that fits your team's preferences. You can switch between these workflows anytime. + + + + **Best for developers** + + Work in your favorite editor, use Git workflows, and integrate with your existing development process. - - For users who prefer a visual interface in their web browser. Click to jump to this section. + + **Best for content creators** + + Write and edit documentation in a beautiful web interface with real-time preview and collaboration features. + -## Code-based 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. +## Code-first workflow -### Install the CLI +Perfect for teams that want documentation integrated with their development workflow. Write in markdown, commit with Git, and deploy automatically. -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 preview changes locally before publishing: - + ```bash npm npm i -g mint ``` + ```bash yarn + yarn global add 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"`. + + Requires Node.js v19 or higher. Check your version with `node --version`. + + -```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 - + + Open your repository and edit the introduction page to see the workflow in action: -### Push the changes + In `index.mdx`, update the frontmatter: -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. - - -## 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: + ```mdx index.mdx + --- + title: "Welcome to our docs" + description: "Everything you need to know about our product" + --- + ``` + -Find and select `index.mdx` in the file explorer. + + See your changes instantly with the local development server: -Then, in the editor, update the title field to "Hello World". + ```bash + mint dev + ``` - - Editing in Web Editor - Editing in Web Editor - + Your documentation will be available at `http://localhost:3000`. + + + Local development server showing documentation preview + Local development server showing documentation preview + + + + + When you're satisfied with your changes, push them to your repository: + + ```bash + git add . + git commit -m "Update introduction page" + git push origin main + ``` + + + Mintlify automatically builds and deploys your changes. Your updated documentation will be live in under a minute. + + + - The editor provides a rich set of formatting tools and components. Type / in the editor to open the command menu and access these tools. +Track deployment status in your GitHub repository's Actions tab or in your Mintlify dashboard. -### 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. +## Visual editor workflow + +Perfect for content creators, product managers, and anyone who prefers a visual editing experience. No local setup required. + + + + From your [dashboard](https://dashboard.mintlify.com), select **Editor** in the sidebar. + + + Mintlify web editor interface with file explorer and visual editing tools + Mintlify web editor interface with file explorer and visual editing tools + + + + + Navigate to any file in the sidebar and start editing. Let's update the introduction: + + 1. Select `index.mdx` from the file explorer + 2. Update the title to "Welcome to our docs" + 3. Watch the preview update in real-time + + + Editing content in the web editor with live preview + Editing content in the web editor with live preview + + + + Press / to open the command menu and access formatting tools, components, and content blocks. + + + + + Select the **Publish** button in the top-right corner. Your changes go live immediately. + + + No build process, no waiting—your documentation updates instantly. + + + - Use branches to preview and review changes through pull requests before deploying to your live site. +Create branches and use pull requests to collaborate with your team and preview changes before they go live. -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). - -## Adding a custom domain - -While your `.mintlify.app` subdomain works well for testing and development, most teams prefer using a custom domain for production documentation. - -To add a custom domain, navigate to the [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) page in your dashboard. - - - Custom Domain - Custom Domain - - -Enter your domain (for example, `docs.yourcompany.com`) and follow the provided instructions to configure DNS settings with your domain provider. - - -| Record Type | Name | Value | TTL | -|-------------|------|-------|-----| -| CNAME | docs (or subdomain) | cname.mintlify.app | 3600 | -
- - - DNS changes can take up to 48 hours to propagate, though changes often complete much sooner. - - -## Next steps - -Congratulations! You have successfully deployed your documentation site with Mintlify. Here are suggested next steps to enhance your documentation: - - - Configure site-wide styling, navigation, integrations, and more with the `docs.json` file. +## Add your custom domain + +Transform your documentation from a testing URL to a professional branded experience. + + + + Navigate to [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) in your dashboard. + + Enter your preferred subdomain (like `docs.yourcompany.com`). + + + Custom domain setup interface in Mintlify dashboard + Custom domain setup interface in Mintlify dashboard + + + + + Add this CNAME record with your domain provider: + + | Record Type | Name | Value | TTL | + |-------------|------|-------|-----| + | CNAME | docs | cname.mintlify.app | 3600 | + + + + Return to your Mintlify dashboard to verify the DNS configuration. + + + Once verified, your documentation will be available at your custom domain with automatic SSL certificates. + + + + DNS propagation typically takes 5-30 minutes, though it can take up to 48 hours in rare cases. + + + + +## What's next? + +Your documentation foundation is ready. Here's how to take it to the next level: + + + + Customize colors, fonts, and styling to match your brand perfectly. - - Learn how to customize colors, fonts, and the overall appearance of your documentation site. + + + Structure your content with intuitive navigation that guides users to what they need. - - Structure your documentation with intuitive navigation to help users find what they need. + + + Use tabs, accordions, code groups, and more to create engaging documentation. - - Enhance your documentation with interactive components like accordions, tabs, and code samples. + + + Create interactive API references from your OpenAPI specifications. - - Create interactive API references with OpenAPI and AsyncAPI specifications. + + + Connect analytics, support systems, and other tools through your `docs.json` file. -## Troubleshooting + + Explore advanced features like subdomain routing, custom analytics, and team collaboration. + + -If you encounter issues during the setup process, check these common troubleshooting solutions: +## Need help? - - 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. - + + **Most common fixes:** + - Ensure you're running `mint dev` from the directory containing `docs.json` + - Verify you have Node.js v19+ installed: `node --version` + - Try clearing your terminal and running the command again + + If you're still having issues, our [troubleshooting guide](/guides/troubleshooting) has more detailed solutions. + + + + **Check these items:** + - Verify your GitHub App is installed and authorized + - Check the GitHub Actions tab in your repository for build errors + - Allow 1-2 minutes for deployment to complete + - Review deployment logs in your Mintlify dashboard + + Most deployment issues are resolved by checking the build logs for specific error messages. + + + + **Troubleshooting steps:** + - Verify your CNAME record points to `cname.mintlify.app` + - Use [DNSChecker](https://dnschecker.org) to confirm DNS propagation + - Wait up to 48 hours for full propagation + - Ensure you've verified the domain in your Mintlify dashboard + + Contact our support team if DNS is properly configured but your domain still isn't working after 48 hours. + + + + **Permission checklist:** + - Invite the team member through your Mintlify dashboard + - Ensure they have appropriate GitHub repository access + - Have them authorize their GitHub account in their profile settings + - Check if your GitHub organization requires admin approval for OAuth apps + + + + Our support team is here to help you succeed. Reach out anytime with questions or feedback. +