···11+# Starlight Starter Kit: Basics
22+33+[](https://starlight.astro.build)
44+55+```
66+pnpm create astro@latest -- --template starlight
77+```
88+99+[](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
1010+[](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
1111+[](https://app.netlify.com/start/deploy?repository=https://github.com/withastro/starlight&create_from_path=examples/basics)
1212+[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
1313+1414+> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
1515+1616+## 🚀 Project Structure
1717+1818+Inside of your Astro + Starlight project, you'll see the following folders and files:
1919+2020+```
2121+.
2222+├── public/
2323+├── src/
2424+│ ├── assets/
2525+│ ├── content/
2626+│ │ ├── docs/
2727+│ └── content.config.ts
2828+├── astro.config.mjs
2929+├── package.json
3030+└── tsconfig.json
3131+```
3232+3333+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
3434+3535+Images can be added to `src/assets/` and embedded in Markdown with a relative link.
3636+3737+Static assets, like favicons, can be placed in the `public/` directory.
3838+3939+## 🧞 Commands
4040+4141+All commands are run from the root of the project, from a terminal:
4242+4343+| Command | Action |
4444+| :------------------------ | :----------------------------------------------- |
4545+| `pnpm install` | Installs dependencies |
4646+| `pnpm dev` | Starts local dev server at `localhost:4321` |
4747+| `pnpm build` | Build your production site to `./dist/` |
4848+| `pnpm preview` | Preview your build locally, before deploying |
4949+| `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` |
5050+| `pnpm astro -- --help` | Get help using the Astro CLI |
5151+5252+## 👀 Want to learn more?
5353+5454+Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).
···11+---
22+title: Example Guide
33+description: A guide in my new Starlight docs site.
44+---
55+66+Guides lead a user through a specific task they want to accomplish, often with a sequence of steps.
77+Writing a good guide requires thinking about what your users are trying to do.
88+99+## Further reading
1010+1111+- Read [about how-to guides](https://diataxis.fr/how-to-guides/) in the Diátaxis framework
+36
docs/src/content/docs/index.mdx
···11+---
22+title: Welcome to Starlight
33+description: Get started building your docs site with Starlight.
44+template: splash
55+hero:
66+ tagline: Congrats on setting up a new Starlight project!
77+ image:
88+ file: ../../assets/houston.webp
99+ actions:
1010+ - text: Example Guide
1111+ link: /guides/example/
1212+ icon: right-arrow
1313+ - text: Read the Starlight docs
1414+ link: https://starlight.astro.build
1515+ icon: external
1616+ variant: minimal
1717+---
1818+1919+import { Card, CardGrid } from '@astrojs/starlight/components';
2020+2121+## Next steps
2222+2323+<CardGrid stagger>
2424+ <Card title="Update content" icon="pencil">
2525+ Edit `src/content/docs/index.mdx` to see this page change.
2626+ </Card>
2727+ <Card title="Add new content" icon="add-document">
2828+ Add Markdown or MDX files to `src/content/docs` to create new pages.
2929+ </Card>
3030+ <Card title="Configure your site" icon="setting">
3131+ Edit your `sidebar` and other config in `astro.config.mjs`.
3232+ </Card>
3333+ <Card title="Read the docs" icon="open-book">
3434+ Learn more in [the Starlight Docs](https://starlight.astro.build/).
3535+ </Card>
3636+</CardGrid>
+11
docs/src/content/docs/reference/example.md
···11+---
22+title: Example Reference
33+description: A reference page in my new Starlight docs site.
44+---
55+66+Reference pages are ideal for outlining how things work in terse and clear terms.
77+Less concerned with telling a story or addressing a specific use case, they should give a comprehensive outline of what you're documenting.
88+99+## Further reading
1010+1111+- Read [about reference](https://diataxis.fr/reference/) in the Diátaxis framework