从零开始：搭建并优化我的Astro博客

# 使用模板创建项目
npm create astro@latest -- --template uxiaohan/vhAstro-Theme astro-blog

# 进入项目目录
cd astro-blog

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 删除示例文章（保留1-2篇作为格式参考）
rm -f "src/content/blog/【开源】HanAnalytics访问分析Web统计托管于（Cloudflare Pages）.md"
rm -f "src/content/blog/【开源】骤雨重山无限存储图床托管于（Cloudflare Pages）.md"
# ... 其他文章

# 清空页面数据
# src/page_data/Link.ts - 友链数据
# src/page_data/Talking.ts - 动态数据
# src/page_data/Friends.ts - 圈子数据

export default {
  Title: 'AEIOU的博客',
  Site: 'https://your-domain.com',
  Subtitle: '记录生活，分享技术。',
  Author: 'AEIOU',
  Avatar: '/assets/images/avatar.png',
  // ... 其他配置
}

---
import { Image } from 'astro:assets';
import banner from '@/assets/images/banner.png';
---

<Image 
  src={banner}
  alt="博客首页横幅 - AEIOU的技术分享空间"
  width={1920}
  height={1080}
  format="avif"
  quality={80}
/>

// .eslintrc.cjs
module.exports = {
  extends: [
    'plugin:astro/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  rules: {
    '@typescript-eslint/no-explicit-any': 'warn',
    'no-console': ['warn', { allow: ['warn', 'error'] }],
  }
}

// astro.config.mjs
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [
    tailwind({
      applyBaseStyles: false  // 保留原有样式
    }),
    // ...
  ]
})

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx}'],
  theme: {
    extend: {
      colors: {
        'vh-primary': '#01C4B6',
        'vh-text': '#34495e',
      }
    }
  }
}

<header class="vh-header">
  <div class="main">
    <span class="menu-btn">...</span>
  </div>
</header>

<header class="vh-header" role="banner">
  <section class="main">
    <nav aria-label="主导航">
      <button class="menu-btn" aria-label="打开菜单" type="button">...</button>
    </nav>
  </section>
</header>

export default defineConfig({
  build: {
    format: 'file',
    inlineStylesheets: 'auto'
  },
  image: {
    service: sharpImageService({ quality: 80 }),
    formats: ['avif', 'webp', 'png', 'jpeg']
  },
  vite: {
    build: {
      cssCodeSplit: true,
      minify: 'terser'
    }
  }
})

It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin.

npm install -D tailwindcss@3 @astrojs/tailwind

Property 'formats' does not exist on type 'IntrinsicAttributes & Props'

<!-- 错误 -->
<Image formats={['avif', 'webp']} />

<!-- 正确 -->
<Image format="avif" />

wildcards can only be placed at the beginning of the hostname

// astro.config.mjs
image: {
  // remotePatterns: [
  //   { protocol: 'https', hostname: 'i0.wp.com' }
  // ]
}

# .github/workflows/deploy.yml
name: Deploy to Vercel
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: vercel/action-deploy@v1