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

功能預覽

前台首頁

• 首頁

• 文章閲讀

• 文章評論

• 文章分類

• 時間線

後台管理

• 分析概覽

• 文章管理

• 草稿管理

• 圖片管理

• 站點管理

本地開發

• 環境準備

1. Node.js 18+
2. pnpm v7+
3. 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陳序員】，回覆【開源項目交流羣】進羣，或者通過公眾號下方的菜單添加個人微信，並備註【開源項目交流羣】，通過後拉你進羣。

大家的點贊、收藏和評論都是對作者的支持，如文章對你有幫助還請點贊轉發支持下，謝謝！