如何部署我的博客

前言

昨天突发奇想在「NodeSeek」上面发了一篇帖子（帖子链接），没想到第一篇就被设置为了「推荐阅读」。但是毕竟是我自己的博客而不是模板，所以并没有部署指南。惊喜之余，还是要写一篇关于如何部署我的博客的教程。部署很简单，这里我分成三个步骤，分别是：博客与动态部署 -> 评论系统 -> 短链系统。在最后，我会提供完整的 .env 文件。你也可以在 GitHub 仓库查看。

博客与动态部署

让我们先从最基础的开始吧！

准备工作

首先，你需要有一个 GitHub 账号以及一个 Telegram 账号，此部分不在教程范围内。

其次，你需要选择一个部署平台。我的项目属于 Astro SSR，需要适配器。具有官方适配器的平台有 Vercel、Netlify、Cloudflare 等等。你可以选择其中一个进行部署。如果你选择 Vercel 部署，那么你不需要对 astro.config.mjs 进行修改；如果你选择 Netlify 或者 Cloudflare ，请根据 Astro 文档更换相对应的适配器。

最后，你需要一个公开的 Telegram 频道，在.env中添加变量如下：

1
TELEGRAM_HOST=t.me
2
# 自定义频道或标识符
3
CHANNEL=your_channel_name

如果在本地运行开发者服务器时出现超时的情况，你可能需要配置代理，在.env中添加变量如下：

1
# HTTP 代理 (具体端口请自行配置)
2
HTTP_PROXY=http://127.0.0.1:7897

请注意，这在部署的时候是不需要的，仅在本地测试使用。

部署步骤

推送您的仓库到 GitHub 上，确定适配器正确后，前往您选择的部署平台（如 Vercel、Netlify 或 Cloudflare）部署即可。全程使用默认设置，不需要修改构建命令等等。

当然，记得添加你的环境变量！

评论系统

评论系统的配置也相当简单。因为是我自己写的，所以你也不需要额外部署其他项目的后端，只需要配置 MongoDB 即可。

准备工作

前往 MongoDB Atlas 注册账号，然后创建一个新的集群（免费套餐即可满足个人使用需求）。

创建数据库用户： 在「Database Access」中添加一个新的数据库用户，记下用户名和密码，后续会用到。

配置网络访问： 在「Network Access」中添加 IP 地址 0.0.0.0/0（允许所有 IP 访问，适合部署在 Serverless 平台），或者添加 Vercel 的 IP 范围。

获取连接字符串：

1. 在「Database」页面点击「Connect」
2. 选择「Connect your application」
3. 复制连接字符串（以 mongodb+srv:// 开头）

添加变量

在.env中添加如下内容：

1
# MongoDB 连接配置（推荐 MongoDB Atlas）
2
# 请前往 https://www.mongodb.com/cloud/atlas 注册并获取连接字符串
3
MONGODB_URI=mongodb+srv://username:password@cluster0.xxxxx.mongodb.net/

但是这还没完，您还需要配置管理员的个人信息、密码等等：

1. 打开src/config.ts，根据注释修改下面内容：

1
// 针对博主特定的数据
2
export const ADMIN_USER = {
3
  nickname: "EveSunMaple",
4
  email: "evesunmaple@outlook.com",
5
  website: "https://www.saroprock.com",
6
  avatar: "https://www.saroprock.com/avatar.webp",
7
};
8

9
// 你不希望用户使用的名称与邮箱
10
export const SENSITIVE_USERS = ["evesunmaple", "EveSunMaple", "sunmaple", "SunMaple", "admin", "博主", "evesunmaple@outlook.com"];

2. 在.env中添加如下内容：

1
# JSON Web Token (JWT) 密钥
2
# 用于用户认证和 API 安全，请使用一个长且随机的字符串
3
JWT_SECRET=<你的 JWT 密钥>
4
# 后台管理员密码
5
# 用于访问受保护的管理功能
6
SECRET_ADMIN_PASSWORD=<设置一个强的管理员密码>

这里为了方便，管理员在登录时，只需要输入用户名、邮箱与密码即可，个人数据会直接使用配置的数据。

重新部署之后，您应该可以使用评论系统了。

对于管理员，可以访问/admin/comments管理评论。

短链系统

如果您成功访问了/admin，可能会惊讶地发现流量数据是不可用的。这是因为本博客使用 Sink 作为短链服务来统计并且分析浏览量。打开 Sink 项目，根据教程部署即可。

部署完成后，在.env中添加如下内容，即可以自动实现与 Sink 的集成，包括为每一篇博客生成短链，统计并且分析数据等等（当然，您不配置 Sink 也可以正常使用）：

1
# 数据接收服务 (Sink) 配置
2
SINK_PUBLIC_URL=<你的 Sink 服务公开访问 URL>
3
SINK_API_KEY=<你的 Sink 服务 API 密钥>

自定义

到现在为止，您就完成了所有配置！最后，您只需要修改本站页面，就可以变成您自己的博客了！

对了，我在博客页脚添加了一个喜欢本站按钮，统计的是仓库数据。如果您希望保留，还需要添加一个变量：

1
# 用于访问 GitHub API，请在 GitHub > Settings > Developer settings > Personal access tokens 中生成
2
GITHUB_TOKEN=<你的 GitHub Personal Access Token>

其他的，比如希望添加导航链接，都可以前往对应的页面组件修改（src/components/layout/Header.astro）。我觉得我自己项目的文件命名还是没什么问题的，找起来应该不难。因为每个人可能希望的都不一样，这里就没有类似模板一样写一个通用的配置了。嗯，记得不要删除页脚右下方我的信息就好 ♥️ 先谢过各位了。

结语

完成自定义后，我的教程也到了头。整个过程不复杂吧？

如果在实践过程中遇到任何问题，欢迎前往 GitHub 仓库 提交 Issue 或讨论，当然也可以直接在文章下方留言。如果喜欢这个项目，可以转发此文章，也可以给项目点个 ⭐ 支持一下，项目还是会持续更新的喵。

对了，如果你需要一个纯静态的博客，这里不要脸打一个自己的广告 -> Frosti。

完整.env 文件

1
# MongoDB 连接配置（推荐 MongoDB Atlas）
2
# 请前往 https://www.mongodb.com/cloud/atlas 注册并获取连接字符串
3
MONGODB_URI=mongodb+srv://username:password@cluster0.xxxxx.mongodb.net/
4

5
# JSON Web Token (JWT) 密钥
6
# 用于用户认证和 API 安全，请使用一个长且随机的字符串
7
JWT_SECRET=<你的 JWT 密钥>
8

9
# 自定义频道或标识符
10
CHANNEL=your_channel_name
11

12
# HTTP 代理 (可选)
13
# 如果你的网络环境需要代理才能访问外部服务，请取消注释并设置
14
# HTTP_PROXY=http://127.0.0.1:7897
15

16
TELEGRAM_HOST=t.me
17

18
# GitHub Personal Access Token
19
# 用于访问 GitHub API，请在 GitHub > Settings > Developer settings > Personal access tokens 中生成
20
GITHUB_TOKEN=<你的 GitHub Personal Access Token>
21

22
# 后台管理员密码
23
# 用于访问受保护的管理功能
24
SECRET_ADMIN_PASSWORD=<设置一个强的管理员密码>
25

26
# 数据接收服务 (Sink) 配置
27
# 如果你使用自定义的数据统计或链接缩短服务，请配置以下选项
28
SINK_PUBLIC_URL=<你的 Sink 服务公开访问 URL>
29
SINK_API_KEY=<你的 Sink 服务 API 密钥>