VitePress Online Editor，解决 vitpress 写文章的繁琐。

type

status

date

slug

summary

VitePress Online Editor

一个基于 VitePress 的在线 Markdown 编辑器集成，让你可以直接在浏览器中编写和发布文章。

项目文档

特性

📝 在线 Markdown 编辑

🔄 实时预览

🚀 一键发布到 GitHub

🎨 自动适配明暗主题

🔒 密码保护

📸 图片上传支持

项目架构

快速开始

克隆仓库：

安装依赖：

启动开发服务器：

构建生产版本：

使用方法

访问编辑器页面

输入访问密码（默认为：123456）

配置 GitHub 信息：

GitHub Token

用户名

仓库名

分支名

开始编写文章

点击保存即可发布到 GitHub

部署方式

1. GitHub Pages 部署

步骤 1: 创建 GitHub Actions 工作流

在项目的 .github/workflows 目录中创建一个名为 deploy.yml 的文件：

步骤 2: 配置 GitHub Pages

进入仓库设置的 "Pages" 菜单项

在 "Build and deployment > Source" 部分选择 "GitHub Actions"

步骤 3: 配置 VitePress 基础路径

在 docs/.vitepress/config.js 中设置 base 选项：

步骤 4: 部署

将更改推送到 main 分支

等待 GitHub Action 工作流完成访问你的站点：使用 GitHub Pages URL: https://.github.io/[repository]/

或者自定义域名（如果已配置）

2. Netlify / Vercel / Cloudflare Pages 部署

Vercel 提供了更简单的部署方式：

在 Vercel 导入你的 GitHub 仓库

选择 VitePress 框架预设

点击部署即可

Vercel 会自动监听你的 GitHub 仓库变化，当你推送新的更改时，会自动重新部署。

性能优化

具体可查看！https://vitepress.dev/zh/guide/deploy

HTTP 缓存配置

为了提高重复访问时的性能，你可以配置 HTTP 缓存标头。VitePress 在生产环境中会为静态资源生成带有哈希值的文件名（例如：app.4f283b18.js），这使得我们可以安全地使用强缓存策略。

Netlify 配置

在 docs/public/_headers 文件中添加：

📝 注意：`_headers` 文件必须放在 `docs/public` 目录中，它会被自动复制到构建输出目录。更多信息请参考 Netlify 自定义标头文档

Vercel 配置

在项目根目录创建 vercel.json 文件：

📝 注意：`vercel.json` 文件必须放在项目根目录。更多信息请参考 Vercel 标头配置文档

其他平台

对于其他平台，你可以配置以下 HTTP 标头：

这个配置应该应用到 /assets/* 路径下的所有文件。

为什么需要缓存配置？

哈希文件名保证内容一致性：

文件名中的哈希值（如 `4f283b18`）是根据文件内容生成的

只要文件内容不变，哈希值就不会改变

内容变化时，哈希值会自动更新

优化加载性能：

强缓存策略可以让浏览器直接使用本地缓存

减少不必要的网络请求

提升页面加载速度

安全可靠：

基于内容哈希的缓存策略确保用户总是能看到最新内容

无需担心缓存过期问题

配置说明

修改密码

在 docs/.vitepress/theme/components/editor.vue 中修改 correctPassword 变量：

自定义主题

可以通过修改 docs/.vitepress/theme/custom.css 来自定义主题样式。

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT