大家好，我是 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
功能預覽
前台首頁
- 首頁
- 文章閲讀
- 文章評論
- 文章分類
- 時間線
後台管理
- 分析概覽
- 文章管理
- 草稿管理
- 圖片管理
- 站點管理
本地開發
- 環境準備
- 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/#/
我創建了一個開源項目交流羣，方便大家在羣裏交流、討論開源項目。
但是任何人在羣裏打任何廣告，都會被 T 掉。
如果你對這個交流羣感興趣或者在使用開源項目中遇到問題，可以通過如下方式進羣：
關注微信公眾號：【Java陳序員】，回覆【開源項目交流羣】進羣，或者通過公眾號下方的菜單添加個人微信，並備註【開源項目交流羣】，通過後拉你進羣。
大家的點贊、收藏和評論都是對作者的支持，如文章對你有幫助還請點贊轉發支持下，謝謝！
