# vlog

**Repository Path**: VastOwen/vlog

## Basic Information

- **Project Name**: vlog
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-04
- **Last Updated**: 2026-06-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vlog — 纯静态个人博客

基于 **VitePress** 构建的纯静态博客系统，无需后端、无需数据库、永久免费部署。

## 特性

- 📝 **Markdown 写作** — 本地新建 `.md` 文件即发布，无需后台管理
- 🔍 **全文搜索** — 内置离线搜索，快速检索文章
- 🌓 **双主题切换** — 亮色/暗黑模式，自动跟随系统
- 📱 **响应式适配** — 完美适配电脑、平板、手机
- 💬 **评论互动** — 接入 Giscus，通过 GitHub 账号评论
- 🏷️ **分类与标签** — 自动分类、标签云筛选
- 🚀 **零成本部署** — GitHub Pages / Vercel 永久免费

## 目录结构

```
├── .vitepress/
│   ├── config.js               # 全站配置
│   └── theme/
│       ├── index.js            # 主题入口
│       ├── custom.css          # 自定义样式
│       ├── components/         # Vue 组件
│       └── layouts/            # 布局组件
├── docs/
│   ├── public/                 # 静态资源
│   ├── index.md                # 首页
│   ├── about.md                # 关于页
│   ├── archive.md              # 归档页
│   ├── category/               # 分类页面
│   ├── tag/                    # 标签页面
│   └── articles/               # 博客文章 (.md)
├── .env.example                # 环境变量示例
└── README.md
```

## 快速开始

```bash
# 安装依赖
npm install

# 本地开发
npm run dev

# 构建静态文件
npm run build

# 预览构建结果
npm run preview
```

## 写新文章

在 `docs/articles/` 下创建 `.md` 文件：

```md
---
title: 文章标题
date: 2026-06-01
tags:
  - 标签1
  - 标签2
category: 分类名称
description: 文章摘要
draft: false
---

正文内容...
```

## 配置评论系统

1. 复制 `.env.example` 为 `.env`
2. 在 GitHub 仓库开启 Discussions
3. 安装 [Giscus App](https://github.com/apps/giscus)
4. 填写 `.env` 中的 Giscus 配置项

## 部署

### 方案一：阿里云 OSS + CDN（推荐，国内访问极快）

适合要求国内高速访问，自定义域名（需备案）。

**1. 创建 OSS Bucket**

- 进入 [阿里云 OSS 控制台](https://oss.console.aliyun.com)，创建 Bucket
- **地域**：选择离你最近的（如 华东1-杭州）
- **读写权限**：`公共读`
- 创建后在 Bucket 配置中开启 **静态网站托管**，默认首页设为 `index.html`

**2. 配置 CDN（可选但建议）**

- 进入 [阿里云 CDN 控制台](https://cdn.console.aliyun.com)，添加域名
- 源站类型选择 **OSS域名**，选择刚创建的 Bucket
- 完成域名备案后配置 CNAME 解析

**3. 安装 ossutil 并部署**

```bash
# 安装 ossutil（Windows）
# 下载 https://gosspublic.alicdn.com/ossutil/1.7.19/ossutil-v1.7.19-win32-x64.zip
# 解压后配置
ossutil config

# 部署命令（已写入 package.json）
npm run deploy:ali
# 首次使用需将 package.json 中 oss://你的bucket名/ 替换为实际地址
```

> 小技巧：在 `package.json` 中添加 `"deploy:ali": "ossutil cp -r docs/.vitepress/dist/ oss://你的bucket名/ --update"`，每次构建后执行 `npm run build && npm run deploy:ali` 一键部署。

**费用参考**：个人博客月均 ≈ 1-3 元（OSS 存储 + CDN 流量）

---

### 方案二：Gitee Pages（免费，国内访问较快）

**1. 创建 Gitee 仓库**

- 登录 [Gitee](https://gitee.com)，创建新仓库（建议取名 `vlog`）
- 在项目根目录初始化 Git 并推送到 Gitee

**2. 配置 Gitee Pages**

- 进入仓库 → **服务** → **Gitee Pages**
- 部署分支选择 `master`（或 `main`）
- 部署目录填写 `docs/.vitepress/dist`
- 点击 **启动** 即可生效

> 注意：Gitee Pages 需手动点击 **更新** 才能同步最新内容，不支持自动触发。每次更新博客后需重新部署一次。

---

### 方案三：GitHub Pages（免费，国外访问）

```bash
npm run build
# 推送代码，在仓库 Settings → Pages 中选择 docs/.vitepress/dist 目录
```

### 方案四：Vercel（免费，国外访问）

连接 GitHub 仓库，设置框架为 VitePress，自动部署。

## License

MIT