超低成本展示型独立站快速搭建

本篇教你5 分钟内搭建一个完整的展示型独立站模板，后面会教你怎么添加内容、部署上线。

1. 创建新项目

打开终端，执行以下命令：

# 1. 创建新项目
npm create astro@latest blktech-showcase

# 2. 进入项目目录
cd blktech-showcase

安装依赖：

npm install

2. 安装 TailwindCSS + 最新版本

我们的项目已经默认安装了 Tailwind，现在我们升级到最新版：

# 安装 Tailwind v5（最新）
npm install tailwindcss@latest
npm install -D @tailwindcss/vite

# 安装额外组件（推荐）
npm install @astrojs/tailwind

3. 配置 Tailwind（astro.config.mjs）

打开 astro.config.mjs，加入以下配置：

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import tailwind from '@tailwindcss/vite';

export default defineConfig({
  site: 'https://yourdomain.com', // 稍后改成你自己的域名
  integrations: [mdx(), sitemap()],
  
  vite: {
    plugins: [tailwind()],
  },
  
  // 推荐：开启 Tailwind v5 JIT 模式
  vite: {
    plugins: [tailwind()],
    server: {
      watch: {
        usePolling: false,
      },
    },
  },
});

4. 配置 Tailwind v5

创建 tailwind.config.mjs：

import { defineConfig } from 'astro/config';
import tailwind from '@tailwindcss/vite';

export default defineConfig({
  vite: {
    plugins: [tailwind()],
  },
});

5. 推荐项目文件夹结构

blktech-showcase/
├── public/                  # 静态资源
│   ├── images/
│   │   └── logo.png
│   └── ...
├── src/
│   ├── components/          # 复用组件
│   │   ├── Navbar.tsx
│   │   ├── Hero.tsx
│   │   ├── ProjectCard.tsx
│   │   ├── Footer.tsx
│   │   └── ContactForm.tsx
│   ├── content/             # 内容（稍后用 Content Collections）
│   ├── pages/               # 页面
│   │   ├── index.astro
│   │   ├── about.astro
│   │   ├── projects.astro
│   │   └── contact.astro
│   ├── styles/
│   │   └── globals.css
│   └── layouts/
│       └── BaseLayout.astro
├── tailwind.config.mjs
├── astro.config.mjs
└── package.json

6. 核心组件示例（推荐结构）

`src/components/Navbar.astro`

---
import { Image } from 'astro:assets';
---

<nav class="bg-white/80 backdrop-blur-md border-b border-gray-100 sticky top-0 z-50">
  <div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="/" class="flex items-center gap-3">
      <Image src="/images/logo.png" alt="Logo" width={32} height={32} />
      <span class="font-semibold text-xl">你的品牌名</span>
    </a>
    
    <div class="hidden md:flex items-center gap-8">
      <a href="/about" class="hover:text-blue-600 transition-colors">关于</a>
      <a href="/projects" class="hover:text-blue-600 transition-colors">作品</a>
      <a href="/contact" class="hover:text-blue-600 transition-colors">联系</a>
    </div>
    
    <a href="/contact" 
       class="bg-blue-600 text-white px-6 py-2.5 rounded-full text-sm font-medium hover:bg-blue-700 transition-colors">
      立即联系
    </a>
  </div>
</nav>

`src/pages/index.astro`（主页）

---
import Layout from '../layouts/BaseLayout.astro';
import Hero from '../components/Hero.astro';
import Projects from '../components/Projects.astro';
import Contact from '../components/Contact.astro';
---

<Layout>
  <Hero />
  <Projects />
  <Contact />
</Layout>

7. 完整 Tailwind 配置（推荐）

创建 src/styles/globals.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: #f8f9fa;
    --foreground: #111827;
  }
}

body {
  @apply bg-gray-50 text-gray-900;
}

h1, h2, h3 {
  @apply font-semibold;
}