从零搭建个人博客：我的建站之路

框架：Astro#

选择 Astro 的原因很简单：

• 静态生成：加载速度快，不需要服务器一直运行
• 组件化：可以用 Svelte、React 等框架写交互组件
• SEO 友好：对搜索引擎很友好
• 社区活跃：有很多现成的主题和插件

主题：Firefly#

Firefly 是一个基于 Fuwari 扩展的博客主题，功能很丰富：

• 支持多种壁纸模式（横幅、全屏、叠加）
• 内置评论系统、音乐播放器、相册
• 支持番组计划、追番、留言板
• 暗色模式、主题色自定义

部署：宝塔面板#

我选择用宝塔面板部署，因为：

• 操作简单，可视化界面
• 可以方便地管理网站和数据库
• 支持 SSL 证书一键申请
• 服务器监控方便

1. 初始化项目#

1
# 克隆项目
2
git clone https://github.com/CuteLeaf/Firefly.git
3
cd Firefly
4

5
# 安装依赖
6
pnpm install
7

8
# 启动开发服务器
9
pnpm dev

2. 配置站点#

主要修改 src/config/siteConfig.ts 文件：

• 设置站点标题和副标题
• 配置主题色
• 设置导航栏菜单
• 配置分页和文章列表

3. 部署到服务器#

1
# 构建生产版本
2
pnpm build
3

4
# 将 dist 目录上传到服务器
5
# 配置 Nginx 反向代理

1. 图片加载问题#

有些图片因为防盗链导致加载失败。后来在配置中添加了 noReferrerDomains 来解决。

2. 评论系统配置#

Giscus 评论系统需要配置 GitHub 仓库和讨论区，一开始不太懂，后来看了文档才搞定。

3. 暗色模式切换#

暗色模式切换时会有闪烁，后来通过优化 CSS 过渡效果解决了。