Clloz's Blog

Back

Getting Started

Get started with the Astro Theme Pure

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#

Step 1: Install the theme#

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

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

Step 2: Follow the CLI wizard#

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

Step 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
shell

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>
shell
shell bun 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:
    src/site.config.ts
    export const theme: ThemeUserConfig = {
  // ...
  /** Configure the header of your site. */
  header: {
    menu: [
      { title: 'Blog', link: '/blog' },
      { title: 'Docs', link: '/docs' } 
      // ...
    ]
  }
}
    ts
    • Remove the Content Collection for docs in src/content.config.ts:
    src/content.config.ts
    const docs = defineCollection({ 
loader: glob({ base: './src/content/docs', pattern: '**/*.{md,mdx}' }), 
schema: ({ image }) =>
   z.object({ 
      ...
   }) 
}) 
export const collections = { blog, docs } 
export const collections = { blog }
    ts

  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:

    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 = {
  /* ... */
}
// ...
    ts

  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.

Edit on GitHub

DOCS