零基础搭建个人网站：从 Astro 框架到 GitHub 自动部署完全指南

🚀 适合人群：编程新手、想要建立个人网站的开发者、希望学习现代前端开发流程的同学

📋 你将学到：Astro 框架基础、GitHub Pages 部署、GitHub Actions 自动化部署

前置知识与环境准备

🔧 需要安装的软件

1. Node.js（JavaScript 运行环境）

安装步骤：

访问 Node.js 官网
下载 LTS（长期支持）版本
按照安装向导完成安装
验证安装：打开终端/命令提示符，输入：

Bash 复制代码

node --version
npm --version

2. Git（版本控制系统）

安装步骤：

访问 Git 官网
下载并安装适合你操作系统的版本
验证安装：

Bash 复制代码

git --version

什么是 Astro？为什么选择它？

🚀 Astro 简介

Astro 是一个现代的前端框架，专为构建快速的静态网站而设计。

✨ 为什么选择 Astro？

性能优异：默认生成静态 HTML，加载速度极快
多框架支持：可以混用 React、Vue、Svelte 等
SEO 友好：静态生成的页面对搜索引擎友好
部署简单：生成的是静态文件，可以部署到任何静态网站托管服务

📚 关键概念解释

静态网站生成器（SSG）：在构建时生成 HTML 文件，而不是在用户访问时实时生成

创建一个 Astro 项目

🏗️ 项目初始化

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

Bash 复制代码

# 创建新的 Astro 项目，往下看，会有安装过程中如何选择的说明
npm create astro@latest my-website

# 进入项目目录
cd my-website

# 启动开发服务器
npm run dev

⚙️ 安装过程中的选择

当命令运行时，会出现一系列选择，建议如下配置：

Plain 复制代码

✔ How would you like to start your new project?
  → Use blog template (推荐选择)

✔ Install dependencies?
  → Yes

✔ Initialize a new git repository?
  → Yes（如果已经在 git 仓库中，选择 No）

🎉 验证安装

安装完成后，你应该能看到：

Plain 复制代码

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

执行npm run dev 后，在浏览器中访问 http://localhost:4321，你应该能看到一个示例网站。

理解项目结构

Plain 复制代码

my-website/
├── 📁 public/              # 静态资源文件夹
│   ├── favicon.svg         # 网站图标
│   └── robots.txt          # 搜索引擎爬虫规则
├── 📁 src/                 # 源代码文件夹
│   ├── 📁 components/      # 可复用组件
│   ├── 📁 content/         # 内容文件（如博客文章）
│   ├── 📁 layouts/         # 页面布局模板
│   ├── 📁 pages/           # 页面文件（自动生成路由）
│   └── 📁 styles/          # 样式文件
├── 📄 astro.config.mjs     # Astro 配置文件
├── 📄 package.json         # 项目依赖和脚本
├── 📄 tsconfig.json        # TypeScript 配置
└── 📄 README.md            # 项目说明文档

📂 重要文件和文件夹解释

src/pages/：这里的每个文件都会成为网站的一个页面
- index.astro → 主页（/）
- about.astro → 关于页面（/about）
src/layouts/：页面的通用布局（如导航栏、页脚）
src/components/：可复用的组件（如按钮、卡片）
public/：直接复制到最终网站的文件

GitHub Pages 部署配置

🌐 什么是 GitHub Pages？

GitHub Pages 是 GitHub 提供的免费静态网站托管服务，可以直接从你的 GitHub 仓库部署网站。

⚙️ 配置 Astro 项目

1. 更新 `astro.config.mjs`

JavaScript 复制代码

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  // 设置网站的基础 URL
  site: 'https://你的用户名.github.io',
  base: '/my-website',
});

⚠️注意：Header.astro文件中的 About 的路径得改成 /my-website/about才可以正常访问

重要说明：

site：你的 GitHub Pages 域名
base：仓库名称

2. 测试本地构建

在推送前先测试本地构建是否正常：

Bash 复制代码

# 构建项目
npm run build

# 预览构建结果
npm run preview

GitHub Actions 自动化部署

🤖 什么是 GitHub Actions？

GitHub Actions 是 GitHub 提供的**持续集成****/持续部署 （CI/CD）**服务，可以自动执行各种任务。

CI/CD 解释：

CI **（持续集成）**：每次代码提交都自动测试和构建
CD **（持续部署）**：自动将构建好的代码部署到服务器

📁 创建部署工作流

1. 创建工作流文件

在项目根目录创建 .github/workflows/deploy.yml：

Bash 复制代码

# 创建目录
mkdir -p .github/workflows

# 创建工作流文件（可以用编辑器创建）
touch .github/workflows/deploy.yml

2. 编写工作流配置

YAML 复制代码

# .github/workflows/deploy.yml
name: 部署到 GitHub Pages

on:
  # 当推送到 main 分支时触发
  push:
    branches: [ main ]
  
  # 允许手动触发
  workflow_dispatch:

# 设置权限
permissions:
  contents: read
  pages: write
  id-token: write

# 确保只有一个部署在运行
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    name: 构建网站
    runs-on: ubuntu-latest
    steps:
      - name: 检出代码
        uses: actions/checkout@v4
      
      - name: 设置 Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: 安装依赖
        run: npm ci
      
      - name: 构建 Astro 网站
        run: npm run build
      
      - name: 上传构建结果
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

  deploy:
    name: 部署到 GitHub Pages
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: 部署到 GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

📖 工作流解释

这个工作流包含两个任务：

build（构建）：
1. 构建 Astro 项目
2. 上传构建结果
deploy（部署）：
1. 等待构建完成后，将构建结果部署到 GitHub Pages

⚙️ 配置 GitHub Pages

进入仓库设置：
1. 在 GitHub 仓库页面点击 "Settings"
配置 Pages：
1. 在左侧菜单找到 "Pages"
2. 在 "Source" 部分选择 "GitHub Actions"
3. 保存设置

🚀 触发部署

提交并推送你的更改：

Bash 复制代码

# 添加所有文件
git add .

# 提交更改
git commit -m "添加 GitHub Actions 自动部署配置"

# 推送到 GitHub
git push origin main

📊 查看部署状态

在 GitHub 仓库页面点击 "Actions" 标签
你会看到正在运行的工作流
点击工作流名称查看详细日志
部署成功后，你的网站就可以访问了！

网站地址 ：https://你的用户名.github.io/my-personal-website

自定义域名配置（可选）

如果你有自己的域名，可以配置自定义域名。

🌐 域名配置步骤

1. 配置 DNS

在你的域名提供商处添加 DNS 记录：

对于顶级域名（example.com）：

Plain 复制代码

类型: A
名称: @
值: 185.199.108.153
值: 185.199.109.153
值: 185.199.110.153
值: 185.199.111.153

**对于子域名（****www.example.com****）**：

Plain 复制代码

类型: CNAME
名称: www
值: 你的用户名.github.io

2. 在 GitHub 中配置

进入仓库的 "Settings" → "Pages"
在 "Custom domain" 字段输入你的域名
等待 DNS 检查通过
勾选 "Enforce HTTPS"

3. 创建 CNAME 文件

在 public/ 目录下创建 CNAME 文件：

Plain 复制代码

# public/CNAME
yourdomain.com

4. 更新 Astro 配置

JavaScript 复制代码

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://yourdomain.com',
  // 如果使用自定义域名，通常不需要 base
  // base: '/my-personal-website',
});

🎉 总结

通过这个教程，你已经成功：

✅ 学会了 Astro 框架的基础使用
✅ 创建了一个美观的个人网站
✅ 配置了 GitHub Pages 部署
✅ 设置了 GitHub Actions 自动化部署

💡 下次更新网站时

只需要简单的三步：

Bash 复制代码

# 1. 修改代码
# 2. 提交更改
git add .
git commit -m "更新网站内容"

# 3. 推送到 GitHub（自动部署！）
git push origin main

零基础搭建个人网站：从 Astro 框架到 GitHub 自动部署完全指南

前置知识与环境准备

🔧 需要安装的软件

1. Node.js（JavaScript 运行环境）

2. Git（版本控制系统）

什么是 Astro？为什么选择它？

🚀 Astro 简介

✨ 为什么选择 Astro？

📚 关键概念解释

创建一个 Astro 项目

🏗️ 项目初始化

⚙️ 安装过程中的选择

🎉 验证安装

理解项目结构

📂 重要文件和文件夹解释

GitHub Pages 部署配置

🌐 什么是 GitHub Pages？

⚙️ 配置 Astro 项目

1. 更新 astro.config.mjs

2. 测试本地构建

GitHub Actions 自动化部署

🤖 什么是 GitHub Actions？

📁 创建部署工作流

1. 创建工作流文件

2. 编写工作流配置

📖 工作流解释

⚙️ 配置 GitHub Pages

🚀 触发部署

📊 查看部署状态

自定义域名配置（可选）

🌐 域名配置步骤

1. 配置 DNS

2. 在 GitHub 中配置

3. 创建 CNAME 文件

4. 更新 Astro 配置

🎉 总结

💡 下次更新网站时

1. 更新 `astro.config.mjs`