纯前端 开启你的零成本、极致动效个人博客时代

🚀 PJFUN Blog：一键 Fork，开启你的零成本、极致动效个人博客时代

打破平庸，让每一次阅读都成为视觉享受。 告别服务器开销，告别复杂的后端维护。 只要你会用 GitHub，就能拥有一个全球秒开、动效顶级、完全属于你的现代化博客。通过 Fork 本项目，你将获得一个开箱即用的专业级内容发布平台。 PJ Blog 是为追求极致性能与优雅交互的开发者打造的现代化个人博客系统。基于 Vue 3 + Vite 驱动，它剥离了复杂的后端逻辑，回归静态之美，实现真正的“全球秒开”。

💎 立即预览 Demo | 🛠️ 快速上手 || 💬 参与贡献 |⚡ 立即 Fork 开始部署

在这里插入图片描述

在这里插入图片描述

💡 为什么选择 PJFUN Blog？

在服务器维护成本日益增高的今天，PJ Blog 采用了 "Content as Data" 的前卫理念。

• ⚡ 你不需要精通 Vue 3 或 Vite。只需三步：Fork 仓库 -> 修改配置 -> 推送内容。你的新博客将在几分钟内自动上线。
• ⚡ 极致响应速度：纯静态资源部署，首屏加载（LCP）通常小于 0.8s。PJFUN Blog 并非死板的模板。基于 UnoCSS 和 配置文件驱动，你可以像换肤一样修改主色调、字体、布局细节，轻松打造独一无二的视觉风格。
• 🎨 顶级动效交互：不仅仅是转场，从代码块的流光溢彩到全局暗黑模式的无缝平滑切换，每一像素都经过打磨。
• 🔐 安全与隐私：由于没有后端数据库，天然免疫 SQL 注入与后端漏洞。可选的 SHA-256 内容加密，让你的私密笔记坚不可摧。
• 📦 零成本运维：无需购买服务器，无需备案。利用 GitHub Pages 或 Vercel 的免费额度，你的博客可以永久免费运行，并享受顶级 CDN 加速
• 🌐 多格式支持 - 支持 Markdown、HTML、TXT、PDF、Word 和 Excel 文档

🛠️ 核心功能一览

术底座：现代前端的“梦幻联动”

PJFUN Blog 不堆砌工具，只选择最合适的利器：

🌟 深度功能亮点

1. 自动化的内容管理系统

你只需要在 public/content/ 目录下放置 Markdown （html）文件。系统会自动解析 Frontmatter，动态生成：

• 多级目录树：自动提取文章标题 H1-H6。
• 智能搜索索引：支持全文关键词检索。
• 标签/分类云：自动聚合，无需手动配置。

2. 开发者友好的高级功能

• PWA 离线访问：支持安装到手机/桌面，像原生应用一样在离线状态下阅读已加载内容。
• 国际化 (i18n)：内置中英文适配，一键切换全球视野。
• RSS & Atom 订阅：自动生成订阅源，让你的忠实读者通过阅读器实时获取更新。

🚀 快速上手：5 分钟开启新篇章

环境要求

• Node.js: ≥ 20.18.1
• Package Manager: pnpm (推荐)

第一步：Fork 项目

点击本项目右上角的 Fork 按钮，将代码克隆到你自己的 GitHub 账号下。

第二步：个性化定制 (配置文件)

你不需要去翻代码，只需修改 src/constants/index.ts：

// 快速修改站点信息
export const SITE_CONFIG = {
  title: '你的博客名称',
  author: '你的名字',
  description: '你的个性签名',
  avatar: '/avatar.jpg',
  social: [
    { name: 'GitHub', link: 'https://github.com/your-id' },
    // ... 更多社交链接
  ]
}

想要调整 UI 颜色？在 uno.config.ts 中修改主题色，即可全局改变色调。

第三步：发布内容

将你的 Markdown 文件放入 public/content/ 目录。

---
title: 第一篇博文
date: 2025-12-12
tags: [教程, 部署]
---
Hello World! 这是我的新博客。

Push 代码，系统将自动触发构建并上线！

🎨 UI 定制指南：打造你的个人风格

PJFUN Blog 提供了极高的自由度：

• 颜色主题：支持自定义主色、背景色及渐变效果。
• 字体选择：支持引入 Google Fonts 或自定义字体，提升质感。
• 布局切换：支持隐藏/显示侧边栏、目录树，自由定义首屏展示。
• 代码高亮：内置多种 Highlight.js 主题，极简或炫彩任你挑。

📈 性能与 SEO

• 秒开体验：通过 Vite 6 预构建与静态导出，LCP 性能指标接近满分。
• SEO 友好：自动生成 RSS、SiteMap 和 JSON Feed，让搜索引擎主动收录你的思想。
• 轻量化：移除所有冗余库，UnoCSS 确保生成的 CSS 最小化。

🤝 参与贡献

我们欢迎任何形式的贡献，无论是新功能的 Idea、Bug 修复，还是文档改进！

1. Fork 本仓库。
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)。
3. 提交你的修改 (git commit -m 'Add some AmazingFeature')。
4. 推送到分支 (git push origin feature/AmazingFeature)。
5. 开启一个 Pull Request。

📜 开源协议

基于 MIT License 许可。你可以自由地使用、修改和分发。

👨‍💻 关于作者

如果你对这个感兴趣，或者想交流技术：

• 个人主页： https://pjfun.top
• 本文首发于我的博客： https://blog.pjfun.top/2025/hello