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

大家好，我是 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 文件

1. version: '3'
3. services:
4.   vanblog:
5.     # 阿里云镜像源
6.     # image: registry.cn-beijing.aliyuncs.com/mereith/van-blog:latest
7.     image: mereith/van-blog:latest
8.     restart: always
9.     environment:
10.       TZ: 'Asia/Shanghai'
11.       # 邮箱地址，用于自动申请 https 证书
12.       EMAIL: 'someone@mereith.com'
13.     volumes:
14.       # 图床文件的存放地址，按需修改。
15.       - ${PWD}/data/static:/app/static
16.       # 日志文件
17.       - ${PWD}/log:/var/log
18.       # Caddy 配置存储
19.       - ${PWD}/caddy/config:/root/.config/caddy
20.       # Caddy 证书存储
21.       - ${PWD}/caddy/data:/root/.local/share/caddy
22.     ports:
23.       # 前面的是映射到宿主机的端口号，改端口的话改前面的。
24.       - 80:80
25.       - 443:443
26.   mongo:
27.     # 某些机器不支持 avx 会报错，所以默认用 v4 版本。有的话用最新的。
28.     image: mongo:4.4.16
29.     restart: always
30.     environment:
31.       TZ: 'Asia/Shanghai'
32.     volumes:
33.       - ${PWD}/data/mongo:/data/db

复制代码

2、启动项目

1. docker-compose up -d

复制代码

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

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

复制代码

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

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

复制代码

功能预览

前台首页

• 首页
  

• 文章阅读
  

• 文章评论
  

• 文章分类
  

• 时间线
  

后台管理

• 分析概览
  

• 文章管理
  

• 草稿管理
  

• 图片管理
  

• 站点管理
  

本地开发

• 环境准备
  

• Node.js 18+
  
• pnpm v7+
  
• MongoDB
  

• 克隆项目并安装依赖
  

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

复制代码

• 添加 server 配置文件
  

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

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

复制代码

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

• 一键启动服务
  

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

复制代码

• 单独运行服务
  

1、必须先启动 server

1. # 端口 3000
2. pnpm dev:server

复制代码

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

1. # 启动前台 端口 3001
2. pnpm dev:website
3. # 启动后台 端口 3002
4. pnpm dev:admin

复制代码

• 浏览器访问
  

1. ## 前台
2. http://localhost:3001
4. ## 后台，访问成功后，按照指引完成初始化
5. http://localhost:3002

复制代码

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

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

复制代码

最后

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

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

复制代码

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

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

复制代码

我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目。
但是任何人在群里打任何广告，都会被 T 掉。
如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群：
关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群。

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！