摸鱼一个半月，做了个不好用的静态站点生成网站。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 837 天前的主题，其中的信息可能已经有所发展或是发生改变。

前言

先说一下，分享出来不是为了推广或者什么（还没做完），是单纯的遇到瓶颈了，想看看万能的 v 友有什么看法~

不好意思，项目也没有开源，本来是打算当一个产品去做的。不过后面如果干不下去了就开源了吧（还有一个原因是写得很屎，不好意思开源）。

链接在最下面 ~

项目截图

编辑页面

Dashboard

为啥做这个东西？

前不久瞎逛，看到有个接外包的网站写个静态页面收费五十一百的。就在想如果做个静态页面生成的网站应该还是有点市场的，并且也可以做成简历生成的。最主要的是自己想搞点东西出来当副业。

后来也看了市场上众多竞品，基本上都不提供下载功能（都得在他们网站发布访问），要么就是像 Ant Design Landing Page 那种面向开发者的下载下来是源码。

然后就想做一个能直接下载 html 的网站，也就做出来这么个东西了。

实现

底层的实现逻辑很简单，说白了就是配置一个 css 的对象，然后生成页面的时候再拿这组配置去渲染。

一开始实现的时候是直接用 vue ssr 的 api 直接生成 html 文件的，后面迭代多了一些事件和脚本要处理，还是直接依赖 vue 了（用的 vue 官方贴的 cdn ）

页面结构上其实就是由多个 Section （固定宽度 100%）堆叠组成，然后再 Section 里面配置组件。

目前基础组件有容器组件（最主要的组件，使用 Flex 布局），文本，图片，媒体等等。

功能和吐槽

先说几个比较值得说的功能特点吧（自认为的）

免登录直接下载 html 文件 -- 改完直接点击右上角的 Download 就能下载可以直接打开的 index.html 文件，如果没有项目保存需求的话，不需要登录也可以的。（也有 github.io 、vercel 的配置指引）
组件配置联动 -- 复制组件的时候，默认两个组件是关联在一起的，也就是配置是公用一套的，也支持单组配置取消关联然后独立设置。
项目 /模板 /素材复用 -- Template/Section/Component 都能直接保存，然后复用。
多页 -- 多个页面其实就是多个 html ，Download 会直接下载全部页面的 zip ，跳转可以用 ./xxxx.html 跳转
支持双端配置 -- 一组配置支持双端共用和分开配置两种，一般都是先写好 pc 的，然后切移动端再做兼容处理，如果不是复杂的结果处理起来还是挺方便的（其实还支持 rem 和媒体查询，但是感觉不好用）。

接下来是吐槽

难用 -- 很难配，即使上手了会使用快捷键，配起来也很繁琐。而且因为层级遮挡等问题，有时候要选容器组件，得通过 Layers 树或者切换父子组件的方式去选中。
功能有限 -- 因为没法有灵活的 js 去控制，样式配置也只有一套。如果要给组件加个 Active 之类的状态和对应样式，就会很难做。（有想过要不要加 plugin 的方式去支持）
上手困难 -- 因为项目做完还没好好做引导，上手基本上是闷逼的。如果是开发者摸索摸索可能还能懂个一二三，如果是非开发者那基本用不了。
生成的页面不可维护 -- 生成的页面元素都是用内联样式，生成的 index.html 基本上不可读。如果要再加点东西会很困难。

想法

说到底，还是对自己项目的定位不清晰。一开始想做面对非开发者的，但是后面做着做着，发现非开发者根本用不了这套东西。但是开发者又不需要这种难用得要死的东西。

有点迷茫要做成什么样，因为确实不好用，我自己配模板都懒得配。

我个人想法是干脆这套配置就不直接开放出去了（当做一个额外功能），配置的工作留给自己用😭。然后再单独做一套工作流，例如可以直接配置「文本+图片」之类的形式，然后输出页面或者简历。

最后再贴体验链接

因为项目还没有做指引，直接上手可能会闷逼。估计还有些 bug ，目前还在开发中。

https://p-easy.net/site/edit

对了，无视那些付费计划，目前并没有计划。只是模板需要，和不想直接把自定义子域名的功能开放出去（维护服务器也要钱钱的( Ĭ ^ Ĭ )），所以先做了一套会员系统。

用户系统是直接用的 Logto ，登录注册流程都挺简单的。也可以直接使用测试账号 test ，密码 123456 体验。

组件

页面

生成

配置

10 条回复 • 2024-06-11 01:05:52 +08:00

wonderfulcxm

2022-09-09 12:24:47 +08:00

同类产品我用过一个 bootstrap studio ，很傻瓜化，挺好用的啊，的是 bootstrap 的框架，还能做一些略复杂的页面，比如演示特斯拉官网和苹果网站的效果。

nightcatsama

2022-09-09 12:42:48 +08:00

@wonderfulcxm 感谢回复~，看了下功能确实很强大，和我这种小项目完全不是一个 Level 的。 😂

SchneeHertz

2022-09-09 14:45:02 +08:00

半个月的做成这样的完成度很高了，UI 很不错，OP 很强
不过类似的应用我感觉都有点高不成低不就，bootstrap studio 也是，没有达到非开发者能够使用的友好度
没有接触过网页设计的人，一般是不能够想象出成品网页的样子的，或许不应该着重于页面样式的调整，而应着重于让用户通过问答式的引导，了解用户需求后直接拼接出完整的模板，再提供方便填充内容的手段这样的方向