乐趣区

关于typescript:因为选择艰难症自己写了一套开源博客系统

jiezi

我的项目主页: https://vanblog.mereith.com

开源地址: https://github.com/mereithhh/van-blog

Demo 站: https://blog-demo.mereith.com

前因

我大二那年，第一次接触到了集体博客这个东东。看着他人炫酷的集体网站很艳羡，于是第一次买了一台云服务器，在网上到处搜教程，用 hexo 和 next 主题部署了我的第一版博客。

那时候抱着微小的激情，我折腾了背景，折腾了 live2d，折腾了鼠标特效，等等。

但用了一阵子感觉有些很不不便。因为 hexo 这类的动态网站生成器自身是没有后盾的，所以我必须用本人的形式写 markdown 文件、敲命令行、公布到网上（那时候还不会搞 CI/CD）。

前面我陆续尝试了其余带后盾的博客零碎，比方 typecho、wordpress，后者给我的感觉有些臃肿，前者感觉挺依赖主题的，很多也没有满足我的审美，有些特效加多了还挺卡，而且自带的编辑器和图床也没有很好用。

毕业的时候我用 react 写了一版带前后台的博客，SSR 渲染的博客，然而因为过后没有一个对立的布局，小问题一直，也不反对暗色模式，也没有内置图床，加载速度也并没有很快。

工作后空闲工夫，我又用 gastby 重构了一版博客，加载速度快了很多，但实质上 gastby 也是个动态页面生成器，而且每次发版都要全量构建。

结果

辞职后在家有工夫了，我又想折腾一下博客，我的外围要求大略是：

  1. 最好是动态页面（SSG），不便 SEO 和 CDN。
  2. 要带一个不便的后盾。
  3. 要内置图床，反对剪切板上传图片，反对不同的图床。
  4. 前后台都要反对挪动端，都要反对暗色模式且能主动切换。
  5. SSG 的话心愿不要每次发版都全量构建。
  6. 不要花里胡哨的特效，首屏加载肯定要快。
  7. 能够 docker 一键部署。
  8. 反对访客统计和评论。

于是我调研了一番，发现现有的没有特地符合要求的，于是罗唆本人写了一个，具备以下的特点：

  • [x] 包含残缺的前后台和服务端。
  • [x] 前台和后盾都为响应式设计，完满适配挪动端和多尺寸设施。
  • [x] 前台和后盾都反对光明模式，并可主动切换。
  • [x] 前台为动态网页（SSG），并反对秒级的增量渲染，每次改变无需从新构建全副页面。
  • [x] 动态网页，CDN 敌对。
  • [x] 基于 React，我的项目工程化，二次开发敌对。
  • [x] SEO 和无障碍敌对。
  • [x] 版本号展现和更新揭示。
  • [x] 内置弱小的剖析性能，可统计访客等数据。并配有精美看板。
  • [x] 弱小的 markdown 编辑器，一键插入 more 标记，一键剪切板及本地图片上传，
  • [x] TOC、草稿、代码复制、访客数、评论数、分类、标签、搜寻、加密、友链、打赏、自定义导航栏。
  • [x] 多个布局设置，可自定义页面细节。
  • [x] 内置图床，并反对各种 OSS 图床、github 图床（内部图床基于 picgo）等。
  • [x] 极致轻量化，没有花里胡哨。页面秒切换、图片懒加载。
  • [x] docker 一键部署
  • [x] 反对 GA、百度剖析
  • [x] 简略易用的后盾，反对数据的导出与导入。

我把它命名为 VanBlog，有趣味的话能够试一下哦。

我的项目主页:https://vanblog.mereith.com

开源地址:https://github.com/mereithhh/van-blog

Demo 站: https://blog-demo.mereith.com

部署

能够用 docker-compose 一键部署，新建 docker-compose.yml 文件：

version: "3"

services:
  vanblog:
    # 默认国内原的
    image: registry.cn-beijing.aliyuncs.com/mereith/van-blog:latest
    # image: mereith/van-blog:latest
    restart: always
    environment:
      TZ: "Asia/Shanghai"
      # 图片资源容许的域名，英文逗号分隔
      VAN_BLOG_ALLOW_DOMAINS: "pic.mereith.com"
      # CDN URL，蕴含协定，部署到 cdn 的时候用。VAN_BLOG_CDN_URL: "https://www.mereith.com"
      # mongodb 的地址
      VAN_BLOG_DATABASE_URL: "mongodb://vanBlog:vanBlog@mongo:27017/vanBlog?authSource=admin"
      # jwt 密钥，随机字符串即可
      VAN_BLOG_JWT_SECRET: "AnyString"
    volumes:
      # 图床文件的寄存地址，按需批改。- ${PWD}/data/static:/app/static
    ports:
      - 80:80
  mongo:
    image: mongo
    restart: always
    environment:
      TZ: "Asia/Shanghai"
      # mongoDB 初始化用户名
      MONGO_INITDB_ROOT_USERNAME: vanBlog
      # mongoDB 初始化明码
      MONGO_INITDB_ROOT_PASSWORD: vanBlog
    volumes:
      # mongoDB 数据寄存地址，按需批改。- ${PWD}/data/mongo:/data/db

按正文阐明批改 docker-compose.yml 的配置后：

docker-compose up -d

浏览器关上 http://<your-ip>/admin/init，并依照提醒初始化即可。具体能够参考 我的项目文档

预览图

退出移动版