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

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

   shell

   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.

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:

cd ./<your-project>

bun dev

pnpm dev

yarn run dev

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
• tailwind.config.mjs: Tailwind CSS 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:
   src/site.config.ts

   // ...
   export const menuLinks: MenuLinks = [
      // ...
      // Docs menu
      { 
         link: '/docs/list', 
         label: 'Docs'
      }, 
   ]

   ts

2. Change the site favicon.

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

3. Replace your avatar image.

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

4. Configure the site

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

   src/site.config.ts

   export const siteConfig: SiteConfig = {
      author: 'CWorld / Arthals',
      title: 'Astro Theme Pure',
      site: 'https://astro-theme-pure.vercel.app',
      description: 'Stay hungry, stay foolish',
      // ...
   }
   
   export const footerConfig: FooterConfig = { /* ... */ }
   export const integrationConfig: IntegrationConfig = { /* ... */ }
   // ...

   ts

5. 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.