大家好，我是 Java陈序员。

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

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

项目介绍

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/#/

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