> ## Documentation Index
> Fetch the complete documentation index at: https://learn.mintlify.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Set up your local environment

> Install the tools you need, clone your documentation repository, and run your first local preview.

export const Quiz = ({question, answers, correctFeedback, incorrectFeedback}) => {
  const [selected, setSelected] = React.useState(null);
  const [checked, setChecked] = React.useState(false);
  const quizId = React.useId();
  const isCorrect = checked && answers[selected]?.correct;
  const reset = () => {
    setSelected(null);
    setChecked(false);
  };
  return <div className={"quiz-container" + (checked ? " quiz-checked" : "")}>
      <Badge color="green">Quiz</Badge>
      <p className="quiz-question" id={quizId + "-question"}>{question}</p>
      <div className="quiz-options" role="radiogroup" aria-labelledby={quizId + "-question"} aria-disabled={checked}>
        {answers.map((answer, i) => <label key={i} className={["quiz-option", !checked && selected === i ? "quiz-option-selected" : "", checked && answer.correct ? "quiz-option-correct" : "", checked && selected === i && !answer.correct ? "quiz-option-incorrect" : ""].filter(Boolean).join(" ")}>
            <input type="radio" name={"quiz-" + quizId} checked={selected === i} onChange={() => !checked && setSelected(i)} disabled={checked} />
            <span className="quiz-radio" />
            <span className="quiz-option-label">{answer.text}</span>
          </label>)}
      </div>
      {checked && <div className={"quiz-feedback " + (isCorrect ? "quiz-feedback-correct" : "quiz-feedback-incorrect")} role="status" aria-live="polite" aria-atomic="true">
          <span className="quiz-feedback-icon">{isCorrect ? "✓" : "✗"}</span>
          {isCorrect ? correctFeedback : incorrectFeedback}
        </div>}
      <div className="quiz-actions">
        {!checked ? <button className="quiz-btn quiz-btn-check" type="button" onClick={() => selected !== null && setChecked(true)} disabled={selected === null}>
            Check answer
          </button> : <button className="quiz-btn quiz-btn-reset" type="button" onClick={reset}>
            Try again
          </button>}
      </div>
    </div>;
};

The web editor lets you work without installing anything. If you prefer your own editor or want to test changes locally, you'll need Git, Node.js, the Mintlify CLI, and a local copy of the repository.

By the end of this lesson, you'll have your docs running at `localhost:3000`.

## Before you begin

Make sure you have:

* Access to your documentation repository on GitHub
* Git installed on your computer
* A supported version of Node.js
* A terminal and a code editor

You can confirm that Git and Node.js are available by running:

```bash Check your installed versions theme={null}
git --version
node --version
```

If either command fails, install that tool before continuing. The [Mintlify CLI installation guide](https://www.mintlify.com/docs/cli/install) lists the current Node.js requirement.

## Clone your repository

Cloning downloads the repository and connects your local copy to GitHub.

On your repository's GitHub page, select **Code** and copy the HTTPS URL. Then run:

```bash theme={null}
git clone https://github.com/your-org/your-docs.git
cd your-docs
```

Replace the example URL and directory with your own. Run `ls` to check that you're in the right place. You should see `docs.json` and your documentation files.

<Info>
  If GitHub asks you to authenticate, follow its prompt. Depending on your organization, you may use a browser sign-in, a personal access token, or SSH.
</Info>

## Install the Mintlify CLI

Install the CLI globally so the `mint` command is available from any documentation project:

```bash theme={null}
npm i -g mint
```

Then confirm the installation:

```bash theme={null}
mint --version
```

You can also run the CLI without a global installation by using `npx mint` in place of `mint`.

## Start a local preview

From the directory that contains `docs.json`, run:

```bash theme={null}
mint dev
```

The preview opens at `http://localhost:3000`. Leave the command running while you work. When you save a file, the preview reloads with your changes.

If port 3000 is already in use, the CLI chooses another available port and prints its address in the terminal.

## Make a test edit

Open an MDX page and change a sentence. Save the file, then check the local preview.

Before committing anything, inspect what changed:

```bash theme={null}
git status
git diff
```

`git status` lists changed and untracked files. `git diff` shows the exact line-by-line edits that you haven't staged yet. Together, they help you catch an accidental change before it reaches a commit.

You can now restore the sentence or keep it for the workflow lesson.

## Common setup problems

**`mint: command not found`**

Restart your terminal after installing the CLI. If the command still isn't available, use `npx mint dev` or check where npm installs global packages.

**The preview says it can't find `docs.json`**

Run `pwd` and `ls`. You probably started the command from the wrong directory.

**GitHub rejects your clone or push**

Confirm that you have access to the repository and that GitHub authentication is working. If you can clone but can't push, you may have read access instead of write access.

<Quiz
  question="You cloned the repository and edited a page. Which command shows the exact lines you changed before you commit?"
  answers={[
{ text: "git status", correct: false },
{ text: "git diff", correct: true },
{ text: "git clone", correct: false },
{ text: "mint dev", correct: false },
]}
  correctFeedback="Right. `git diff` shows the line-by-line changes in your working copy. `git status` tells you which files changed, so the two commands are useful together."
  incorrectFeedback="Use `git diff` to inspect the exact lines that changed. `git status` lists affected files, while `mint dev` shows the rendered result in your browser."
/>

Next up: [Workflow overview](/courses/git-github/workflow) — turn your local edit into a branch, commit, pull request, preview, and published update.