Skip to content

README.md

Latest commit

 

History

History
185 lines (132 loc) · 3.58 KB

README.md

File metadata and controls

185 lines (132 loc) · 3.58 KB
Raw

个人网站项目

一个基于 Astro 和 Sanity CMS 构建的个人网站项目，包含博客、项目展示和个人介绍等功能。

技术栈

  • 前端框架: Astro
  • CMS: Sanity
  • UI 框架: Tailwind CSS
  • 组件库: Vue.js
  • 部署: 静态站点生成

项目结构

website/
├── sanity/                 # Sanity CMS 配置和 Schema
│   ├── schemaTypes/        # 数据模型定义
│   │   ├── post.ts         # 博客文章 Schema
│   │   ├── project.ts      # 项目 Schema
│   │   ├── author.ts       # 作者 Schema
│   │   ├── category.ts     # 分类 Schema
│   │   ├── about.ts        # 关于页面 Schema
│   │   └── ...             # 其他 Schema
│   ├── sanity.config.ts    # Sanity 配置文件
│   └── package.json        # Sanity 依赖
├── src/                    # Astro 前端源码
│   ├── components/         # Vue 组件
│   ├── lib/                # 工具库
│   │   └── sanity.ts       # Sanity 客户端配置
│   └── styles/             # 样式文件
├── public/                 # 静态资源
├── astro.config.mjs        # Astro 配置
└── package.json            # 项目依赖

功能特性

  • 博客系统: 基于 Sanity CMS 的博客文章管理
  • 项目展示: 个人项目展示页面
  • 内容管理: 使用 Sanity Studio 进行内容编辑
  • 响应式设计: 支持移动设备访问
  • 静态生成: 高性能的静态站点部署

开发环境设置

  1. 克隆项目到本地：
git clone <repository-url>
cd website
  1. 安装依赖：
npm install
  1. 进入 sanity 目录安装依赖：
cd sanity && npm install

本地开发

启动前端开发服务器

npm run dev

启动 Sanity CMS

npm run sanity-dev

同时启动前端和 CMS

分别在两个终端中运行：

终端 1（前端）：

npm run dev

终端 2（CMS）：

npm run sanity-dev

构建与部署

构建前端应用

npm run build

构建 CMS 并部署到 public/cms

npm run build-cms

此命令会：

  1. 构建 Sanity Studio
  2. 删除旧的 public/cms 目录
  3. 将构建好的 CMS 移动到 public/cms 目录

完整构建流程

# 构建前端
npm run build

# 构建 CMS
npm run build-cms

项目配置

Sanity 配置

  • Project ID: k2j30muc
  • Dataset: production
  • API Version: 2024-01-01
  • CDN: 启用

Schema 类型

项目定义了以下数据类型：

  • Post: 博客文章

    • 标题、摘要、内容
    • 发布日期、封面图片
    • 作者、分类信息

  • Project: 个人项目

    • 标题、描述、技术栈
    • 演示链接、GitHub 链接
    • 缩略图、相册

  • Author: 作者信息

    • 姓名、头像、简介
    • 社交链接

  • Category: 文章分类

  • About: 关于页面内容

API 查询

项目使用 GROQ 查询语言从 Sanity 获取数据，包括：

  • 博客文章列表和详情
  • 项目列表和详情
  • 关于页面内容
  • 精选内容查询

部署说明

  1. 构建前端应用: npm run build
  2. 构建 CMS: npm run build-cms
  3. 将 dist 目录部署到静态托管服务（如 Netlify、Vercel、GitHub Pages 等）
  4. CMS 将部署在 /cms 路径下

环境要求

  • Node.js >= 18.0.0
  • npm >= 8.0.0

贡献

  1. Fork 项目
  2. 创建功能分支
  3. 提交更改
  4. 推送到分支
  5. 创建 Pull Request

许可证

MIT