> For AI agents: the site index is available at https://www.juniortree.com/llms.txt; this page is available as Markdown at https://www.juniortree.com/docs/setup/getting-started.md.
> Get started with the Astro Theme Pure

## Page metadata

- **Source URL:** https://www.juniortree.com/docs/setup/getting-started

# Getting Started

## Installation

Two way to install. "Template" way is lightweight and simple, but hard to update; while "Fork" way is easy to update but needs some skills for git.

### Install Using Template

**tip:**

Astro has a great article teaching you setting up project: [Install and set up Astro #Use a theme or starter template](https://docs.astro.build/en/install-and-setup/#use-a-theme-or-starter-template)

1. Install the theme

   Execute the following command in the your user directory to install the theme:

#### bun

   ```shell
   bun create astro@latest --template cworld1/astro-theme-pure
   ```

**tip:**

   For Bun, if the installation is slow, it is recommended to use a mirror configuration by creating `bunfig.toml` under the project root directory:

   ```toml title="bunfig.toml"
   [install]
   registry = "<npm mirror site>"
   ```

   For details about other PM mirror configs, you may need to see their official documents.

#### yarn

   ```shell
   yarn create astro --template cworld1/astro-theme-pure
   ```

#### npm

   ```shell
   npm create astro@latest -- --template cworld1/astro-theme-pure
   ```

   By default, this command will use the template repository’s main branch. To use a different branch name, pass it as part of the `--template` argument: `cworld1/astro-theme-pure#<branch>`.

2. Answer the questions and follow the instructions of the CLI wizard.

3. VOILA!

   You can now [start the Astro dev server](https://docs.astro.build/en/install-and-setup/#start-the-astro-dev-server) and see a live preview of your project while you make it your own!

### Install Using Fork

You only need to [click fork button at theme repository](https://github.com/cworld1/astro-theme-pure/fork) to create your project; then clone the forked repository to your local machine.

```shell
git clone https://github.com/<your-username>/astro-theme-pure.git
```

Then, you can start the Astro dev server and see a live preview of your project while you make it your own!

## Start the Dev Server

Go to your project directory:

```shell
cd ./<your-project>
```

#### bun

```shell
bun dev
```

#### yarn

```shell
yarn run dev
```

#### npm

```shell
npm run dev
```

Next, please read the configuration notes first and continue configuring the theme.

## Migrate to Astro

See [Astro: Migrate an existing project to Astro](https://docs.astro.build/en/guides/migrate-to-astro/).

## Theme File Structure

The theme file structure is as follows:

- `public`: Static resources that will be copied to the root directory
- `src`:
  - `assets`: Static resources
  - `components`: Components used in the theme, also include user-like components, like `Card`, `Collapse`, `Spoiler`, etc.
  - `layouts`: Basic site layouts
  - `pages`: Pages like `404`, `about`, `blog`, `docs`, `index`, etc.
  - `plugins`: Extended plugins used in the theme
  - `types`: Typescript type definitions
  - `utils`: Utilities
  - `site.config.ts`: Theme configuration file
- `astro.config.mjs`: Astro configuration file
- `eslint.config.mjs`: ESLint configuration file
- `prettier.config.mjs`: Prettier configuration file
- `uno.config.ts`: UnoCSS configuration file
- `tsconfig.json`: Typescript configuration file
- `package.json`: Package information

## Simple Setup

1. Remove docs files

   - Remove the `src/pages/docs` directory
   - Remove the menu declaration in `src/site.config.ts`:

   ```ts title="src/site.config.ts"
   export const theme: ThemeUserConfig = {
      // ...
      /** Configure the header of your site. */
      header: {
         menu: [
            { title: 'Blog', link: '/blog' },
            { title: 'Docs', link: '/docs' }, // [!code --]
            // ...
         ],
      },
   }
   ```

   - Remove the Content Collection for docs in `src/content.config.ts`:

   ```ts title="src/content.config.ts"
   const docs = defineCollection({ // [!code --]
   loader: glob({ base: './src/content/docs', pattern: '**/*.{md,mdx}' }), // [!code --]
   schema: ({ image }) => // [!code --]
      z.object({ // [!code --]
         ... // [!code --]
      }) // [!code --]
   }) // [!code --]
   export const collections = { blog, docs } // [!code --]
   export const collections = { blog } // [!code ++]
   ```

2. Remove `packages` directory (this will be imported by our NPM package)

3. Change the site favicon.

**tip:**

   [Favicon.io](https://favicon.io/) is a great tool that can help you generate favicons quickly.

   Replace the `public/favicon/*` files with your own favicon.

4. Replace your avatar image.

   Replace the `src/assets/avatar.png` file with your own avatar image.

5. Configure the site

   You can configure your project inside the `src/site.config.ts` configuration file:

   ```ts title="src/site.config.ts"
   export const theme: ThemeUserConfig = {
      author: 'CWorld',
      title: 'Astro Theme Pure',
      site: 'https://astro-pure.js.org',
      description: 'Stay hungry, stay foolish',
      // ...
   }

   export const integ: IntegrationUserConfig = { /* ... */ }
   // ...
   ```

6. Typescript Syntax

   The configuration file `site.config.ts` uses Typescript syntax. If you are not familiar with TS syntax, please read about it [here](https://learnxinyminutes.com/docs/typescript/) first.