绝了！一款简洁优雅的高性能个人博客系统！

大家好，我是 Java陈序员。

作为一名程序员，你是否会想搭建个人技术博客，却被各种技术配置搞得头大？用静态博客系统要手动部署，用动态系统又担心速度太慢，找图床、配评论、做统计还要东拼西凑各种工具？

今天，给大家介绍一款简洁优雅的高性能个人博客系统，开箱即用！

关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

VanBlog —— 一款简洁、实用、优雅的个人博客系统，内置了流量统计和图床，集成了评论系统，并支持全自动按需申请 HTTPS 证书、黑暗模式、移动端自适应等。

此外，VanBlog 还具有无限的可扩展性，提供完备的后台管理面板，支持黑暗模式、移动端、一键上传剪贴板图片到图床，并带有强大的编辑器。

功能特色：

优雅：前后台都响应式、都支持暗色模式且能自动切换
功能强大：支持草稿、分类、标签、搜索、TOC、内嵌评论系统、图标和数学公式
定制化：可添加自定义 HTML、CSS、JS，强大的流水线功能，后续将支持主题与插件
内置图床：本地图床、OSS 图床、Github 图床都支持，可一键上传剪切板图片，自动添加水印，自动压缩图片
高性能：快到极致的静态页面，秒响应的增量渲染，Lighthouse 近满分
SEO 友好：Lighthouse SEO 近满分，支持百度分析和 GA，支持自定义文章路径
可量化：内置强大分析系统与精美看板，同时支持百度和GA，同时具有完善的日志
现代后台：功能齐全的后台，精心优化的编辑器，极致的写作体验
安全第一：内置了可以自定义权限的协作者模式，未来将支持更多登录安全策略
易于部署：Docker 一键部署，全自动 HTTPS 证书自动申请续期，支持 ARM

快速上手

VanBlog 支持 Docker 部署，可使用 Dcoker Compose 一键部署。

1、创建 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

2、启动项目

docker-compose up -d

3、浏览器访问，并按照指引完成初始化

http://<你的域名>/admin/init

具体的站点配置，可参考：

https://vanblog.mereith.com/reference/config.html

功能预览

前台首页

首页

文章阅读

文章评论

文章分类

时间线

后台管理

分析概览

文章管理

草稿管理

图片管理

站点管理

本地开发

环境准备

Node.js 18+
pnpm v7+
MongoDB

克隆项目并安装依赖

git clone https://github.com/Mereithhh/vanblog.git
cd vanblog
pnpm i

添加 server 配置文件

在 packages/server 下，创建 config.yaml 文件，内容如下：

database:
  # 数据库连接
  url: mongodb://localhost:27017/vanBlog?authSource=admin
static:
  # 图床等静态文件保存的位置
  path: /var/vanblog-dev/static
# 是否开启演示站模式，会限制很多权限
demo: 'false'
# waline 用的表名，会自动创建
waline:
  db: waline
# 日志位置
log: /var/vanblog-dev/logs

数据库连接需要改成对应的连接地址以及用户名密码。

一键启动服务

# 开发全部（前台、后台、server）
pnpm dev

单独运行服务

1、必须先启动 server

# 端口 3000
pnpm dev:server

2、然后再启动前台或者后台

# 启动前台 端口 3001
pnpm dev:website
# 启动后台 端口 3002
pnpm dev:admin

浏览器访问

## 前台
http://localhost:3001

## 后台，访问成功后，按照指引完成初始化
http://localhost:3002

可以说，VanBlog 以其高性能、丰富的功能、良好的用户体验和简单的部署方式，为个人博客搭建提供了一个优秀的解决方案。快去试试吧~

项目地址：https://github.com/Mereithhh/vanblog

最后

推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者访问网站，进行在线浏览：

https://chencoding.top:8090/#/

我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目。

但是任何人在群里打任何广告，都会被 T 掉。

如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群：

关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群。

大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！

posted @ 2025-08-04 09:21 Java陈序员阅读(166) 评论(0) 收藏举报

刷新页面返回顶部