免费开源！帮你3天做出「个人专属」的建站工具

一、全文速览图

往期干货：

👋 嗨，我是范米花儿，带着开发的新工具来啦～

本项目「前台展示 + 后台管理」 全部开源在 GitHub ，可自行下载部署

前台体验： https://studio.fanyunyun.fun/
后台体验： https://studio.fanyunyun.fun/admin
注：（使用上方后台链接登录，账号：demo@example.com / 密码：demo123（权限为只读，可浏览功能）

GitHub开源地址：  https://github.com/fan18660557495/fanstudio  

二、还是老样子，先说我为什么做？

1. 平台售卖体验太不稳定

我想吐槽某红书的虚拟商品售卖：类目改来改去、规则变来变去，就像打地鼠。不知道哪天就违规了、下架了，我又不想花太多时间去管理（很操心…），所以还是必须有一个自己的平台做备选。

2. 我需要“后台”，但不想折腾“建站系统”

个人站如果只是静态展示还好，但我想持续更新作品、文章、教程——不能靠代码改。 市面上的建站工具呢？要么需要从0开始手搓，要么要用模版改，同时因为功能很庞大，我需要按照他的规则去改。

我想要的是：最少的配置、我自己定义内容结构、带后台、好维护。

3. 前置“Paperwork”我已经走通了

因为之前做过小程序和插件，个体户/微信支付、服务器配置、域名这些“paper work”都踩过坑了，路通了。

所以还是干脆一步到位： 做一个前后台一体化的网站 ，完全按我自己的需求来。

三、网站都哪些模块？

1. 首页：全屏 Hero + 最新内容聚合入口（设计作品 / 开发作品 / 文章 / 视频教程）。
2. 设计作品：组件库及其他设计作品，可嵌入 Figma 预览；支持开源或标价售卖。
3. 开发作品：用来放AI Coding的产品（插件、小程序、网站等），可以前往或扫码体验。
4. 文章 / 笔记：文章类知识输出，支持封面、分类、富文本正文等。
5. 视频教程：AI编程、Figma教程等视频合集，点击跳转到 B 站/小红书等外链观看。
6. 关于我：个人介绍、工作经历、学习经历、技能等简历展示。
7. 作品售卖：设计作品可配置价格，支持PC微信扫码支付，支付后获取链接，同步发送邮件。
8. 网站设置：站点名、描述、导航文案、社交链接、关于页内容、主题配色等统一配置。
9. 分类与标签：一套分类/标签体系贯穿作品、文章、教程，方便筛选和统一管理。
10. 仪表盘：内容数量、订单与收入概览、趋势图，用来快速看整体状态。

四、各模块：前后台如何配置管理？

1. 首页展示

前台：

全屏 Hero 区域（问候语动画、品牌名动效、头像、社交链接）。下面是四个区块：最新设计作品、开发作品、文章、视频教程；每块都可以点「查看全部」进入列表页。

后台：

首页文案： 网站设置 → 导航与页面头像、品牌名等： 网站设置 → 导航与页面、关于我/头像

2. 设计作品

前台：

瀑布流卡片展示，支持按分类、标签筛选。点进详情页可看多图、描述；如果填了 Figma 链接，会自动嵌入在线预览。

支持标价购买，也支持设为免费/开源直接获取。

后台：

在 设计作品 里增删改：封面、多张展示图、价格（或免费/开源）、Figma 链接、交付/下载链接、分类、标签。

3. 开发作品

前台：

同样是瀑布流 + 详情页，适合放自己的产品、插件、小工具 等“开发类作品”。

后台：

在 开发作品 里独立管理，字段与设计作品类似（标题、描述、链接、分类、标签等）。

4. 文章管理

前台：

瀑布流展示文章列表，支持按分类筛选。详情页是富文本正文 + 封面图 + 发布时间 + 作者信息。

后台：

在 文章管理 里用富文本编辑器写文章（图片、标题、列表、代码块等），支持草稿/发布；也支持搜索、筛选、排序。

5. 视频教程

前台：

瀑布流展示教程列表，点击后跳转到 B 站 / 小红书 等外链播放。

后台：

在 视频教程管理 里维护每条教程的链接、缩略图和排序。

6. 关于我

前台：

关于页左侧是个人信息卡片（头像、品牌名、姓名、职位）；右侧是个人介绍、工作经历、学习经历、技能标签。

后台：

都在 网站设置 → 关于我/头像 里配置：头像、品牌名、姓名、职位，以及关于页各模块内容。

7. 作品售卖

前台：

在设计作品详情页显示价格；用户填邮箱后PC扫码微信支付；支付成功获取链接，并自动发邮件

免费/开源作品可以直接获取。

后台

价格/免费/开源：在  设计作品  里设置

订单查看：在  订单管理  里看全量订单，按状态筛选（待支付/已支付/已过期）

数据概览：仪表盘里有订单数、收入统计、趋势图

8. 网站设置

前台：

站点名称会出现在导航 Logo、浏览器标题、面包屑首页、页脚等；页脚含版权（年份自动更新）、版本号、社交链接；微信/公众号支持悬停显示二维码。

主题支持：5 种灰度基底 + 9 种强调色，全站生效，并支持亮/暗切换。

后台：

在 网站设置 的 4 个 Tab 里统一配置：

1. 基本设置：站点名、描述、版权、版本号、社交链接
2. 导航与页面：导航名称、Hero 文案、各页页头介绍、关于页区块标题
3. 关于我/头像：个人信息与关于页内容
4. 外观主题：基底灰度、强调色（可实时预览）

9. 后台独有

仪表盘：内容数量、订单总数、本月收入及环比；最近 5 笔订单 + 近 30 天收入趋势

分类与标签：统一管理文章、作品、教程的分类与标签

五、技术上我怎么做的？

1. 数据怎么存：作品/文章/教程/网站设置/订单这些内容都存到 MySQL 数据库。
2. 图片怎么存：图片目前是跟网站一起本地存到服务器（不走 OSS ），成本可控。
3. 前后台怎么做：用 Next.js + React 做的前台展示 + 后台管理一体化。
4. 样式怎么写：整体用 Tailwind CSS 管布局和样式，UI 组件基于 shadcn/ui，前后台统一。
5. 文章怎么写：后台富文本编辑器用开源的 BlockNote，支持图片/标题/列表/代码块。
6. 动效/图表：页面动效用 Framer Motion，后台统计图用 Recharts。

六、一些体验上的取舍

大文件/视频如果走站内承载，通常要上 OSS + CDN，而这类成本是按存储和流量计费的 。对个人项目来说，成本有点高。 所以还是决定用便宜的做法： 网站负责“展示与管理”，重资源交付交给外部链接 。

1. 源文件交付不在站内下载

理想状态 ：用户付完款，站内点一下就能直接下载 PSD / Figma / Sketch 等源文件。

现实做法 ：因为下载流量很大，所以只在作品里填「交付链接（Figma、网盘、飞书等）」，用户支付成功后获取链接并同步邮箱

2. 视频不在站内播放

理想状态 ：视频在站内直接播放，体验统一；以后还能在同页扩展文稿、章节时间轴等。

现实做法 ：因为存储 + 流量 + 转码等成本更高，所以视频教程目前只存外链，前台点击直接跳转播放。

最后，关于开源与使用门槛

这个项目是 开源 的，小伙伴们可以直接拿去部署、二开、改成自己的版本。

但我也得提前说清楚： 自己搭起来，还是会有一点门槛 ——需要装 Node.js、MySQL，建数据库、配环境变量这些基础步骤。

所以我在仓库里尽量把「从零部署」写得很细：包括每一步要做什么、常见报错怎么排查；也补了一个给设计师看的版本（比如可以怎么用 AI 帮你生成/检查配置），尽量让第一次部署的人少踩坑。

另外， 微信支付 这块是“有资质才可用”：需要商户申请、备案等流程走通之后才能真正跑起来。

如果你暂时没走完流程也没关系—— 支付不影响其他模块使用 ：作品展示、文章、教程、关于页、主题配置这些都能正常用， 可以用来搭自己的官网或作品集展示 ；Native支付相关代码我也完整开源了，方便你后续资质下来后按文档直接打通，或者当参考实现。

拜拜，今天就到这里啦，提前祝大家新年快乐～