# sell

**Repository Path**: lxjdocker/sell

## Basic Information

- **Project Name**: sell
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-05
- **Last Updated**: 2026-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 码语 · 个人博客

一个使用 React + Vite + TypeScript 构建的静态博客网站，专为部署到 Gitee Pages 设计。

## ✨ 特性

- **多页面导航**：首页、归档、关于、文章详情、404 页
- **暗黑模式**：跟随系统偏好，支持手动切换并持久化
- **响应式布局**：适配手机、平板、桌面多端设备
- **静态优先**：文章以数据形式内置，无需后端即可访问
- **零刷新 404**：使用 HashRouter，静态托管下任意路由刷新不报错
- **自动部署**：内置 Gitee Go 流水线与 GitHub Actions 备选方案

## 🛠 技术栈

- React 19 + TypeScript
- Vite 8（构建工具）
- React Router v6（HashRouter 路由）
- 原生 CSS 变量（主题切换，无 UI 库依赖）

## 📦 本地开发

```bash
# 安装依赖
npm install

# 启动开发服务器（默认 http://localhost:5173）
npm run dev

# 构建生产产物到 dist/
npm run build

# 本地预览构建产物
npm run preview
```

## 📁 项目结构

```
sell-java/
├── .workflow/build.yml        # Gitee Go 流水线（自动部署）
├── .github/workflows/         # GitHub Actions 备选方案
├── scripts/
│   ├── deploy.sh              # 手动部署脚本（Linux/Mac/Git Bash）
│   └── deploy.ps1             # 手动部署脚本（Windows PowerShell）
├── src/
│   ├── components/            # 公共组件（Header/Footer/Layout 等）
│   ├── pages/                 # 页面（Home/PostDetail/Archive/About/NotFound）
│   ├── data/posts.ts          # 静态文章数据
│   ├── hooks/useTheme.ts      # 主题切换 Hook
│   ├── types/post.ts          # 类型定义
│   ├── App.tsx                # 路由配置
│   ├── main.tsx               # 应用入口
│   └── index.css             # 全局样式与主题变量
└── vite.config.ts             # Vite 配置（base 设为 './' 适配子路径）
```

## 📝 添加文章

编辑 `src/data/posts.ts`，按以下结构追加一篇：

```ts
{
  id: 'my-new-post',              // 唯一标识，用于 URL
  title: '文章标题',
  summary: '一句话摘要，用于列表展示。',
  content: ['段落1', '段落2'],    // 正文，每个元素为一段
  date: '2026-08-01',             // YYYY-MM-DD
  tags: ['标签1', '标签2'],
  cover: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
  readingTime: 5,                 // 阅读时长（分钟）
}
```

## 🚀 部署到 Gitee Pages

### 方式一：手动部署（最简单可靠）

1. 在 Gitee 创建一个空仓库（如 `sell-java`），不要勾选初始化 README。
2. 本地关联远程仓库：

   ```bash
   git remote add origin https://gitee.com/你的用户名/sell-java.git
   ```

3. 运行部署脚本（会自动构建并把 `dist` 内容推送到 `gh-pages` 分支）：

   ```bash
   # Windows PowerShell
   powershell -ExecutionPolicy Bypass -File scripts\deploy.ps1
   # 或 Git Bash / Linux / Mac
   bash scripts/deploy.sh
   ```

4. 前往 Gitee 仓库 → **服务** → **Gitee Pages**：
   - 部署分支选择：`gh-pages`
   - 部署目录：`/`（根目录）
   - 点击 **启动**

5. 后续每次更新文章，重复执行第 3 步，再到 Gitee Pages 页面点 **刷新** 即可。

### 方式二：Gitee Go 自动部署

1. 在 Gitee 仓库 → **服务** → **Gitee Go** 开通服务。
2. 进入 Gitee Go → **密钥管理**，添加名为 `GITEE_TOKEN` 的个人访问令牌（在 Gitee 个人设置 → 私人令牌中生成）。
3. 编辑 `.workflow/build.yml`，把推送地址中的仓库路径替换为你自己的：

   ```
   https://oauth2:${GITEE_TOKEN}@gitee.com/你的用户名/你的仓库名.git
   ```

4. 提交代码到 `main` 分支，Gitee Go 会自动触发流水线：`npm install` → `npm run build` → 推送 `gh-pages` 分支。
5. 到 Gitee Pages 页面选择 `gh-pages` 分支并启动（首次需手动，之后每次推送需要点 **刷新**，Gitee Pages Pro 才支持自动刷新）。

### 方式三：GitHub Actions 自动刷新（备选）

如果你同时把代码托管到 GitHub，可借助 `gitee-pages-action` 实现自动刷新 Gitee Pages：

1. 镜像仓库到 GitHub。
2. 在 GitHub 仓库 → **Settings → Secrets** 添加：
   - `GITEE_PASSWORD`：你的 Gitee 密码
   - `GITEE_REPO`：Gitee 仓库全名（如 `username/repo`）
3. 编辑 `.github/workflows/deploy.yml`，替换 `gitee-username` 和 `gitee-repo` 为你自己的信息。
4. 推送到 GitHub `main` 分支即会自动构建并刷新 Gitee Pages。

## ⚙️ 部署适配说明

项目已针对 Gitee Pages 做了以下适配：

- `vite.config.ts` 中 `base: './'`：使用相对路径加载资源，避免子路径下 404。
- 路由使用 `createHashRouter`：URL 形如 `/#/archive`，刷新时静态服务器只请求根路径，不会 404。
- 资源路径在 `index.html` 中也使用相对路径 `./favicon.svg`。

## 📄 License

MIT