目录

撸了一个博客在线编辑器

目录

有了在线编辑器真是舒服,写Hugo的博文时,不用再手动新建md文件,git push,ssh到服务器渲染了👍

起因

这次的新版博客站是基于Hugo搭建的,Hugo的博客站分为两部分:

  • 博客站点目录,用于存放所有文章,页面排版布局等。我当前使用Gitee的代码仓来托管。
  • Hugo渲染程序,是一个二进制程序,简简单单,把站点的文件编译渲染,生成全HTML的静态站点用于发布。

这种架构方式也正是我喜欢的。前后分离得很好,再细看你还可以看到模板主题,以及各个页面的自定义,都是可以放在站点目录里自定义,完全不需要修改Hugo源代码,即使用了别人的主题也不需要修改别人主题的源代码。

在前期编写博文的时候,我是电脑本地用typora,手动创建md文件,然后拖放图片,然后git add,git commit,git push。然后ssh到个人云服务器执行一个脚本重新生成静态站点。这一套流程下来,第一次还好,第二次就感觉繁琐,第三次实在是被折磨到没有写文章的动力了。

在我的博客初版,还是个Spring架构的时候,我是有开发了在线编辑器的,但是因为Spring架构和Hugo无法配合,从而没有迁移过来。

爽一爽

思考考了一下子,最终就像搭积木一样,简单搭建了一个在线编辑器,主要利用了Git的特性,这也是Hugo带来的好处。

编辑器已经顺手开源,后端约250行Python代码,前端约200行代码,可以说是极其精简轻量了。如果有使用Hugo的朋友,不妨可以拿来改一改,说不定就很轻松适配你的博客站点了。

项目开源地址

Gitee

GitHub

/posts/20220403011131/5e38a8059d78456e8bf0595c41df4f99.png

编辑器支持在线预览变更点,实际上就是git status的结果,美化了一下哈哈哈。

/posts/20220403011131/4c6638f9bfce4578bf50f929a96533c3.png

当点击提交变更后,会自动进行git commit,git push,然后调用自定义脚本重新生成站点,一步到位,马上就可以在hiyyq.cn博客主页上看到新文章了,爽死了。

也不用担心误改,这个编辑器对博客所有改动,在git上都有详细的变更记录,也可以随时回退。

不管是把文章是存在数据库,还是分布式文件系统,本地文件系统等等的地方,永远是比不上代码托管服务可靠的。而且文章的内容,最重要的还是修改跟踪,撤销等的功能,这也正好是Git最擅长的地方。

这就是静态博客前后分离的好处。真是爽死啦!!!^_^

/posts/20220403011131/ab3db88647814699ad79471352d89c34.png