uPage：个人主页生成器
个人介绍、做过的项目、最近写的文章，还有代码之外的一些兴趣，总得找个地方放。uPage 就是这样一个个人主页生成器：在本地直接编辑页面，按需组合内容，最后生成静态网站发布出去。
本文目录
我最近在折腾 Vibe Coding。这次拿出来聊聊的，就是 uPage。
平时写点工具、做点项目，东西慢慢多起来，就会想把它们整理到一起。个人主页挺适合干这件事：别人想了解你，打开一个地址就能随便逛逛，看看你做过什么，最近又在忙什么。
对我来说，它还有一个用途：看看自己又挖了多少坑。
先看看长什么样
桌面端实际截图，人物和内容均为可替换的示例。
uPage 默认用了暖白色背景、深色文字和钴蓝色点缀，配上大字号介绍和工作台插画。整体比较舒展，作品、文章、工具和兴趣依次展开。
我更愿意把它当成一张铺开的个人书桌。桌上摆着什么，大概就能看出这个人平时在忙些什么。
作品区会突出一个主推项目，其他项目按条目排列；文章采用开放列表，方便扫一眼标题；工具和兴趣则各有自己的区域。手机上会根据屏幕宽度重新排列内容。具体的视觉和布局思路，可以看看仓库里的设计说明。
直接点页面，就能改内容
页面搭好之后，总免不了继续修改。换一句介绍、补一个项目、调整一下顺序，这些都是很日常的事情。
所以 uPage 提供了一个本地可视化编辑器。
左边管结构，中间看效果，右边改细节。
编辑器采用三栏布局：
- 左侧管理页面和模块，可以添加内容、调整顺序。
- 中间是页面画布，点击文字就能编辑，也能切换桌面与窄屏预览。
- 右侧调整详细内容，包括图片、链接、颜色和页面设置。
日常更新基本可以在这里完成。比如修改个人介绍、换一张项目封面，或者把最近在用的工具加进去，都能边改边看。
图片支持上传，也可以填写站内路径或远程地址。颜色可以通过拾色器、色板或 HEX 色值调整，既能修改页面默认配色，也能单独设置部分文字的颜色。
工具箱还接入了 Lucide 和 Simple Icons 图标库，常用的通用图标、软件和技术品牌图标可以直接搜索选择。图标数据随项目安装，构建时输出为内联 SVG，发布后不需要再请求在线图标接口。
修改完成后，点击“保存全部页面”，或者按 Ctrl+S；macOS 对应 Cmd+S。具体操作和支持范围整理在编辑器说明中。
想展示什么，就放什么
每个人想放在主页上的东西都不一样。写代码的可能更在意项目，喜欢摄影的想多放几张照片，也有人只想写点介绍，再留几个链接。
uPage 的页面可以按模块组合。目前提供了 12 种内置模块，以及可以重复添加的 Markdown 模块：
| 模块 | 可以放些什么 |
|---|---|
| 个人介绍 | 姓名、简介、首屏图片和按钮 |
| 作品项目 | 项目封面、介绍、技术标签、演示与源码链接 |
| 博客与近况 | RSS 文章列表，以及最近在做的事情 |
| 工具箱 | 常用软件、开发工具和相关链接 |
| 兴趣爱好 | 工作之外的兴趣与配图 |
| 经历时间线 | 工作、学习或创作经历 |
| 精选文章 | 手动整理的文章、专题与系列入口 |
| 相册画廊 | 摄影、插画，以及图片说明 |
| 友链收藏 | 朋友的主页、博客和常用资源 |
| 常见问题 | 可以折叠展开的问答 |
| 联系我 | 邮箱和联系文案 |
| 页脚 | 页脚文字与链接 |
| Markdown | 自由编写的正文内容 |
不需要把这些全部摆上去。先写几句介绍，放两个项目，再留个联系方式，就已经是一个完整的主页了。其他内容慢慢补，毕竟整理主页也不能耽误继续挖坑。
内置模块每页可以添加一次，移除后会保留内容，重新添加时可以恢复。Markdown 则可以放多块，每一块独立编辑和排序；删除 Markdown 实例时，也会删除对应内容。模块说明里有更完整的介绍。
想多写一点，就用 Markdown
现成模块适合结构比较固定的内容。想写一段长一点的自我介绍、项目说明，或者单独放一篇文章，就可以使用 Markdown。
在页面里写 Markdown，需要看效果时再切回预览。
常用的标题、列表、引用、链接、图片、表格和代码块都支持，工具栏也提供了常见语法的插入入口。每一块 Markdown 都有独立的内容和配色，可以分别调整顺序。
Markdown 内容会在构建时转换成 HTML，发布后的页面不需要再加载编辑器或 Markdown 解析器。原始 HTML 会按文字显示，危险链接协议也会被拒绝，具体规则见 Markdown 编辑说明。
uPage 还支持多页面。比如：
| 页面 | 访问地址 | 构建后的文件 |
|---|---|---|
| 首页 | / | dist/index.html |
| 关于我 | /about/ | dist/about/index.html |
| 一篇笔记 | /notes/hello/ | dist/notes/hello/index.html |
每个页面都有独立的内容和布局。新建页面时会复制当前页面，之后可以各自修改。
如果只是想偶尔写点东西，可以用 Markdown 页面放正文，再通过“精选文章”模块整理入口。已经有独立博客的话，也可以继续在原来的地方写，把文章入口放到主页上。按自己的习惯来就好。
博客文章可以通过 RSS 接进来
“博客与近况”模块可以读取 RSS 或 Atom 订阅，把最近发布的文章展示到主页上；近况则单独编辑，两部分可以分别开关。
这样，长文章继续留在博客，主页负责展示最近更新。顺手写一句正在看什么书、折腾什么项目，也能让页面多一点日常气息。
订阅支持 RSS 2.0、RSS 1.0 / RDF 和 Atom，文章会按发布时间排序、按链接去重，展示数量可以设置为 1–20 篇。
这里有个需要说明的地方：正式发布的文章列表是在构建时生成的。 访客打开页面时，不会再实时抓取 RSS。博客更新后，需要重新构建和发布主页，列表才会跟着更新；也可以通过 CI 定期完成这件事。
订阅源暂时出问题时，已经发布的页面仍然保留上一次构建的内容。重新构建时如果无法获取可用订阅，则需要检查地址或网络后再试。RSS 配置说明里写得更详细一些。
本地编辑，静态发布
uPage 的使用流程比较清楚：先在本地编辑和保存，再构建网站，最后发布生成的文件。
保存完成的是本地内容更新，构建和发布之后，访客才能看到新版本。
编辑器只在本地编辑模式下启用，默认只监听本机。发布出去的网站不包含编辑器入口和保存接口，也不需要维护一个在线后台。
构建时，每个页面都会生成包含正文、元信息和样式的 HTML。Markdown 和 RSS 内容也会在这一步处理好，生成的页面无需 JavaScript 即可阅读。
部署时，把完整的 dist 目录交给静态托管服务即可，不需要运行 Node 服务，也不需要配置 SPA 路由回退。
目前整站需要部署在域名根路径。页面本身可以有 /notes/hello/ 这样的嵌套路由，但还不支持把整站挂在 /upage/ 这样的子目录下。托管服务也需要支持访问目录中的 index.html。静态发布说明列出了这些要求。
对更新频率不高的个人主页来说，这套流程比较合适。需要调整时在本地打开编辑器，发布之后，页面就安安静静地待在那里。
技术上用了些什么
项目使用 Vue 3、TypeScript 和 Vite。页面展示、本地编辑服务和静态构建分别承担各自的工作：
| 部分 | 主要职责 |
|---|---|
| Vue 页面组件 | 渲染个人介绍、项目、文章等内容模块 |
| 可视化编辑器 | 处理画布编辑、模块排序和字段设置 |
| 本地服务 | 保存页面、接收上传文件和读取 RSS |
| 共享配置与模型 | 定义页面结构、校验配置和处理 Markdown |
| 静态构建 | 为各个路由生成完整 HTML 与资源文件 |
保存后的页面内容集中在 public/pages.json，包含路由、布局和各模块的数据。首次使用、还没有这个文件时，会从 public/site.config.json 导入初始内容。
通常直接使用编辑器就行；喜欢自己改配置的话，也可以手动维护这些文件。想继续扩展模块，仓库中的组件、编辑器和共享模型也分了目录，方便顺着找。
项目还配置了类型检查、单元测试和浏览器测试，覆盖前端与编辑器相关流程。依赖和可用命令可以查看 package.json，目录用途见开发说明。
在自己电脑上跑起来
先准备 Node.js 22.18 或更高版本，以及 npm，然后执行：
git clone https://github.com/uMisty/uPage.git
cd uPage
npm install
npm run editor浏览器会自动打开本地编辑器，默认地址是：
http://127.0.0.1:4173/__edit/实际地址以终端输出为准。
可以先从个人介绍改起，再替换项目、图片和链接。默认模板里的个人资料、文章和联系方式都是示例内容，正式发布前记得换成自己的。
修改后先保存，再构建和预览：
npm run build
npm run preview确认文字、图片、链接，以及手机上的排列都没问题，就可以发布生成的 dist 目录。后续修改也走同样的流程，保存本地内容之后，还需要重新构建和发布。快速开始中有完整步骤。
也聊两句 Vibe Coding
既然首页提到了最近在折腾 Vibe Coding，这里也交代一下开发方式。
uPage 有 AI 参与：需求、设计选择、代码实现和验收由我来做，ChatGPT / Codex 协助完成界面设计、辅助代码实现、测试和文档。这一点也写在了仓库说明里。
我觉得个人项目挺适合拿来探索这种协作方式。功能是自己想用的，页面也是自己每天可能会看的，哪里别扭、哪里还差一点，比较容易有明确的判断。至于最后做出来顺不顺手，还是得打开页面，自己用一遍。
项目采用 0BSD 协议开源。字体、图标等第三方内容则保留各自的许可，仓库中有对应说明。
如果你也想整理一个自己的主页，可以拿去试试，改成喜欢的样子。有问题或者建议，欢迎到 GitHub 聊聊。
主页里不一定要放多厉害的作品。一个解决了自己小麻烦的工具，一篇刚写完的文章，或者最近拍的几张照片，都值得有个地方放。
折腾好了，接下来就慢慢填内容啦。