本地写 Markdown、rclone 自动同步的轻巧路子

被 WordPress 笨重的主题模板折磨了大半年后,到了 2026 年 1 月初,我决定干脆另起炉灶,不用任何现成的 CMS 建站系统,自己动手写一套最纯粹的展示站点群。

当时的想法特别简单直接:既然我平时写文档、记历史全都用 Markdown,那为什么不让网站直接读 .md 文件呢?于是我在 1Panel 的 Node.js 环境下,用 Express + EJS 模板 + Marked 解析器 搭了一套极简的渲染骨架。网站根目录下放一个 /context/*.md 文件夹,我在自己电脑上改完 Markdown 文档,靠后台挂着的 rclone 自动跟云服务器双向同步,网页一刷新就立刻生效,连数据库都省了。

五个站点,五种放飞自我的视觉实验

因为没有了现成模板的束缚,我在写这第一代散装站点(v1)的时候,把之前攒了一肚子的奇思妙想全塞进了前端界面里,五个站点做成了五种截然不同的风格:

  1. 总站 v1(宇宙星系):直接用 Three.js 在网页背景里搓了一个 3D 宇宙星系,各个子站就是漂浮在太空里的马卡龙配色星球;没过几天更到 v1.1 时,我又给它加上了环绕飞行的小行星带和立体土星环。
  2. MC 站 v1(Win11 云母风):模仿 Windows 11 的 Mica(云母)材质设计,把服务器介绍和入服指南做成了一张张带有细腻半透明噪点和高光边框的拟物卡片。
  3. 变迁展览馆 Hist v1(Vista Aero 资源管理器):这是当时最花哨的一个站。我直接把网页做成了一个 Windows Vista / Win7 时代的天蓝色 Aero 半透明毛玻璃资源管理器窗口;更到 v1.1 时,不仅加上了按 # H1 标题自动分页,还写了一个极其夸张的物理特效——鼠标在屏幕上随便点一下,就会释放一圈全屏扩散的冲击波,把满屏幕的文字震得跟着上下抖动!
  4. Wiki 站 v1:做成了干净的文档阅读器,右上角专门放了一个材质开关,支持在“磨砂玻璃”和“液态玻璃”两种视觉质感之间实时切换。
  5. 云推广站 v1:顶部做成了类似苹果灵动岛的弹性胶囊页眉,鼠标滑过屏幕时还会带起一串像水波一样的流体拖尾。

那几天虽然天天熬夜调 CSS 和 Canvas 动画,但看着这五个风格迥异的网站一个个跑起来,是我第一次真正体会到“完全掌控每一行前端代码”的快乐。