ASTRO攻略LABO ロゴ daito | FX & Prop Trading Top 2.3%
Docs / Getting Started

Getting Started

Welcome to the ASTRO攻略LABO documentation! This guide will help you get your project up and running in minutes.

Installation

First, clone the repository to your local machine:

git clone https://github.com/astro-lab/astro-cooper-blog.git
cd astro-cooper-blog

Next, install the dependencies:

pnpm install

Running Locally

Start the development server:

pnpm run dev

Open your browser and navigate to http://localhost:4321 to see the site in action.

Project Structure

Here’s a quick look at how the project is organized:

src/
├── assets/            # Static assets (images, fonts)
├── components/        # Reusable components
│   ├── blog/          # Blog & Portfolio cards/items
│   ├── common/        # Shared global tools
│   ├── docs/          # Documentation-specific components
│   ├── islands/       # Interactive React components
│   ├── layout/        # Structural atoms (Section, Grid)
│   ├── sections/      # Marketing blocks (Hero, Features)
│   └── ui/            # Basic UI parts (Button, Badge)
├── content/           # Content Collections (Blog, Docs, Changelog)
├── i18n/              # Localization files and logic
├── layouts/           # Page wrappers
├── pages/             # File-based routing
├── styles/            # CSS & Tailwind setup
└── site.config.ts     # Global settings

Customization

Theming

You can easily customize the primary brand color and other site settings in src/site.config.ts.

// src/site.config.ts
export const siteConfig = {
  name: 'ASTRO攻略LABO',
  description: 'Premium Astro Boilerplate',
  primaryColor: '#00008B', // Update this to your brand color
  logo: {
    src: '/logo.svg',
    strategy: 'invert',
  },
  ogImage: '/og-image.webp',
};

To update the header links, modify src/components/Header.astro.

Deployment

This Boilerplate is ready to deploy to Vercel, Netlify, or any static hosting provider. Just run:

pnpm run build

This will generate a dist folder with your static site.

Next Steps

Check out the Components Guide to see the included premium components in action and learn how to customize them.

Next Components