VanBlog – 简洁实用优雅的高性能个人博客系统

VanBlog 是一款基于 React 语言开发的个人博客系统，代码完全开源，系统简洁实用、界面优雅、高性能。附带强大的分析功能，可统计访客等数据，并配有精美的看板。支持一键上传剪切板图片到图床。前台和后台均为响应式设计，完美适配移动端和多尺寸设备。

系统预览

演示网站：https://blog-demo.mereith.com/admin

账号和密码均为 demo 

特点

• 优雅

前后台都响应式、都支持暗色模式且能自动切换

• 功能强大

草稿、分类、标签、搜索、TOC、内嵌评论系统、图标和数学公式支持

• 定制化

可添加自定义 HTML、CSS、JS，强大的流水线功能，后续将支持主题与插件

• 内置图床

本地图床，OSS 图床，Github 图床都支持，可一键上传剪切板图片，自动添加水印，自动压缩图片

• 高性能

快到极致的静态页面，秒响应的增量渲染，Lighthouse 近满分

• SEO 友好

Lighthouse SEO 近满分，支持百度分析和 GA，支持自定义文章路径

• 可量化

内置强大分析系统与精美看板，同时支持百度和GA，同时具有完善的日志

• 现代后台

功能齐全的后台，精心优化的编辑器，极致的写作体验

• 安全第一

内置了可以自定义权限的协作者模式，未来将支持更多登录安全策略

配置要求

VanBlog 不需要很高的配置，上面的演示网站不算数据库，资源的占用情况如图：

不到 400M 的内存（有一部分还是静态页面缓存），启动时大概峰值占用处理器一个核心的 30%，其余时间基本不占用什么处理器资源。但比较小的带宽可能会让页面加载变慢（第一次慢，后面的话有缓存加速就会快一些），如果带宽比较小的话可以尝试设置一下 CDN。

部署方式

• 脚本一键部署

curl -L https://vanblog.mereith.com/vanblog.sh -o vanblog.sh && chmod +x vanblog.sh && ./vanblog.sh

• docker部署

需要安装 docker 和 docker-compose，可以通过以下命令一键安装：

curl -sSL https://get.daocloud.io/docker | sh
systemctl enable --now docker

新建一个 vanblog 的目录，在这个目录下新建 docker-compose.yaml文件，内容如下：

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"
      # 邮箱地址，用于自动申请 https 证书
      EMAIL: "someone@mereith.com"
    volumes:
      # 图床文件的存放地址，按需修改。
      - ${PWD}/data/static:/app/static
      # 日志文件
      - ${PWD}/log:/var/log
      # Caddy 配置存储
      - ${PWD}/caddy/config:/root/.config/caddy
      # Caddy 证书存储
      - ${PWD}/caddy/data:/root/.local/share/caddy
    ports:
      # 前面的是映射到宿主机的端口号，改端口的话改前面的。
      - 80:80
      - 443:443
  mongo:
    # 某些机器不支持 avx 会报错，所以默认用 v4 版本。有的话用最新的。
    image: mongo:4.4.16
    restart: always
    environment:
      TZ: "Asia/Shanghai"
    volumes:
      - ${PWD}/data/mongo:/data/db

docker 启动

按注释说明修改 docker-compose.yaml 的配置后运行如下命令：

docker-compose up -d

浏览器访问

在浏览器打开：http://<你的域名>/admin/init

我在本地运行，所以地址为： http://localhost/admin/init 

按照指引完成初始化，流程主要包含四部分：

• 配置用户: 必填
• 基本配置: 网站运行的必要配置
• 高级配置: 可选，用于开启一些高级功能
• 布局配置: 可选，配置前台布局

使用体验

• 首先需要建立文章分类

【站点管理】-【数据管理】-【新建分类】-输入分类名称

• 新建文章

【文章管理】-【新建文章】-输入文章的标题、作者等信息

• 编辑文章

完全支持 Markdown 语法

文章保存后支持导出md格式，支持文章加密

其他的功能如评论、图床、分类/标签管理、站点设置、分析看板、流水线、文章搜索、社交媒体配置、访客统计等大家自行尝试~

- - - - - 本页内容已结束，喜欢请分享 - - - - -

感谢您的来访，获取更多精彩文章请收藏本站。