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#

1. Install the theme

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

   • bun
   • pnpm
   • yarn
   • npm

   1
   bun 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 ↗ 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 ↗ to create your project; then clone the forked repository to your local machine.

1
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:

1
cd ./<your-project>

1
bun dev

1
pnpm dev

1
yarn run dev

1
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 ↗.

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:

   1
   export const theme: ThemeUserConfig = {
   2
      // ...
   3
      /** Configure the header of your site. */
   4
      header: {
   5
         menu: [
   6
            { title: 'Blog', link: '/blog' },
   7
            { title: 'Docs', link: '/docs' }, // [!code --]
   8
            // ...
   9
         ],
   10
      },
   11
   }

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

   1
   const docs = defineCollection({ // [!code --]
   2
   loader: glob({ base: './src/content/docs', pattern: '**/*.{md,mdx}' }), // [!code --]
   3
   schema: ({ image }) => // [!code --]
   4
      z.object({ // [!code --]
   5
         ... // [!code --]
   6
      }) // [!code --]
   7
   }) // [!code --]
   8
   export const collections = { blog, docs } // [!code --]
   9
   export const content = { blog } // [!code ++]

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

3. Change the site favicon.

   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:

   1
   export const theme: ThemeUserConfig = {
   2
      author: 'CWorld',
   3
      title: 'Astro Theme Pure',
   4
      site: 'https://astro-pure.js.org',
   5
      description: 'Stay hungry, stay foolish',
   6
      // ...
   7
   }
   8
   
   9
   export const integ: IntegrationUserConfig = { /* ... */ }
   10
   // ...

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 ↗ first.