VanBlog个人博客系统极简部署教程 React静态博客无限扩展帕斯内网穿透远程管理

项目介绍

VanBlog 是一款简洁、实用、优雅的个人博客系统，支持全自动按需申请HTTPS证书、黑暗模式、移动端自适应和评论功能。它内置了流量统计和图床，并集成了评论系统。此外，VanBlog还具有无限的可扩展性，提供完备的后台管理面板，支持黑暗模式、移动端、一键上传剪贴板图片到图床，并带有强大的编辑器。

VanBlog 基于 React 构建，前台为静态网页（SSG），支持秒级的增量渲染，响应速度极快，Lighthouse 接近满分。它支持强大的 Markdown 编辑器，包含图表和数学公式支持，TOC、草稿、代码复制、访客数、评论数、分类、标签、搜索、加密、友链、打赏等功能一应俱全。项目还内置了多种图床支持，包括各种 OSS 图床、GitHub 图床等，并支持图片自动添加水印和压缩功能。

界面美观现代，支持高度定制化，可添加自定义 CSS、HTML 和 JS 代码，还支持自定义页面和协作者权限管理。项目对服务器配置要求不高，资源占用极低，非常适合个人博客使用。

项目地址：点我跳转

部署安装

如需在外也打开项目需要配置内网穿透使用，点击前往帕斯内网穿透，先注册好账号备用。

VanBlog 提供了多种部署方式，最简单的是使用 docker-compose 进行部署。官方推荐使用容器化部署，这样可以避免因系统差异导致的问题，学习成本低，迁移和升级都非常方便。

复制下列的配置文件

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