博客搭建

用到的网站和工具#

第一步：选择 Astro 博客模板#

首先进入 Astro 的模板网站：

Astro Blog 模板

选择一个自己喜欢的博客模板。

模板页面会提供 GitHub 仓库地址，也可能会提供一键部署按钮。对于刚开始搭建博客的人来说，可以先把模板项目下载到本地，再慢慢修改。

如果模板提供了 GitHub 仓库，可以使用下面的方式克隆项目：

1
git clone 仓库地址

进入项目根目录后，安装依赖：

1
pnpm install

然后启动本地预览：

1
pnpm dev

正常情况下，终端会显示一个本地地址，例如：

1
http://localhost:4321

使用浏览器打开这个地址，就可以在浏览器中看到博客的效果。

第二步：本地修改博客内容#

模板下载下来之后，就可以开始修改成自己喜欢的样子。

通常可以修改的内容包括：

• 博客标题
• 个人简介
• 首页文案
• 导航栏
• 文章分类
• 标签
• 头像
• 网站图标
• 主题颜色
• 页面布局

以 Firefly 博客为例，可编辑的配置文件及位置如下：

1
src/
2
├── config/
3
│   ├── index.ts                # 配置索引文件
4
│   ├── siteConfig.ts           # 站点基础配置（标题、语言、SEO等）
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     # 文章封面图配置

要添加文章，需要在 src/content/ 下新建 Markdown 文件或文件夹区分不同类别。注意：

• 不要放入 ZIP 或其他二进制文件，否则解析失败会报错。
• 文件夹结构可自由创建，但请保证 Markdown 文件后缀为 .md 或 .mdx。

每篇文章的 Frontmatter 示例：

1
---
2
title: My First Blog Post
3
published: 2023-09-09
4
description: This is the first post of my new Astro blog.
5
image: ./cover.jpg      # 或使用 "api" 启用随机封面图
6
tags: [Foo, Bar]
7
category: Front-end
8
draft: false
9
lang: zh-CN            # 当文章语言与 siteConfig.ts 的默认语言不同时设置
10
pinned: false           # 是否置顶
11
comment: true           # 是否允许评论
12
---

写文章建议统一使用 Markdown 语法。
Markdown 会解析绝大部分网页内容，如果需要特殊 HTML/JS/TSX，可以嵌入模板语法或组件，但请确保语法正确，以免渲染错误。

建议将网站中所有静态资源集中管理，放入 public 文件夹，以便在博客中引用：

• 图片：头像、封面、文章配图、装饰性图标等。
• 可下载文件：如果你希望在博客中提供代码、ZIP 压缩包、PDF 等下载资源，请统一放在 public 文件夹下。
• 音乐：用于音乐播放器或背景音乐的音频文件。
• 其他静态资源：如 favicon、Logo、主题自定义图片等。

Firefly 默认模板的一些静态资源也在 public 文件夹中，你可以直接修改这些资源来个性化自己的网站，例如：

1
public/
2
├── images/           # 网站默认图片，可替换或新增
3
├── audio/            # 音乐文件
4
└── downloads/        # 可下载文件

💡 注意事项：

1. 所有文件路径应保持一致，文章或页面中引用路径为 /images/...、/audio/...、/downloads/... 等。
2. 不要在 src/ 文件夹中直接放置二进制文件（如 ZIP、音频等），否则可能被错误解析或构建报错。
3. 通过 public 文件夹管理静态资源，可以让部署后的博客直接访问这些文件，无需额外配置。

第三步：同步到 GitHub#

在本地完成博客修改后，需要将项目上传到 GitHub，以便 Vercel 或其他平台可以自动部署。

1
git init                      # 初始化本地 Git 仓库
2
git add .                      # 添加所有文件到暂存区
3
git commit -m "init blog"      # 提交代码
4
git branch -M main             # 设置主分支为 main
5
git remote add origin <仓库地址> # 添加远程仓库地址
6
git push -u origin main        # 推送到 GitHub

1
git remote -v

1
git remote set-url origin <新的仓库地址>

1
git push -u origin main

第四步：使用 Vercel 部署#

打开 Vercel 后，选择导入 GitHub 仓库。

一般流程是：

1. 登录 Vercel
2. 连接 GitHub 账号
3. 选择博客所在的仓库
4. 导入项目
5. 确认构建命令和输出目录
6. 点击部署

对于 Astro 项目，常见配置一般是：

1
Build Command: pnpm build
2
Output Directory: dist

大部分情况下，Vercel 会自动识别项目类型，不需要手动修改太多配置。

部署完成后，Vercel 会给你一个默认域名，例如：

1
xxx.vercel.app

这时你的博客就已经可以公开访问了。

第五步：购买并绑定自己的域名#

如果想让博客看起来更正式，可以购买一个自己的域名。

购买域名后，需要做两件事：

第一，在 Vercel 中添加自定义域名。

进入项目设置，找到 Domains，然后添加自己的域名。

第二，在域名商后台配置 DNS。

Vercel 会告诉你需要添加哪些 DNS 记录。

按照 Vercel 的提示添加即可。

DNS 配置完成后，可能不会立刻生效，需要等待一段时间。短则几分钟，长则可能需要数小时。

💡 注意事项：

1. 每次更新你的Blog的时候，同样也不会立刻生效，但是一般都会在10分钟内都会构建好。

第六步：访问你的博客#

当 Vercel 部署成功，并且域名解析生效后，就可以通过自己的域名访问博客了。

之后写博客的大致流程就是：

1. 在本地新建或修改 Markdown 文章
2. 使用 pnpm dev 本地预览
3. 确认没问题后提交到 GitHub
4. Vercel 自动重新部署
5. 访问网站查看更新结果

推送完成后，Vercel 会自动开始部署。

一些踩坑记录#

总结#

这次博客搭建让我大致理解了一个现代静态博客的基本流程。

Astro 负责生成博客页面，GitHub 负责保存代码，Vercel 负责自动部署，域名则负责让网站拥有一个更正式的访问地址。

搭建过程本身并不难，真正需要花时间的地方，反而是后续如何调整博客样式、整理文章结构，以及持续写内容。

最后，感谢 今朝酒 鼎力相助助我完成了网站构建