V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
nightcatsama
V2EX  ›  分享创造

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

  •  
  •   nightcatsama · 2022-09-09 11:55:29 +08:00 · 2269 次点击
    这是一个创建于 791 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言


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

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

    链接在最下面 ~

    项目截图


    编辑页面

    image

    Dashboard

    image

    为啥做这个东西?


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

    后来也看了市场上众多竞品,基本上都不提供下载功能(都得在他们网站发布访问),要么就是像 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
        1
    wonderfulcxm  
       2022-09-09 12:24:47 +08:00
    同类产品我用过一个 bootstrap studio ,很傻瓜化,挺好用的啊,的是 bootstrap 的框架,还能做一些略复杂的页面,比如演示特斯拉官网和苹果网站的效果。
    nightcatsama
        2
    nightcatsama  
    OP
       2022-09-09 12:42:48 +08:00
    @wonderfulcxm 感谢回复~,看了下功能确实很强大,和我这种小项目完全不是一个 Level 的。 😂
    SchneeHertz
        3
    SchneeHertz  
       2022-09-09 14:45:02 +08:00
    半个月的做成这样的完成度很高了,UI 很不错,OP 很强
    不过类似的应用我感觉都有点高不成低不就,bootstrap studio 也是,没有达到非开发者能够使用的友好度
    没有接触过网页设计的人,一般是不能够想象出成品网页的样子的,或许不应该着重于页面样式的调整,而应着重于让用户通过问答式的引导,了解用户需求后直接拼接出完整的模板,再提供方便填充内容的手段这样的方向
    subjadeites
        4
    subjadeites  
       2022-09-09 14:53:55 +08:00 via Android
    又到了给 frontpage 招魂的时候了(
    nightcatsama
        5
    nightcatsama  
    OP
       2022-09-09 15:08:37 +08:00
    @SchneeHertz 感谢体验,我也有一样的想法,这东西感觉自己用用还行,让用户上手确实难。果然后面还是得看看能不能再封装一层更易使用的流程。
    TMaize
        6
    TMaize  
       2022-09-09 15:23:49 +08:00
    有个差不多的 [landing.ant.design]( https://landing.ant.design/edit/index-cn),可以快速生成首页
    Winrey
        7
    Winrey  
       2022-09-09 23:35:06 +08:00
    技术上真的很棒!实现到这个程度不容易~
    但是从需求上,有一种 Dreamweaver 网页版的感觉……?
    nightcatsama
        8
    nightcatsama  
    OP
       2022-09-10 01:09:35 +08:00 via iPhone
    @Winrey 哈哈哈,你不说我都完全忘了这个东西了,愣了一下才回忆起来,感觉是很有年代感的东西了。不过有一说一,确实挺像。
    FourAndHalf
        9
    FourAndHalf  
       2022-09-11 04:22:06 +08:00
    不错,如果有 github star 一波
    suanranran
        10
    suanranran  
       151 天前
    你好 这个项目的 git 地址还在吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   970 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:57 · PVG 03:57 · LAX 11:57 · JFK 14:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.