mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
140 lines
5.0 KiB
Plaintext
140 lines
5.0 KiB
Plaintext
---
|
|
title: "Quickstart"
|
|
description: "Deploy your documentation site and make your first change."
|
|
keywords: ["quickstart","deploy","get started","first steps","tutorial","setup","onboarding"]
|
|
---
|
|
|
|
After you complete this guide, you'll have a live documentation site ready to customize and update.
|
|
|
|
Mintlify uses a docs-as-code approach — every page on your site corresponds to a file 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>. You can edit locally or use the [web editor](/editor/index).
|
|
|
|
## Deploy your documentation site
|
|
|
|
<Tip>
|
|
If your code or documentation is already in a public GitHub repository, [auto-generate your documentation site](https://mintlify.com/explore) instead. Replace `github.com` with `mintlify.com` in any public repository URL.
|
|
</Tip>
|
|
|
|
Go to [mintlify.com/start](https://mintlify.com/start) and complete the onboarding process. You'll connect your GitHub account, create or select a repository, and install the GitHub App to enable automatic deployments.
|
|
|
|
After onboarding, your site is live 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>
|
|
|
|
<AccordionGroup>
|
|
<Accordion title="Skip connecting a Git provider during onboarding">
|
|
You can skip the Git provider connection during onboarding. Mintlify creates a private repository for you automatically, so you can use the web editor right away. Migrate to your own repository later from [Git Settings](https://dashboard.mintlify.com/settings/deployment/git-settings). See [Clone to your own repository](/deploy/github#clone-to-your-own-repository) for details.
|
|
</Accordion>
|
|
</AccordionGroup>
|
|
|
|
## Make your first change
|
|
|
|
<Tabs>
|
|
<Tab title="CLI">
|
|
<Steps>
|
|
<Step title="Install the CLI">
|
|
Requires [Node.js](https://nodejs.org/en) v20.17.0+.
|
|
|
|
<CodeGroup>
|
|
|
|
```bash npm
|
|
npm i -g mint
|
|
```
|
|
|
|
|
|
```bash pnpm
|
|
pnpm add -g mint
|
|
```
|
|
|
|
</CodeGroup>
|
|
|
|
See [Install the CLI](/cli/install) for details.
|
|
</Step>
|
|
<Step title="Clone your repository">
|
|
If you haven't already, follow the instructions in [Clone your repository](/cli/install#clone-your-repository).
|
|
</Step>
|
|
<Step title="Edit a page">
|
|
Open `index.mdx` and update the frontmatter description:
|
|
|
|
```mdx
|
|
---
|
|
title: "Introduction"
|
|
description: "Your custom description here"
|
|
---
|
|
```
|
|
</Step>
|
|
<Step title="Preview locally">
|
|
```bash
|
|
mint dev
|
|
```
|
|
|
|
View your preview at `http://localhost:3000`.
|
|
</Step>
|
|
<Step title="Push your changes">
|
|
```bash
|
|
git add .
|
|
git commit -m "Update description"
|
|
git push
|
|
```
|
|
|
|
Mintlify automatically deploys your changes. Check status on the [Overview](https://dashboard.mintlify.com/) page.
|
|
</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 the **Introduction** page and update the description.
|
|
|
|
<Frame>
|
|
<img
|
|
src="/images/quickstart/hello-world-light.png"
|
|
alt="Introduction page open in the web editor with the description edited to say Hello world!."
|
|
className="block dark:hidden"
|
|
/>
|
|
|
|
<img
|
|
src="/images/quickstart/hello-world-dark.png"
|
|
alt="Introduction page open in the web editor with the description edited to say Hello world!."
|
|
className="hidden dark:block"
|
|
/>
|
|
</Frame>
|
|
</Step>
|
|
<Step title="Publish">
|
|
Click **Publish** in the top-right of the web editor toolbar.
|
|
</Step>
|
|
<Step title="View live">
|
|
Check deployment status on the [Overview](https://dashboard.mintlify.com/) page. When it finishes, refresh your site to see the changes.
|
|
</Step>
|
|
</Steps>
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 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 look when published.
|
|
</Card>
|
|
|
|
<Card title="Explore CLI commands" icon="terminal" horizontal href="/cli/index">
|
|
Find broken links, check accessibility, validate OpenAPI specs, and more.
|
|
</Card>
|
|
|
|
<Card title="Add a custom domain" icon="globe" horizontal href="/customize/custom-domain">
|
|
Use your own domain for your documentation site.
|
|
</Card>
|