-
Notifications
You must be signed in to change notification settings - Fork 213
Simplify quickstart page for better user experience #2919
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.
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
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -4,80 +4,33 @@ | |||||||||||||||||||||
| keywords: ["quickstart","deploy","get started","first steps"] | ||||||||||||||||||||||
| --- | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| After you complete this guide, you'll have a live documentation site ready to customize and update. | ||||||||||||||||||||||
| Get your documentation site live in minutes. After completing this guide, you'll have a deployed site ready to customize. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ## Before you begin | ||||||||||||||||||||||
| ## Deploy your site | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| Mintlify uses a docs-as-code approach to manage your documentation. Every page on your site has a corresponding file stored in your documentation <Tooltip tip="Your documentation's source code where all files and their history are stored. The web editor connects to your documentation repository to access and modify content, or you can edit files locally in your preferred IDE.">repository</Tooltip>. | ||||||||||||||||||||||
| 1. Go to [mintlify.com/start](https://mintlify.com/start) | ||||||||||||||||||||||
| 2. Connect your GitHub account | ||||||||||||||||||||||
| 3. Create or select a repository for your documentation | ||||||||||||||||||||||
| 4. Complete the onboarding process | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| When you connect your documentation repository to your Mintlify deployment, you can work on your documentation locally or in the web editor and sync any changes to your remote repository. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ## Deploy your documentation site | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| Go to [mintlify.com/start](https://mintlify.com/start) and complete the onboarding process. During onboarding, you'll connect your GitHub account, create or select a repository for your documentation, and install the GitHub App to enable automatic deployments. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| After onboarding, your documentation site is deployed and accessible at your `.mintlify.app` URL. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| <AccordionGroup> | ||||||||||||||||||||||
| <Accordion title="Optional: Skip connecting GitHub during onboarding"> | ||||||||||||||||||||||
| If you want to get started quickly without connecting your own repository, you can skip the GitHub connection during onboarding. Mintlify creates a private repository in a private organization and automatically configures the GitHub App for you. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| This lets you use the web editor immediately and migrate to your own repository later. | ||||||||||||||||||||||
| </Accordion> | ||||||||||||||||||||||
| </AccordionGroup> | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ## View your deployed site | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| Your documentation site is now deployed at `https://<your-project-name>.mintlify.app`. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| Find your exact URL on the **Overview** page of your [dashboard](https://dashboard.mintlify.com/). | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| <Frame> | ||||||||||||||||||||||
| <img | ||||||||||||||||||||||
| src="/images/quickstart/mintlify-domain-light.png" | ||||||||||||||||||||||
| alt="Overview page of the Mintlify dashboard." | ||||||||||||||||||||||
| className="block dark:hidden" | ||||||||||||||||||||||
| /> | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| <img | ||||||||||||||||||||||
| src="/images/quickstart/mintlify-domain-dark.png" | ||||||||||||||||||||||
| alt="Overview page of the Mintlify dashboard." | ||||||||||||||||||||||
| className="hidden dark:block" | ||||||||||||||||||||||
| /> | ||||||||||||||||||||||
| </Frame> | ||||||||||||||||||||||
| Your documentation site is now live at `https://<your-project-name>.mintlify.app`. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| <Tip> | ||||||||||||||||||||||
| Your site is ready to view immediately. Use this URL for testing and sharing with your team. Before sharing with your users, you may want to add a [custom domain](/customize/custom-domain). | ||||||||||||||||||||||
| Find your exact URL on the **Overview** page of your [dashboard](https://dashboard.mintlify.com/). | ||||||||||||||||||||||
| </Tip> | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ## Make your first change | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| Choose your preferred editing method: | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| <Tabs> | ||||||||||||||||||||||
| <Tab title="CLI"> | ||||||||||||||||||||||
| <Tab title="Web editor (recommended)"> | ||||||||||||||||||||||
| <Steps> | ||||||||||||||||||||||
| <Step title="Install the CLI"> | ||||||||||||||||||||||
| The CLI requires [Node.js](https://nodejs.org/en) v20.17.0 or higher. Use an LTS version for stability. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| <CodeGroup> | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ```bash npm | ||||||||||||||||||||||
| npm i -g mint | ||||||||||||||||||||||
| ``` | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ```bash pnpm | ||||||||||||||||||||||
| pnpm add -g mint | ||||||||||||||||||||||
| ``` | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| </CodeGroup> | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| See [Install the CLI](/installation) for full details and troubleshooting. | ||||||||||||||||||||||
| </Step> | ||||||||||||||||||||||
| <Step title="Clone your repository"> | ||||||||||||||||||||||
| If you haven't already cloned your repository locally, follow the instructions in [Clone your repository](/installation#clone-your-repository). | ||||||||||||||||||||||
| <Step title="Open the web editor"> | ||||||||||||||||||||||
| Go to the [web editor](https://dashboard.mintlify.com/editor) in your dashboard. | ||||||||||||||||||||||
| </Step> | ||||||||||||||||||||||
| <Step title="Edit a page"> | ||||||||||||||||||||||
| Open `index.mdx` in your preferred editor and update the description in the frontmatter: | ||||||||||||||||||||||
| <Step title="Edit your homepage"> | ||||||||||||||||||||||
| Open `index.mdx` and update the description: | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ```mdx | ||||||||||||||||||||||
| --- | ||||||||||||||||||||||
|
|
@@ -86,48 +39,33 @@ | |||||||||||||||||||||
| --- | ||||||||||||||||||||||
| ``` | ||||||||||||||||||||||
| </Step> | ||||||||||||||||||||||
| <Step title="Preview locally"> | ||||||||||||||||||||||
| Run the following command from your documentation directory: | ||||||||||||||||||||||
| <Step title="Publish"> | ||||||||||||||||||||||
| Click **Publish** in the top-right corner to deploy your changes. | ||||||||||||||||||||||
| </Step> | ||||||||||||||||||||||
| </Steps> | ||||||||||||||||||||||
| </Tab> | ||||||||||||||||||||||
| <Tab title="Local development"> | ||||||||||||||||||||||
| <Steps> | ||||||||||||||||||||||
| <Step title="Install the CLI"> | ||||||||||||||||||||||
| ```bash | ||||||||||||||||||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Might be worth keeping the Node.js prereq here so local users don’t hit a confusing install error.
Suggested change
|
||||||||||||||||||||||
| npm i -g mint | ||||||||||||||||||||||
| ``` | ||||||||||||||||||||||
| </Step> | ||||||||||||||||||||||
| <Step title="Clone and edit"> | ||||||||||||||||||||||
| Clone your repository, edit `index.mdx`, then preview locally: | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ```bash | ||||||||||||||||||||||
| mint dev | ||||||||||||||||||||||
| ``` | ||||||||||||||||||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Small UX win: add a quick “where do I see it?” verification after
Suggested change
|
||||||||||||||||||||||
|
|
||||||||||||||||||||||
| View your preview at `http://localhost:3000`. | ||||||||||||||||||||||
| </Step> | ||||||||||||||||||||||
| <Step title="Push your changes"> | ||||||||||||||||||||||
| Commit and push your changes to trigger a deployment: | ||||||||||||||||||||||
| <Step title="Deploy"> | ||||||||||||||||||||||
| Push your changes to automatically deploy: | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ```bash | ||||||||||||||||||||||
| git add . | ||||||||||||||||||||||
| git commit -m "Update description" | ||||||||||||||||||||||
| git push | ||||||||||||||||||||||
| ``` | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| Mintlify automatically deploys your changes. View your deployment status on the [Overview](https://dashboard.mintlify.com/) page of your dashboard. | ||||||||||||||||||||||
| </Step> | ||||||||||||||||||||||
| </Steps> | ||||||||||||||||||||||
| </Tab> | ||||||||||||||||||||||
| <Tab title="Web editor"> | ||||||||||||||||||||||
| <Steps> | ||||||||||||||||||||||
| <Step title="Open the web editor"> | ||||||||||||||||||||||
| Navigate to the [web editor](https://dashboard.mintlify.com/editor) in your dashboard. | ||||||||||||||||||||||
| </Step> | ||||||||||||||||||||||
| <Step title="Edit a page"> | ||||||||||||||||||||||
| Open `index.mdx` and update the description in the frontmatter: | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ```mdx | ||||||||||||||||||||||
| --- | ||||||||||||||||||||||
| title: "Introduction" | ||||||||||||||||||||||
| description: "Your custom description here" | ||||||||||||||||||||||
| --- | ||||||||||||||||||||||
| ``` | ||||||||||||||||||||||
| </Step> | ||||||||||||||||||||||
| <Step title="Publish"> | ||||||||||||||||||||||
| Click the **Publish** button in the top-right of the web editor toolbar. | ||||||||||||||||||||||
| </Step> | ||||||||||||||||||||||
| <Step title="View live"> | ||||||||||||||||||||||
| On the [Overview](https://dashboard.mintlify.com/) page of your dashboard, you can see your site's deployment status. When it finishes deploying, refresh your documentation site to see your changes live. | ||||||||||||||||||||||
| </Step> | ||||||||||||||||||||||
| </Steps> | ||||||||||||||||||||||
| </Tab> | ||||||||||||||||||||||
|
|
@@ -136,7 +74,7 @@ | |||||||||||||||||||||
| ## Next steps | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| <Card title="Use the web editor" icon="mouse-pointer-2" horizontal href="/editor/index"> | ||||||||||||||||||||||
| Edit documentation in your browser and preview how your pages will look when published. | ||||||||||||||||||||||
| </Card> | ||||||||||||||||||||||
| <Card title="Explore CLI commands" icon="terminal" horizontal href="/installation#additional-commands"> | ||||||||||||||||||||||
| Find broken links, check accessibility, validate OpenAPI specs, and more. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Minor wording nit: this reads as instantaneous, but initial deploy can take a bit. Future tense here might be less confusing.