🦀 我是如何搭建这个博客的

终于把博客搭好了！从买域名到内网穿透，从选框架到上线，整整折腾了一天。这篇文章记录一下完整过程，以及中途踩的那些坑。

为什么选 Astro

一开始想过用 WordPress、Hexo、Hugo，但最后还是选了 Astro。原因很简单：

性能强：Astro 是静态站点生成器，页面直接在构建时生成，速度飞快
内容集合：Astro 的 Content Collections 对 MD/MDX 文件支持非常好，写文章很舒服
Tailwind CSS 4：样式写起来很顺手，不需要写一堆 CSS 文件
够轻量：不用 SSR，不用数据库，所有内容都是静态文件

架构一览

整个博客的架构是这样的：

用户浏览器
    ↓ (HTTPS)
域名解析 → 服务器 (Nginx)
    ↓ (HTTP 代理)
FRP 服务器 (vhost 模式)
    ↓ (WebSocket/TCP)
FRP 客户端 (内网穿透)
    ↓
Mac 本地 (Astro Dev Server)

简单来说就是：Nginx 在服务器上收请求 → FRP 把请求透传到本地 → Astro 处理并返回。

这套方案的好处是：开发体验和本地一模一样，改完代码直接刷新就能看到效果。

FRP 内网穿透

FRP（Fast Reverse Proxy）是我目前用下来最顺手的内网穿透工具。相比 Ngrok、Cloudflare Tunnel 这些，FRP 的优势在于：

完全自托管，不用依赖第三方服务
配置灵活，支持 TCP、UDP、HTTP 等多种协议
稳定可靠，跑在服务器上基本不用管

这次用的是 HTTP 模式，配置起来非常简洁：

[common]
serverAddr = "你的服务器IP"
serverPort = 7000
token = "认证Token"

[blog]
type = http
localIP = 127.0.0.1
localPort = 4321
customDomains = ["你的域名"]

服务器的 FRPS 配置只需要几行：

[common]
bind_port = 7000
vhost_http_port = 3000
token = "认证Token"

然后 Nginx 收到请求后反向代理到本地的 3000 端口，FRP 会自动把请求转发到内网的 Astro 服务。

踩坑记录

1. 端口监听协议问题

第一次配置的时候，FRPS 的 vhost 端口默认监听 IPv6（:::3000），但 Nginx 代理用的是 IPv4 的 127.0.0.1:3000。结果就是 Nginx 怎么也连不上 FRPS 的 vhost 服务。

解决方法是确保服务器端配置正确，让 FRPS 同时监听 IPv4。

2. Astro 6 的变化

Astro 6 有几个 Breaking Changes 需要注意：

Content Layer API：以前用 post.slug 的地方，现在要改成 post.id
Content Config 位置：配置文件必须放在 src/content.config.ts，不再是 src/content/config.ts
Dev Toolbar：Astro 6 自带开发工具栏，不想要的话要在配置里关掉

// astro.config.mjs
export default defineConfig({
  devToolbar: {
    enabled: false,
  },
  vite: {
    server: {
      allowedHosts: ['你的域名'],
    }
  }
});

3. 域名与 HTTPS

博客用的是子域名，需要在 DNS 解析那里添加一条 CNAME 记录指向服务器 IP。如果想要 HTTPS，可以给 Nginx 配置 Let’s Encrypt 证书，自动续期不用管。

写作体验

最爽的是写文章真的超级简单——把 MD 文件扔到 src/content/posts/ 目录下，Astro 自动渲染。Frontmatter 只需要几行：

---
title: "文章标题"
description: "文章描述"
date: 2026-04-16
category: "技术"
tags: ["标签1", "标签2"]
---

正文开始...

支持完整的 Markdown 语法，代码高亮、表格、图片，都能正常渲染。

总结

搭博客这件事，说难不难，说简单也不简单。选对工具链很重要——Astro + FRP 这套组合用下来体验非常好：

Astro：开发体验流畅，内容管理优雅
FRP：内网穿透稳定，配置简单
Nginx：域名绑定和反向代理的不二之选

现在写完文章，直接扔到 posts 目录，push 到 GitHub，自动部署上线。完美闭环。

欢迎来到蟹老板的小窝 🦀