Skip to content

test name #800

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

test name #800

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
116 changes: 88 additions & 28 deletions quickstart.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@ icon: "rocket"

This quickstart guide shows you how to set up and deploy your documentation site in minutes.

<Note>

</Note>

After you complete this guide, you will have a live documentation site ready to customize and expand.

<Info>

**Prerequisites**: Before you begin, [create an account](https://mintlify.com/start) and complete onboarding.

**Prerequisites**: Before you begin, [create an account](https://mintlify.com/start) and complete onboarding.
</Info>

## Getting Started
Expand All @@ -25,8 +27,17 @@ https://<your-project-name>.mintlify.app
Find your URL on the Overview page of your [dashboard](https://dashboard.mintlify.com/).

<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" />
<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>

This URL becomes available immediately and updates when you make changes to your documentation. Use this URL for testing and sharing with your team during development.
Expand All @@ -43,8 +54,17 @@ Install the GitHub App by following the instructions from the onboarding checkli
4. Select the organization or user account where you want to install the app. Then select the repositories that you want 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" />
<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>
Expand Down Expand Up @@ -136,8 +156,17 @@ mint dev
Your preview will be available at `localhost:3000`.

<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" />
<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
Expand All @@ -148,7 +177,7 @@ Mintlify automatically detects the changes, builds your documentation, and deplo

After the deployment is complete, your latest update will be available at `<your-project-name>.mintlify.app`.

<Card title="Jump to adding a custom domain" icon="arrow-down" href="#adding-a-custom-domain" horizontal>
<Card title="Jump to adding a custom domain" icon="arrow-down" horizontal href="#adding-a-custom-domain">
Optionally, skip the web editor workflow and jump to adding a custom domain.
</Card>

Expand All @@ -166,8 +195,17 @@ The web editor workflow provides a what-you-see-is-what-you-get (WYSIWYG) interf
</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" />
<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
Expand All @@ -179,12 +217,23 @@ Find and click on `introduction.mdx` in the file explorer.
Then, in the visual editor, update the title field to "Hello World".

<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" />
<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.
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.
</Tip>

### Publish Your Changes
Expand All @@ -199,19 +248,28 @@ For more details about using the web editor, including advanced features like sl

While your `<your-project-name>.mintlify.app` subdomain works well for testing and development, most teams prefer using a custom domain for production documentation.

To add a custom domain, go to `Settings` > `Custom Domain` from the dashboard.
To add a custom domain, go to `Settings` \> `Custom Domain` from the 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" />
<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 (Domain Name System) settings with your domain provider.

<Table>
| Record Type | Name | Value | TTL |
|-------------|------|-------|-----|
| CNAME | docs (or subdomain) | cname.mintlify.app | 3600 |
| Record Type | Name | Value | TTL |
| ----------- | ------------------- | ------------------ | ---- |
| CNAME | docs (or subdomain) | cname.mintlify.app | 3600 |
</Table>

<Info>
Expand All @@ -220,18 +278,21 @@ Enter your domain (for example, `docs.yourcompany.com`) and follow the provided

## Next Steps

Congratulations! You have successfully deployed your documentation site with Mintlify. Here are suggested next steps to enhance your documentation:
Congratulations\! You have successfully deployed your documentation site with Mintlify. Here are suggested next steps to enhance your documentation:

<Card title="Customize Your Theme" icon="paintbrush" href="themes" horizontal>
<Card title="Customize Your Theme" icon="paintbrush" horizontal href="themes">
Learn how to customize colors, fonts, and the overall appearance of your documentation site.
</Card>
<Card title="Organize Navigation" icon="map" href="navigation#overview" horizontal>

<Card title="Organize Navigation" icon="map" horizontal href="navigation#overview">
Structure your documentation with intuitive navigation to help users find what they need.
</Card>
<Card title="Add Interactive Components" icon="puzzle" href="/components/accordions" horizontal>

<Card title="Add Interactive Components" icon="puzzle" horizontal href="/components/accordions">
Enhance your documentation with interactive components like accordions, tabs, and code samples.
</Card>
<Card title="Set Up API References" icon="code" href="/api-playground/overview" horizontal>

<Card title="Set Up API References" icon="code" horizontal href="/api-playground/overview">
Create interactive API references with OpenAPI and AsyncAPI specifications.
</Card>

Expand All @@ -241,7 +302,7 @@ If you encounter issues during the setup process, check these common troubleshoo

<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.
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>
<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.
Expand All @@ -251,5 +312,4 @@ If you encounter issues during the setup process, check these common troubleshoo
</Accordion>
</AccordionGroup>


Need more help? [Contact our Support Team](https://mintlify.com/docs/support).