前言

VanBlog 是一款简洁实用优雅的高性能个人博客系统。支持 HTTPS 证书全自动按需申请、黑暗模式、支持移动端自适应和评论，内置流量统计与图床，内嵌评论系统，配有完备的、支持黑暗模式、支持移动端、支持一键上传剪切板图片到图床、带有强大的编辑器的后台管理面板。

官方文档

特性

• • 快到极致的响应速度，Lighthouse 接近满分。
• • 独一份的按需全自动 HTTPS，甚至不用填域名。
• • 包括完整的前后台和服务端。
• • 前台和后台都为响应式设计，完美适配移动端和多尺寸设备。
• • 前台和后台都支持黑暗模式，并可自动切换。
• • 前台为静态网页（SSG），并支持秒级的增量渲染，每次改动无需重新构建全部页面。
• • 静态网页，CDN 友好。
• • 基于 React，项目工程化，二次开发友好。
• • SEO 和无障碍友好，支持自定义文章路径。
• • 版本号展示和更新提醒。
• • 内置强大的分析功能，可统计访客等数据。并配有精美看板。
• • 内嵌评论系统。
• • 强大的 Markdown 编辑器，支持图表和数学公式，一键插入 more 标记，一键剪切板及本地图片上传，支持自定义高亮块语法，支持 Emoji 表情选取。
• • TOC、草稿、代码复制、访客数、评论数、分类、标签、搜索、加密、友链、打赏、自定义导航栏。
• • 多个布局设置，可自定义页面细节。
• • 高度定制化，可添加自定义 CSS、HTML 和 JS 代码。
• • 支持自定义页面。
• • 可添加具有指定权限的协作者。
• • 内置图床，并支持各种 OSS 图床、github 图床（外部图床基于 picgo）等。
• • 支持上传图片自动添加水印，无论何种图床。
• • 极致轻量化，没有花里胡哨。页面秒切换、图片懒加载。
• • 脚本一键部署，多种部署方式，支持 ARM 平台。
• • 支持 GA、百度分析。
• • 简单易用的后台，支持数据的导出与导入。
• • 支持 RSS 订阅。
• • 完善的 API，完全利用本项目后台和服务端，自己写前端或适配其他页面生成器。
• • 有较完善的日志记录，后台可直接查看登录日志和 Caddy 日志。

部署

1. 新建一个存放 vanblog 文件的目录，如在 /home/docker/ 目录下新建，方便日后统一管理。

2. 1. 打开 Docker 依次点击 容器编排 -> 添加容器编排 ，将以下内容粘贴至 compose内容 中。

services:
  vanblog:
    # image: registry.cn-beijing.aliyuncs.com/mereith/van-blog:latest   # 阿里云镜像源
    image: mereith/van-blog:latest
    container_name: 'vanblog'
    restart: always
    environment:
      TZ: 'Asia/Shanghai'
      EMAIL: 'yanshhhh@foxmail.com'   # 邮箱地址，用于自动申请 https 证书
    volumes:
      - /home/docker/vanblog/data/static:/app/static   # 图床文件的存放地址，按需修改。
      - /home/docker/vanblog/log:/home/docker/log   # 日志文件
      - /home/docker/vanblog/caddy/config:/root/.config/caddy   # Caddy 配置存储
      - /home/docker/vanblog/caddy/data:/root/.local/share/caddy   # Caddy 证书存储
    ports:
      # 前面的是映射到宿主机的端口号，该端口的话改前面的。
      - 8880:80   # http端口
      - 4443:443   # https端口
      
  mongo:
    image: mongo:latest   # 某些机器不支持 avx 会报错，所以默认用 v4 版本。有的话用最新的。
    container_name: 'mongo'
    restart: always
    environment:
      TZ: 'Asia/Shanghai'
    volumes:
      - /home/docker/vanblog/data/mongo:/data/db

2. 2. 当然您也可以在刚才新建的 vanblog 文件夹内新建 docker-compose.yaml 文件，将以上内容粘贴至文件中，然后点击 来源 -> 文件 使用本地文件，效果是一样的。

2. 3. 根据实际情况修改 docker-compose.yaml 文件相关内容后，输入 编排名称 点击 确定 。

3. 依次点击 安全 -> 添加端口规则 开放 vanblog 相关端口；若部署在云服务器上，相关云服务器安全组也需开放相关端口。

初始化

1. 部署好 VanBlog 后，浏览器输入以下地址进行初始化， VanBlog 默认使用80端口。

http://[IP地址]:[端口号]/admin/init

例：

http://192.168.2.11:8880/admin/init

2. 初始化流程包含四部分（具体和参考官方文档）：

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

结语

这样我们就可以优雅的使用高性能个人博客系统 VanBlog 了，下期我将演示如何部署和使用反代神器 Nginx Proxy Manager ，有什么问题欢迎评论区留言!