diff --git a/quickstart.mdx b/quickstart.mdx index 076b50534..d8a490c76 100644 --- a/quickstart.mdx +++ b/quickstart.mdx @@ -1,251 +1,268 @@ --- -title: "Quickstart" -description: "Deploy your documentation in minutes" +title: "Get your docs live in 10 minutes" +description: "Complete guide from zero to deployed documentation site with custom domain" 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. +Get your documentation site live in under 10 minutes. By the end of this guide, you'll have a fully deployed, customizable documentation site ready for your team. - -**Prerequisites**: Before you begin, [create an account](https://mintlify.com/start) and complete onboarding. - +**You'll need**: A GitHub account and 10 minutes of your time. [Create your account](https://mintlify.com/start) to begin. -## 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. - - - 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: +## What you'll accomplish - - For users who prefer working with existing tools in their local environment. Click to jump to this section. + + + Your docs deployed at `yourproject.mintlify.app` - - - For users who prefer a visual interface in their web browser. Click to jump to this section. + + Automatic deployments when you push changes - -## 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. - -### Install 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: - - - ```bash npm - npm i -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. + + Code editor or visual web editor - your preference + + Professional domain like `docs.yourcompany.com` + + + +## Get your site deployed + + + + [Sign up](https://mintlify.com/start) and complete the onboarding flow. Choose your project name carefully - it becomes your initial URL. + + + After onboarding, your site is immediately available at `https://yourproject.mintlify.app` + + + + + Link Mintlify to your GitHub for automatic deployments: + + 1. In your [dashboard](https://dashboard.mintlify.com/), go to **Settings** → **GitHub App** + 2. Click **Install GitHub App** + 3. Select your organization and repositories + 4. Return to **Settings** → **My Profile** and click **Authorize GitHub account** + + + Green checkmarks appear next to "GitHub App" and "GitHub Authorization" in your dashboard + + + + + Your documentation is already deployed! Find your URL in the dashboard overview. + + + Dashboard showing live documentation URL + Dashboard showing live documentation URL + + + + Share this URL with your team immediately - they can start viewing and providing feedback while you customize. + + + + +## Choose your editing workflow + +Pick the workflow that matches how you prefer to work: + + + + **Perfect for developers** who want to manage docs alongside code, use their favorite editor, and leverage Git workflows. + + ### Quick setup + + + + Install the Mintlify CLI on your machine: + + + ```bash npm + npm i -g mint + ``` + ```bash pnpm + pnpm add -g mint + ``` + ```bash yarn + yarn global add mint + ``` + + + + Requires Node.js v19+. Check your version with `node --version`. + + + + + 1. Clone the repository created during onboarding + 2. Open `index.mdx` in your editor + 3. Change the title from "Introduction" to "Welcome to our docs" + + ```mdx index.mdx {2} + --- + title: "Welcome to our docs" + description: "This is the introduction to the documentation" + --- + ``` + + + + Run the development server: + + ```bash + mint dev + ``` + + Visit `localhost:3000` to see your changes instantly. + + + Your title change appears in the local preview + + + + + Push to your repository: + + ```bash + git add . + git commit -m "Update homepage title" + git push + ``` + + + Changes automatically deploy to your live site within 2-3 minutes + + + + + + + + **Perfect for content creators** who prefer visual editing without installing tools or managing Git directly. + + ### Quick setup + + + + 1. Go to your [dashboard](https://dashboard.mintlify.com/) + 2. Click **Editor** in the sidebar + + + Mintlify web editor interface + Mintlify web editor interface + + + + + 1. Select `index.mdx` from the file explorer + 2. Update the title field to "Welcome to our docs" + 3. Use the rich formatting toolbar or type `/` for component shortcuts + + + The editor shows a live preview as you type. No need to save manually! + + + + + Click **Publish** in the top-right corner. + + + Your changes are immediately live on your documentation site + + + + + + + +## Add your custom domain + +Transform your site from `yourproject.mintlify.app` to `docs.yourcompany.com`: + + + + 1. Go to [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) in your dashboard + 2. Enter your desired domain (like `docs.yourcompany.com`) + + + Custom domain configuration interface + Custom domain configuration interface + + + + + Add this CNAME record with your domain provider: + + | Record Type | Name | Value | TTL | + |-------------|------|-------|-----| + | CNAME | docs | cname.mintlify.app | 3600 | + + + DNS changes typically take 5-30 minutes but can take up to 48 hours in rare cases. + + -## 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. - - - Use branches to preview and review changes through pull requests before deploying to your live site. - - -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. - + + + Your documentation loads at your custom domain with a valid SSL certificate + + +
-## 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 uniquely yours: - - 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. + + + Change colors, fonts, and styling to match your brand - - Structure your documentation with intuitive navigation to help users find what they need. + + + Structure your documentation with clear navigation - - Enhance your documentation with interactive components like accordions, tabs, and code samples. + + + Enhance pages with tabs, accordions, and code examples - - Create interactive API references with OpenAPI and AsyncAPI specifications. + + + Create interactive API references from OpenAPI specs + ## Troubleshooting -If you encounter issues during the setup process, check these common troubleshooting solutions: - - - 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. - + +**Solution**: Ensure you have Node.js v19+ and run `mint dev` from the directory containing `docs.json`. + +**Check your setup**: +- Run `node --version` (should be v19+) +- Run `ls` and confirm you see `docs.json` +- Try `npm install` if you see dependency errors + + + +**For Git workflow**: Check your repository's Actions tab for build errors. Deployments take 2-5 minutes. + +**For web editor**: Changes should appear immediately. Try refreshing your browser and clearing cache. + +**DNS issues**: If using a custom domain, verify your CNAME record with [DNS Checker](https://dnschecker.org/). + + + +**Solution**: +1. Ensure you have admin access to the repository +2. Reinstall the GitHub App from **Settings** → **GitHub App** +3. Re-authorize your account from **Settings** → **My Profile** +4. Contact your GitHub organization admin if you see permission errors + + + +**Need help?** Join our [community Discord](https://discord.gg/mintlify) or check our [help center](https://mintlify.com/help) for additional support. + \ No newline at end of file