
原项目网站
原项目已部署在 https://ohmycv.app/,您可以直接访问该网站在线创建和编辑您的简历,无需本地安装任何软件。
网站功能特点
- 在线简历编辑器,支持实时预览
- 多种简历模板可选
- 支持导出为 Markdown、PDF、HTML 等格式
- 支持多语言界面
- 响应式设计,适配各种设备
使用说明
- 访问 https://ohmycv.app/
- 选择合适的简历模板
- 在线编辑您的个人信息、工作经历、教育背景等内容
- 实时预览简历效果
- 导出您需要的格式
用户自建网站 (md-resume.pages.dev)
除了原项目网站外,用户也可以基于本项目在自己的Cloudflare Pages上搭建专属简历网站,例如 md-resume.pages.dev。
自建网站优势
- 拥有独立的域名和网站
- 可以进行个性化定制
- 数据完全由自己掌控
- 可以添加自定义功能
访问方式
您可以直接访问 md-resume.pages.dev 查看效果,或按照本文档后续的"部署到Cloudflare Pages"部分说明,在自己的Cloudflare账户中创建属于您的简历网站。
部署指南(Oh My CV)
本文档介绍如何在本地开发、构建,以及将项目部署到常见的静态托管平台(GitHub Pages / Vercel / Netlify / Cloudflare Pages)。
项目地址:https://github.com/Renovamen/oh-my-cv
项目概览
- 技术栈:Nuxt 3 + Vue 3 + Vite + UnoCSS + Pinia + PWA
- 仓库结构(monorepo / pnpm workspace):
site
:主站点源代码(Nuxt 3,SSG 静态站点)packages/*
:站点用到的工具/插件包(需先构建)
- 产物目录:
site/dist
(执行构建后生成,可直接静态托管)
环境要求
- Node.js:20+(建议 LTS)
- pnpm:9+
- 操作系统:Windows / macOS / Linux 均可
建议启用 corepack 并安装指定版本的 pnpm:
1 | corepack enable |
本地开发
- 安装依赖(在仓库根目录):
1 | pnpm install |
- 先构建工作区包(供站点引用):
1 | pnpm build:pkg |
- 可选:配置 Google Fonts API Key(用于在站点内选择并预加载字体,非必需)
在 site/.env
中设置:
1 | NUXT_PUBLIC_GOOGLE_FONTS_KEY="你的_API_Key" |
获取方式:参考 https://developers.google.com/fonts/docs/developer_api#APIKey
- 启动开发服务器:
1 | pnpm dev |
- 预览生产构建(本地):
1 | pnpm serve |
生产构建
推荐在根目录执行一键发布脚本(先构建 packages,再构建站点):
1 | pnpm release |
构建完成后,静态产物位于:
1 | site/dist |
部署到 GitHub Pages(推荐)
仓库已内置工作流:.github/workflows/deploy.yaml
,默认在 main
分支推送时自动构建并发布。
- 可选:在仓库 Settings → Secrets and variables → Actions 中新增仓库密钥:
GOOGLE_FONTS_KEY
:用于在构建时注入NUXT_PUBLIC_GOOGLE_FONTS_KEY
。
- 自定义域名:如需绑定域名,请修改或删除
site/src/public/CNAME
。- 若你 fork 了本仓库且不使用
ohmycv.app
,请务必删除或改为你的域名,否则 Pages 可能报错。
- 若你 fork 了本仓库且不使用
- 首次启用 Pages:Settings → Pages,将 Source 设置为 “GitHub Actions”。
部署完成后,GitHub Actions 会自动将 site/dist
发布到 Pages。
部署到 Vercel
- Framework Preset:选择 “Other” 或 “Static Site”(为了纯静态托管)
- Build Command:
pnpm release
- Output Directory:
site/dist
- Install Command:
pnpm install --frozen-lockfile
- Environment Variables:
NODE_VERSION=20
- 可选:
NUXT_PUBLIC_GOOGLE_FONTS_KEY=你的_API_Key
部署到 Netlify
- Build command:
pnpm release
- Publish directory:
site/dist
- Node version:
20
- Environment variables(可选):
NUXT_PUBLIC_GOOGLE_FONTS_KEY
如果使用 Netlify UI:在 “Site settings → Build & deploy → Build settings” 中配置以上项。
部署到 Cloudflare Pages(详细)
Cloudflare Pages 可通过两种方式部署:
方式 A(推荐):连接 GitHub 仓库,自动构建与发布。
方式 B:本地构建后,使用 Wrangler CLI 或网页上传静态产物。
方式 A:连接 GitHub 仓库
-
在 Cloudflare Dashboard → Pages → Create a project → Connect to Git,选择本仓库并设置:
- Production branch:
main
- Root directory:留空(使用仓库根目录)
- Framework preset:
None
(我们是纯静态构建)
- Production branch:
-
Build settings:
- Package manager:选择
pnpm
(如可选) - Build command:
- 若支持 pnpm:
pnpm release
- 若未提供 pnpm 选项,可改为:
1
corepack enable && corepack prepare [email protected] --activate && pnpm release
- 若支持 pnpm:
- Build output directory:
site/dist
- Package manager:选择
-
Environment variables(构建环境变量):
NODE_VERSION=20
- 可选:
NUXT_PUBLIC_GOOGLE_FONTS_KEY=你的_API_Key
- 若部署在子路径(较少见),还需:
NUXT_APP_BASE_URL="/<子路径>/"
-
(可选,强烈建议)启用单页应用回退(防 404 刷新问题):
- 在仓库新增文件
site/src/public/_redirects
,内容:构建后会进入1
/* /index.html 200
site/dist/_redirects
,确保直接访问如/editor/xxx
这类前端路由时不会返回 404。
- 在仓库新增文件
-
保存配置并开始首次构建。完成后可在 Pages 项目里绑定自定义域名(Custom domains),按提示完成 DNS 解析。
提示:如你在 Pages 中将 Root directory 改为 site
,则需确保在 Build command 中先构建工作区包(否则 site
引用的 workspace 包没有 dist):
1 | corepack enable && corepack prepare [email protected] --activate && pnpm -C .. build:pkg && pnpm build |
其中 pnpm build
等价于 nuxt generate
(定义在 site/package.json
)。默认推荐在仓库根目录执行 pnpm release
,更省心。
方式 B:本地构建 + CLI/网页上传
- 本地构建(仓库根目录):
1 | pnpm install |
产物输出到 site/dist
。
-
使用 Wrangler CLI 部署(二选一):
- 临时执行:
npx wrangler pages deploy site/dist --project-name <你的项目名>
- 或使用 pnpm:
pnpm dlx wrangler pages deploy site/dist --project-name <你的项目名>
- 临时执行:
-
或者,在 Cloudflare Pages Web 界面选择 “Upload assets” 直接上传
site/dist
文件夹。 -
如需自定义域名,到 Pages 项目 → Custom domains 绑定域名并完成 DNS 配置。
Cloudflare 注意事项
- SPA 路由刷新 404:请按上文添加
_redirects
文件,或在 Pages 高级设置里启用 SPA 回退(若 UI 提供)。 - PWA:构建后的
dist
会包含 Service Worker/manifest,Pages 可直接托管,无需额外配置。 - Monorepo:如非在根目录构建,需先构建
packages/*
(pnpm build:pkg
)。
子路径部署(重要)
默认配置假设部署在站点根路径 /
。如果你的站点将部署在子路径(例如 GitHub Project Pages:https://<user>.github.io/<repo>/
),需要调整 base URL 和 PWA scope:
- 在
site/nuxt.config.ts
中为app.baseURL
预留环境变量(示例):
1 | export default defineNuxtConfig({ |
- 在
site/configs/pwa.ts
中,将scope
与base
改为与baseURL
一致(示例):
1 | const scope = process.env.NUXT_APP_BASE_URL || "/"; |
- 在部署环境中设置:
NUXT_APP_BASE_URL="/<repo>/"
,并重新构建与部署。
若不做上述调整,子路径部署可能出现样式丢失、PWA 不工作或路由 404 等问题。
常见问题排查(FAQ)
- 空白页/资源 404:
- 多为子路径部署未设置
baseURL
,或未同步修改 PWAscope/base
。
- 多为子路径部署未设置
- 构建时报找不到某些包的
dist
:- 先执行
pnpm build:pkg
再构建站点,或使用pnpm release
一步到位。
- 先执行
- Google Fonts 无法选择或加载:
- 未设置
NUXT_PUBLIC_GOOGLE_FONTS_KEY
也可正常使用(通过 CSS 加载),但无法在站内列表中检索/预加载;如需完整体验,请设置 API Key。
- 未设置
- 本地
pnpm
命令不可用:- 执行
corepack enable && corepack prepare [email protected] --activate
,或全局安装 pnpm。
- 执行
目录速览
- 站点入口与配置:
site/nuxt.config.ts
- PWA 配置:
site/configs/pwa.ts
- 多语言配置:
site/configs/i18n.ts
- 静态资源(部署时会复制到产物):
site/src/public/
- 产物目录(静态托管根目录):
site/dist
如需进一步帮助或提交问题,请在 GitHub Issues 中反馈。祝你部署顺利!