从零开始，搭建一个像「Do37」一样的个人博客

前言#

说实话，搭这个博客之前，我对前端几乎一窍不通。

我想要的很简单：一个不依附任何平台、完全属于自己、安安静静放内容的地方。试过 WordPress，太重；摸过 Hugo，总觉得哪里差口气。后来无意间看到有人用 Astro 做出的站点，干净、加载极快，再配上 Firefly 这个主题，第一眼就觉得很对——它安静不闹，但又藏着很多让人舒服的小细节，恰好是我心里那个“角落”该有的样子。

真正动手之后才发现，搭建难度比想象中低太多了。整个过程无非就是装个 Node.js，初始化项目，把 Firefly 主题套上去，然后改几行配置文件。那些看起来很难的功能，比如壁纸模式、亮暗色自动跟随系统、全屏透明背景、水波纹动画、樱花飘落特效，其实在主题里早就封装成了开关，你只需要在配置里设成 true 或 false 就能启用。而我一直想要的列表与网格布局切换、首页标题的渐变过渡，同样是一行配置的事。

唯一可能让人卡住的地方是部署。好在 Cloudflare Pages 把这一步也简化到了极致：代码推上 GitHub，在 Cloudflare 后台授权仓库，它就会自动构建并部署到全球网络。完全无服务器、完全免费，连域名都可以直接用你自己的。

接下来，我会从安装环境开始，一步不落地带你做出一个和我一样的安静空间。放技术笔记也好，写日常随笔也好，全都是你自己的。准备好，我们这就开始。

一、安装 Node.js#

下载地址：node-v22.22.2-x64.msi（国内源）

⚠️ 注意：千万不要安装在 C 盘

安装完成后执行以下命令，输出对应版本号说明安装成功：

1
node -v
2
npm -v

二、安装 pnpm 并配置墙内镜像#

2.1 安装 pnpm#

1
npm install -g pnpm --registry=https://registry.npmmirror.com

2.2 配置墙内镜像#

1
pnpm config set registry https://registry.npmmirror.com

2.3 验证配置#

执行后使用以下命令查询：

1
pnpm config get registry

💡 输出为 https://registry.npmmirror.com 说明设置成功

三、安装 Git#

💡 该 Git 安装包也是墙内源下载

⚠️ 推荐使用这个版本，因为使用最新版本可能会造成未知原因

需要动手下载：Git-2.54.0-64-bit.exe 安装

下载安装后就一直回车就行，直到安装成功。

安装完成后执行：

1
git --version

输出版本号说明安装成功。

四、下载 Firefly 主题#

Github 链接：https://github.com/CuteLeaf/Firefly

下载后解压，在解压的文件目录里运行 cmd。

输入以下命令等待完成安装环境：

1
pnpm install

💡 其中会下载大约 500MB 大小的文件

部署完成后执行：

1
pnpm dev

CMD 输出提示如下，就说明成功了，就可以访问 http://localhost:4321/ 进行查看：

⚠️ 必须保持 CMD 持续开启，才能实施访问 http://localhost:4321/

1
[vite] connected.
2
03:01:07 [types] Generated 2ms
3
[vite] connected.
4
03:01:08 [content] Syncing content
5
03:01:13 [content] Synced content
6
03:01:13 [vite] Forced re-optimization of dependencies
7
 astro  v6.3.3 ready in 17984 ms
8
┃ Local    http://localhost:4321/
9
┃ Network  use --host to expose
10
03:01:13 watching for file changes...

展示界面就不放图片了，该主题使用大量的二次元图片，尚未清楚主题开发者获得过使用授权。

💡 给大家一个警示，使用来自非商用图片容易构成侵权，以及巨额赔款等

💡 可以使用一些无版权可免费商用图片，免费可商用要找知名度高的，才会安全

五、修改主题配置#

修改主题文件的时候只需要修改 \src\config\ 里面的文件。

修改网站参数只需要修改这些文件就行。

⚠️ 注意：修改网站 logo 的时候不能用外链图片，只能把 logo 替换掉 \src\assets\images 里面的 firefly.png 文件，否则图标会渲染失败

根据主题作者的说明：

1
src/
2
├── config/
3
│   ├── index.ts              # 配置索引文件
4
│   ├── siteConfig.ts         # 站点基础配置
5
│   ├── backgroundWallpaper.ts # 背景壁纸配置
6
│   ├── profileConfig.ts      # 用户资料配置
7
│   ├── commentConfig.ts      # 评论系统配置
8
│   ├── announcementConfig.ts # 公告配置
9
│   ├── licenseConfig.ts      # 许可证配置
10
│   ├── footerConfig.ts       # 页脚配置
11
│   ├── FooterConfig.html     # 页脚HTML内容
12
│   ├── expressiveCodeConfig.ts # 代码高亮配置
13
│   ├── effectsConfig.ts      # 动画特效配置（樱花等）
14
│   ├── fontConfig.ts         # 字体配置
15
│   ├── sidebarConfig.ts      # 侧边栏布局配置
16
│   ├── navBarConfig.ts       # 导航栏配置
17
│   ├── musicConfig.ts        # 音乐播放器配置
18
│   ├── pioConfig.ts          # 看板娘配置
19
│   ├── adConfig.ts           # 广告配置
20
│   ├── friendsConfig.ts      # 友链配置
21
│   ├── galleryConfig.ts      # 相册配置
22
│   ├── sponsorConfig.ts      # 赞助配置
23
│   └── coverImageConfig.ts  # 文章封面图配置

前言#