Firefly/流萤 - astro博客搭建教程
841 字
4 分钟
Firefly/流萤 - astro博客搭建教程
简单介绍Firefly
GitHub仓库地址-Firefly
Firefly是一个由 Fuwari 模版开发的astro静态Blog主题,新增加了加密文章,bangumi动画分享,友链等的页面,内容性能高并且可用性十分强大
功能特性
Astro + Tailwind CSS - 基于现代技术栈的超快静态站点生成 流畅动画 - Swup 页面过渡动画，提供丝滑的浏览体验 响应式设计 - 完美适配桌面端、平板和移动设备 多语言支持 - i18n 国际化，UI支持简体中文、繁体中文、英文、日文、俄语 全文搜索 - 基于 Pagefind 的客户端搜索，支持文章内容索引 动态侧边栏 - 支持配置单侧边栏、双侧边栏 文章布局 - 支持配置(单列)列表、网格(多列/瀑布流)布局 字体管理 - 支持自定义字体，丰富的字体选择器 页脚配置 - HTML 内容注入，完全自定义 亮暗色模式 - 支持亮色/暗色/跟随系统三种模式 导航栏自定义 - Logo、标题、链接全面自定义 壁纸模式切换 - 横幅壁纸、全屏壁纸、全屏透明壁纸、纯色背景 主题色自定义 - 360° 色相调节部署教程
自部署
自部署非常简单,我以1panel举例
在自己电脑这边,可以用一下指令拉取GitHub仓库的内容
git clone https://github.com/CuteLeaf/Firefly.git可以看到一下内容
||--src |--content 这是独立文章和独立页面内容的储存位置 |--config 项目将原本Fuwari的单个设置文件拆散,放置在这个独立的文件夹内,里面的文件对应者站点的各种内容的调整要添加新的文章可以用一下指令:
pnpm new-post 文章名称在content里添加完你自己文章后,就可以使用另外的指令进行编译了
pnpm build如果要看一下编译的结果,可以通过一下命令查看:
pnpm preview将build目录里的文件放到自己服务器nginx的静态目录里面就可以正常访问了
vercel部署
方法一：通过 Vercel 控制台
将你的项目推送到 GitHub / GitLab / Bitbucket 登录 Vercel，点击 Add New … → Project 导入你的仓库 Vercel 会自动检测 Astro 框架，配置如下： Application Preset: Astro Build Command: pnpm build Output Directory: dist Install Command: pnpm install 设置 Node.js 版本：进入 Settings → General → Node.js Version，选择 22.x 点击 Deploy方法二：使用 vercel.json 在项目根目录创建 vercel.json：
{ "framework": "astro", "buildCommand": "pnpm build", "outputDirectory": "dist", "installCommand": "pnpm install"}结语
Firefly还是非常值得站长尝试自建的,利用GitHub,Cloudflare Pages/vercel可以完全不用租用自己的服务器就可以自建出完全可以使用,并且非常好看的个人Blog了,期待你们都能构建出一个适合自己的Blog站点,一起分享生活的点点滴滴! ξ( ✿＞◡❛)
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
Firefly/流萤 - astro博客搭建教程
https://www.cacablog.top/posts/fireflysite/ 相关文章 智能推荐
1
Github Action教程
Github 2026-06-19
2
Rust第一部分学习
学习 2026-06-15
3
Ente部署记录
Docker部署 2026-04-18
4
Docker内部对外网络不通解决方案
Docker问题 2026-02-15
5
重新思考Linux系统安全
Linux 2026-02-11
随机文章 随机推荐