Clone Website Astro → Astro

Hướng dẫn này áp dụng khi bạn muốn clone/copy một website Astro (như Starlight docs, Astro blog template) để tùy chỉnh cho riêng mình.

Phase 1: Phân tích Website gốc

Bước 1: Xác định công nghệ

# Kiểm tra xem site có phải Astro không
# Mở DevTools (F12) → Console → Gõ:
__ASTRO__

# Nếu trả về object → là Astro site

Kiểm tra trong DevTools Network tab:

Có file .astro được serve không?
HTML có chứa data-astro-* attributes không?

Bước 2: Phân tích cấu trúc

Dùng DevTools Elements để:

Chọn từng section
Copy CSS classes
Ghi lại CSS variables nếu có

Phase 2: Setup Project mới

Khởi tạo Astro project

npm create astro@latest my-clone

# Chọn template phù hợp:
# - "A few best practices" (giống site gốc nhất)
# - Hoặc "Empty" nếu muốn tự build

Cài dependencies cần thiết

cd my-clone

# Nếu site gốc dùng Starlight
npm install @astrojs/starlight

# Nếu có Svelte components
npm install svelte @astrojs/svelte

# Nếu có React components
npm install react react-dom @astrojs/react

# Nếu dùng Tailwind
npm install tailwindcss @astrojs/tailwind
npx tailwindcss init

Phase 3: Copy Assets

Copy hình ảnh và fonts

# Tạo folder public/
mkdir -p public/images
mkdir -p public/fonts

# Copy từ site gốc (download hoặc từ repo nếu open source)
# - Favicon
# - Logo
# - Hero images
# - Font files

Phase 4: Copy CSS

Trích xuất CSS từ site gốc

Cách 1: Từ DevTools

1. DevTools → Sources → Page
2. Tìm các file .css
3. Copy content

Cách 2: Từ source (nếu open source)

git clone https://github.com/original/site.git
cd site
# Copy từ src/styles/

Tổ chức CSS trong project mới

/* 1. CSS Variables (Design Tokens) */
:root {
  /* Colors từ site gốc */
  --color-primary: #e11d48;
  --color-secondary: #0ea5e9;

  /* Typography */
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;
}

/* 2. Reset/Base */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 3. Layout styles */
.navbar { /* ... */ }
.sidebar { /* ... */ }
.footer { /* ... */ }

/* 4. Component styles */
.btn { /* ... */ }
.card { /* ... */ }

Phase 5: Copy Components

Astro Components

Cấu trúc file .astro:

---
// Frontmatter: JavaScript/TypeScript
const { title } = Astro.props;
---

<!-- Template: HTML với expressions -->
<div class="card">
  <h2>{title}</h2>
  <slot />
</div>

<style>
  /* Scoped CSS */
  .card {
    border: 1px solid #ccc;
    padding: 1rem;
  }
</style>

Ví dụ: Clone Navigation component

---
const navItems = [
  { label: 'Home', href: '/' },
  { label: 'About', href: '/about' },
  { label: 'Blog', href: '/blog' },
];
---

<nav class="navbar">
  <div class="logo">
    <a href="/">Logo</a>
  </div>
  <ul class="nav-links">
    {navItems.map(item => (
      <li>
        <a href={item.href}>{item.label}</a>
      </li>
    ))}
  </ul>
</nav>

<style>
  .navbar {
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
  }

  .nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
  }

  a {
    text-decoration: none;
    color: var(--color-base-content);
    font-size: 1rem;  /* ← Quan trọng! */
  }
</style>

Phase 6: Copy Pages

Layout chính

---
const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <title>{title}</title>
  <link rel="stylesheet" href="/styles/global.css" />
</head>
<body>
  <Navigation />
  <main>
    <slot />
  </main>
  <Footer />
</body>
</html>

Trang content

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Home">
  <section class="hero">
    <h1>Welcome to My Site</h1>
    <p>Description...</p>
  </section>
</Layout>

Phase 7: Config và Testing

astro.config.mjs

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  site: 'https://your-site.com',
  integrations: [
    starlight({
      title: 'My Docs',
      customCss: ['./src/styles/custom.css'],
    }),
  ],
});

Clone Website Astro → Astro

Clone Website Astro → Astro

Phase 1: Phân tích Website gốc

Bước 1: Xác định công nghệ

Bước 2: Phân tích cấu trúc

Phase 2: Setup Project mới

Khởi tạo Astro project

Cài dependencies cần thiết

Phase 3: Copy Assets

Copy hình ảnh và fonts

Phase 4: Copy CSS

Trích xuất CSS từ site gốc

Tổ chức CSS trong project mới

Phase 5: Copy Components

Astro Components

Phase 6: Copy Pages

Layout chính

Trang content

Phase 7: Config và Testing

astro.config.mjs

Test checklist