Navigation
Part 1

Getting Started with AstroGlass

Learn how to set up and customize your Astro template with themes, internationalization, and cloud deployment.

Welcome to the AstroGlass Template! This guide will walk you through setting up your development environment and customizing the template to fit your needs.

Prerequisites

Before you begin, make sure you have the following installed:

  • Node.js v20 or higher
  • pnpm (recommended) or npm
  • A code editor (VS Code recommended)
💡
Pro Tip

We recommend using pnpm for faster, disk-efficient package management.

Installation

Clone the Repository

First, clone the template repository to your local machine:

Terminal
git clone https://github.com/kamsqee/astroglass.git my-project
cd my-project

Install Dependencies

Install the project dependencies using your preferred package manager:

Terminal window
pnpm install
Terminal window
npm install
Terminal window
yarn install

Start the Development Server

Run the development server to see your template in action:

Terminal window
pnpm dev
Terminal window
npm run dev
Terminal window
yarn dev

Your site should now be running at http://localhost:4321 🎉

Project Structure

Here’s an overview of the project’s folder structure:

  • src/
    • components/
      • sections/
        • hero/
          • HeroLiquid.astro
          • HeroGlass.astro
          • HeroNeo.astro
          • …
        • features/
        • pricing/
        • about/
        • portfolio/
        • …
      • layout/
        • header/
      • ui/
      • docs/
      • mdx/
    • config/
      • themes.ts
      • locales.ts
      • docs.ts
      • navigation.ts
    • content/
      • docs/
        • en/
        • ru/
      • blog/
    • locales/
      • en/
      • ru/
    • pages/
      • index.astro
      • [theme].astro
      • docs/
      • blog/
    • styles/
      • global.css
      • _themes.css
      • components/
  • public/
  • astro.config.mjs
  • package.json

Choosing a Theme

The template comes with 6 beautiful themes out of the box:

ThemeDescription
LiquidFluid animations, gradient backgrounds
GlassGlassmorphism effects, frosted panels
NeoBold typography, strong contrast
LuxuryElegant gold accents, premium feel
MinimalClean, focused, distraction-free
AuroraImmersive gradients, geometric structure

To switch themes, simply navigate to the theme switcher in the header or visit the theme demo pages directly (e.g., /liquid, /glass, /aurora).

Next Steps

Now that you have your development environment set up:

  1. Theming System — Learn how the dynamic theming architecture works
  2. Routing & i18n — Add support for more languages
  3. Cloudflare Deployment — Deploy to Cloudflare Pages
ℹ️
Need Help?

Check out the Forms & Validation Guide or open an issue if you run into any problems.