首页 › 前端开发综合论坛 › 绝了！一款简洁优雅的高性能个人博客系统！

苑光建 發表於 2025-8-4 09:21:00

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

<p>大家好，我是 <code>Java陈序员</code>。</p>
<p>作为一名程序员，你是否会想搭建个人技术博客，却被各种技术配置搞得头大？用静态博客系统要手动部署，用动态系统又担心速度太慢，找图床、配评论、做统计还要东拼西凑各种工具？</p>
<p>今天，给大家介绍一款简洁优雅的高性能个人博客系统，开箱即用！</p>
<blockquote>
<p>关注微信公众号：【Java陈序员】，获取<strong>开源项目分享、AI副业分享、超200本经典计算机电子书籍等。</strong></p>
</blockquote>
<h2 id="项目介绍">项目介绍</h2>
<p><code>VanBlog</code> —— 一款简洁、实用、优雅的个人博客系统，内置了流量统计和图床，集成了评论系统，并支持全自动按需申请 HTTPS 证书、黑暗模式、移动端自适应等。</p>
<p>此外，<code>VanBlog</code>还具有无限的可扩展性，提供完备的后台管理面板，支持黑暗模式、移动端、一键上传剪贴板图片到图床，并带有强大的编辑器。</p>
<p><strong>功能特色</strong>：</p>
<ul>
<li><strong>优雅</strong>：前后台都响应式、都支持暗色模式且能自动切换</li>
<li><strong>功能强大</strong>：支持草稿、分类、标签、搜索、TOC、内嵌评论系统、图标和数学公式</li>
<li><strong>定制化</strong>：可添加自定义 HTML、CSS、JS，强大的流水线功能，后续将支持主题与插件</li>
<li><strong>内置图床</strong>：本地图床、OSS 图床、Github 图床都支持，可一键上传剪切板图片，自动添加水印，自动压缩图片</li>
<li><strong>高性能</strong>：快到极致的静态页面，秒响应的增量渲染，Lighthouse 近满分</li>
<li><strong>SEO 友好</strong>：Lighthouse SEO 近满分，支持百度分析和 GA，支持自定义文章路径</li>
<li><strong>可量化</strong>：内置强大分析系统与精美看板，同时支持百度和GA，同时具有完善的日志</li>
<li><strong>现代后台</strong>：功能齐全的后台，精心优化的编辑器，极致的写作体验</li>
<li><strong>安全第一</strong>：内置了可以自定义权限的协作者模式，未来将支持更多登录安全策略</li>
<li><strong>易于部署</strong>：Docker 一键部署，全自动 HTTPS 证书自动申请续期，支持 ARM</li>
</ul>
<h2 id="快速上手">快速上手</h2>
<p><code>VanBlog</code> 支持 Docker 部署，可使用 Dcoker Compose 一键部署。</p>
<p>1、创建 <code>vanblog</code>目录并在这个目录下新建 <code>docker-compose.yaml</code> 文件</p>
<pre><code class="language-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
</code></pre>
<p>2、启动项目</p>
<pre><code class="language-bash">docker-compose up -d
</code></pre>
<p>3、浏览器访问，并按照指引完成初始化</p>
<pre><code class="language-bash">http://&lt;你的域名&gt;/admin/init
</code></pre>
<p>具体的站点配置，可参考：</p>
<pre><code class="language-bash">https://vanblog.mereith.com/reference/config.html
</code></pre>
<h2 id="功能预览">功能预览</h2>
<h3 id="前台首页">前台首页</h3>
<ul>
<li><strong>首页</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/VanBlog/img-20250731221413.png"></p>
<ul>
<li><strong>文章阅读</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/VanBlog/img-20250731221452.png"></p>
<ul>
<li><strong>文章评论</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/VanBlog/img-20250731221536.png"></p>
<ul>
<li><strong>文章分类</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/VanBlog/img-20250731221609.png"></p>
<ul>
<li><strong>时间线</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/VanBlog/img-20250731221639.png"></p>
<h3 id="后台管理">后台管理</h3>
<ul>
<li><strong>分析概览</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/VanBlog/img-20250731221759.png"></p>
<ul>
<li><strong>文章管理</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/VanBlog/img-20250731221814.png"></p>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/VanBlog/img-20250731221858.png"></p>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/VanBlog/img-20250731221938.png"></p>
<ul>
<li><strong>草稿管理</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/VanBlog/img-20250731221953.png"></p>
<ul>
<li><strong>图片管理</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/VanBlog/img-20250731222025.png"></p>
<ul>
<li><strong>站点管理</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/VanBlog/img-20250731222049.png"></p>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/VanBlog/img-20250731222113.png"></p>
<h2 id="本地开发">本地开发</h2>
<ul>
<li><strong>环境准备</strong></li>
</ul>
<ol>
<li>Node.js 18+</li>
<li>pnpm v7+</li>
<li>MongoDB</li>
</ol>
<ul>
<li><strong>克隆项目并安装依赖</strong></li>
</ul>
<pre><code class="language-bash">git clone https://github.com/Mereithhh/vanblog.git
cd vanblog
pnpm i
</code></pre>
<ul>
<li><strong>添加 server 配置文件</strong></li>
</ul>
<p>在 <code>packages/server</code> 下，创建 <code>config.yaml</code> 文件，内容如下：</p>
<pre><code class="language-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
</code></pre>
<blockquote>
<p>数据库连接需要改成对应的连接地址以及用户名密码。</p>
</blockquote>
<ul>
<li><strong>一键启动服务</strong></li>
</ul>
<pre><code class="language-bash"># 开发全部（前台、后台、server）
pnpm dev
</code></pre>
<ul>
<li><strong>单独运行服务</strong></li>
</ul>
<p>1、必须先启动 server</p>
<pre><code class="language-bash"># 端口 3000
pnpm dev:server
</code></pre>
<p>2、然后再启动前台或者后台</p>
<pre><code class="language-bash"># 启动前台 端口 3001
pnpm dev:website
# 启动后台 端口 3002
pnpm dev:admin
</code></pre>
<ul>
<li><strong>浏览器访问</strong></li>
</ul>
<pre><code class="language-bash">## 前台
http://localhost:3001

## 后台，访问成功后，按照指引完成初始化
http://localhost:3002
</code></pre>
<p>可以说，<code>VanBlog</code> 以其高性能、丰富的功能、良好的用户体验和简单的部署方式，为个人博客搭建提供了一个优秀的解决方案。快去试试吧~</p>
<pre><code class="language-bash">项目地址：https://github.com/Mereithhh/vanblog
</code></pre>
<h2 id="最后">最后</h2>
<p>推荐的开源项目已经收录到 <code>GitHub</code> 项目，欢迎 <code>Star</code>：</p>
<pre><code>https://github.com/chenyl8848/great-open-source-project
</code></pre>
<p>或者访问网站，进行在线浏览：</p>
<pre><code>https://chencoding.top:8090/#/
</code></pre>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/github/img-20250608222400.png"></p>
<p><strong>我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目</strong>。</p>
<p><strong>但是任何人在群里打任何广告，都会被 T 掉</strong>。</p>
<p><strong>如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群</strong>：</p>
<p><strong>关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群</strong>。</p>
<blockquote>
<p>大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！</p>
</blockquote>
<hr><br><br>
来源：https://www.cnblogs.com/codechen8848/p/19020234

查看完整版本: 绝了！一款简洁优雅的高性能个人博客系统！