梦畔栖萤
返回文章列表
3055 字16 分钟浏览量： -

如何使用 Astro 搭建属于自己的博客

折腾#Astro / Firefly / 静态博客 / 博客搭建 / 自托管 / Nginx / Cloudflare / 博客

前情提要

我是个喜欢折腾的人，所以经常会去网上搜一些问题的解决方案。不过，当你键入关键词，然后按下回车的那一瞬间，铺天盖地的 xxDN，xx 百科，以及各种 AI 爬取后拼凑的辣鸡文章就呈现在你的眼前，想找到真正有价值的答案变得越来越难。虽然话说得有点绝对，常见问题，这些网站的内容勉强也能看，可一旦遇到稍新或小众的问题，就很难找到满意的解答了。

我更喜欢看个人博客的文章。相比于那些爬取后稍加改动的“二手内容”，个人博客的文字显得“清新”太多了。于是我就想：既然自己都这么讨厌低质信息，何不亲手搭一个博客，对外输出自己的经验和思考呢？

准备工作

对于个人博客，那肯定需要随时对外供人访问啦，所以你至少得有一台可以 7x24h 工作的设备，无论是云主机，还是简单的一台“家里云”（闲置电脑、树莓派之类），都可以用来部署博客。因为本文重点在于搭建过程本身，服务器的选购与配置就不展开啦。

框架选择

同样作为初次接触博客搭建的新手，我在网上查找、思考了一圈后，发现以下几个框架/平台比较热门：

以上罗列的几个框架，都是属于 静态网站生成器（SSG） 类型的框架。对于我这种懒人，维护一个纯静态博客显然更省心，你能在网上看到的大部分个人博客，基本上都是由以上几个框架搭建的（不信自己拉到网页最底下看看）。

我最终选择了 Astro。

它不仅可以用 Markdown 来写作，还支持 MDX (Markdown + JSX) 来偶尔在文章页里塞一些 React、Vue 或者 Svelte 的前端组件，满足那一点点额外的小需求。

开始搭建

[!NOTE] 提示 本文使用 Linux 环境部署，机型配置如下：

  • CPU: Intel Xeon E3 1230 @ 3.2GHz
  • RAM: 4GB (Single Channel) DDR3
  • SSD: 120GB
  • SYSTEM: Ubuntu Server 26.04 LTS

部署完成并运行其他服务后，实际内存占用约 1.33GB / 3.26GB

主题选择

我个人建议先挑好你想要的主题模板，然后再通过命令行安装。

主题的选择，可以访问 Astro 官方主题页 浏览，也可以选择社区中广受欢迎的主题，例如：

此外，我在 Github 上“海淘”了一番之后，找到了一个基于 Fuwari 模板的主题 —— Firefly。

该主题基于 Fuwari，添加了左右双侧边栏、文章网格布局、瀑布流布局等，还新增了站点统计、日历、文章目录、音乐播放器等小组件，并且可以通过配置文件进行高度自定义，因此我选择了这个主题。

环境配置

通过 SSH 登录到 Linux 后，我们需要先配置一下环境。

首先你会需要 Node.js 运行环境，按照 官网 的指示，我选择使用 nvm 包管理器安装。Node.js 版本，我选择了 v24.15.0 LTS。

运行以下命令安装：

Terminal window
# 下载并安装 nvm：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
# 代替重启 shell
\. "$HOME/.nvm/nvm.sh"
# 下载并安装 Node.js：
nvm install 24
# 验证 Node.js 版本：
node -v     # 应输出 "v24.15.0"
# 验证 npm 版本：
npm -v     # 应输出 "11.12.1"

[!TIP] 建议 如果你和我一样选择了 Firefly 模板的话，我推荐顺手安装 pnpm。

运行以下命令：

Terminal window
npm install -g pnpm

安装模板

安装好后，找一个你喜欢的位置，我这里选择 /home/username/ 目录了。

Terminal window
# 首先先创建一个用来存放博客的文件夹，名字随意，自己喜欢就好
mkdir yourname-blog
cd yourname-blog


# 随后运行命令安装 Astro 以及模板
# `github_username` 指主题发布者的 Github 用户名
# `theme_name` 指主题发布所在的仓库名
npm create astro@latest -- --template github_username/theme_name

如果你遇到了提示：

astro  Launch sequence aborted.


      ▲  error Template xxx/xxx could not be found!
      ◼  check https://astro.build/examples

我们也可以直接通过克隆仓库的形式安装：

Terminal window
git clone https://github.com/github_username/theme_name.git

[!IMPORTANT] 重要 如果你已经通过 cd 进入了 yourname-blog 文件夹，请不要忘了在命令后加一个 .，否则会在当前目录下再创建一个以仓库名命名的文件夹。

Terminal window
git clone https://github.com/github_username/theme_name.git .

耐心等待安装完毕后，就大功告成啦！

[!CAUTION] 注意 如果你和我一样使用了 Firefly 模板，你 必须 使用以下命令安装依赖：

Terminal window
pnpm install

启动与构建

依赖安装完成后，使用以下命令启动开发服务器：

Terminal window
npm dev


# 如果你在上边安装了 pnpm 管理器，也可以用
pnpm dev


# 如果你是云主机，请使用
pnpm dev --host


# 不行的话就用
npx astro dev --host 0.0.0.0

稍等片刻，待页面编译完成，就可以在浏览器中访问 你的服务器IP:4321，看到新鲜出炉的博客页面啦！

不过，目前你看到的还是一个模板页面，里边都是模板作者留下的信息，对于使用 Firefly 模板的小伙伴，可以访问 官方文档 了解更多信息，使用其它模板的小伙伴，也可以访问相应的 Github 主页，寻找文档所在的位置。

在开发服务器运行期间，网页上的内容都是实时生效的（除非写明需要重启开发服务器），你可以随时预览你做的更改。

修改完成后，使用以下命令运行构建：

Terminal window
# 或者换你自己喜欢的包管理器
pnpm build

构建完成后，你会看到项目根目录下多了一个 dist/ 文件夹，里面就是博客的全部静态文件——HTML、CSS、JS、图片等等。你只需要把这个文件夹里的内容部署到服务器上，博客就正式上线了。

部署上线

  • 平台部署：把代码推送到 GitHub/GitLab，由 Vercel、Netlify、Cloudflare Pages 等平台自动构建并托管。优点是免费、省心、自带 CDN，适合不想折腾服务器的朋友。
  • 自部署：在自己的服务器上用 Nginx/Caddy 反向代理 dist/ 目录。优点是完全可控，可以和其它服务共用一台机器。

我选择了自部署——因为这台服务器本来就跑着其它服务，多挂一个博客毫无压力。

域名选购

既然是对外访问的博客，用 IP 直连就太不体面了。你需要一个自己的域名。

我是在 Spaceship 上买的 .com 域名。选它主要是因为价格透明，没有续费套路 ，而且有永久 whois 隐私保护，我可不想自己的注册信息被谁都能查到。域名后缀方面，.com 是首选，如果你有特别的想法，.me、.dev、.blog 之类的个性化后缀也很有意思，但是价格嘛……

域名买好之后，先别用注册商自带的 DNS 管理面板。下一步我们把它接入 Cloudflare（如果你想的话），统一管理解析和 CDN。

Cloudflare 解析

添加站点

首先注册登录 Cloudflare，点击“添加站点”，输入你的域名。Cloudflare 会扫描现有的 DNS 记录，扫描完成后会让你选择套餐——选 Free 就行。

接下来，Cloudflare 会给你两个 nameserver（类似 eliza.ns.cloudflare.com 这种），把它复制下来。

修改域名解析服务器

然后回到你买域名的地方，找到域名的 DNS 管理页面，把原来的 nameserver 替换成 Cloudflare 给的那两个。修改完成后等几分钟到几十分钟，Cloudflare 面板会显示“站点已激活”，同时你也会收到一封邮件。

添加 DNS 记录

站点激活后，在 Cloudflare 的 DNS → 记录，添加一条 A 记录：

类型 名称 内容 代理状态
A blog 你的服务器 IPv4 关闭（仅 DNS）
AAAA（如果你有） blog 你的服务器 IPv6 关闭（仅 DNS）

[!WARNING] 警告 不建议直接用根域名访问你的博客。

代理状态那一列，建议先关闭（灰色云朵图标，即 “仅 DNS” 模式）。这样 Cloudflare 只做 DNS 解析，流量不经过它的代理，后边 Certbot 签发 SSL 证书时会省很多事——因为 Let’s Encrypt 的 HTTP 验证需要直接访问你的服务器。

[!TIP] 后续优化 等 SSL 证书配置好后，如果你想要 CDN 加速 （对于国内其实是减速） 和更好的 DDoS 防护，可以随时把代理状态切回橙色云朵（代理模式）。

验证解析

DNS 生效需要几分钟到几小时不等。你可以用 ping 或者 nslookup 确认解析是否生效：

Terminal window
ping blog.yourdomain.com
# 如果返回你的服务器 IP，说明解析生效了

SSL 证书

都 2026 年了，HTTPS 是必须的。推荐用 Certbot 来搞定 Let’s Encrypt 免费证书。

先把 Nginx 和 Certbot 装好（以 Ubuntu/Debian 为例）：

Terminal window
# 安装 Nginx 和 Certbot
sudo apt install nginx
auso apt install certbot python3-certbot-nginx

安装完 Nginx 后它会自动启动并占用 80 端口，这正好满足 Certbot 的域名验证需求。接着下发证书：

Terminal window
# 下发证书，需要 80 端口开放
sudo certbot --nginx -d blog.yourdomain.com

过程中输入邮箱（用于证书过期提醒），同意协议即可。certbot --nginx 会自动帮你生成一份带 HTTPS 的临时 Nginx 配置，不过不用管它——下一节我们会用自己的配置覆盖。完成后证书保存在 /etc/letsencrypt/live/blog.yourdomain.com/ 下面。

Certbot 会自动设置定时任务续期，不需要手动干预。

Nginx 配置

证书到手了，接下来配置 Nginx 指向博客的 dist/ 目录。

server {
    listen 443 ssl;
    listen [::]:443 ssl;


    server_name blog.yourdomain.com;


    root /home/xxx/yourname-blog/dist;
    index index.html;


    ssl_certificate /etc/letsencrypt/live/blog.yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/blog.yourdomain.com/privkey.pem;


    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;


    location / {
        try_files $uri $uri/ =404;
    }
}


server {
    listen 80;
    listen [::]:80;


    server_name blog.yourdomain.com;
    return 301 https://$host$request_uri;
}

listen 443 ssl 和 listen [::]:443 ssl 分别监听 IPv4 和 IPv6 的 HTTPS 请求，第二个 server 块负责把所有 HTTP 流量 301 重定向到 HTTPS。

保存后检查并重载：

Terminal window
sudo nginx -t
sudo systemctl reload nginx

现在访问 https://blog.yourdomain.com，一把小锁图标出现，博客正式上线！

写在最后

到此，一个属于自己的博客就搭好了。回顾整个过程，说难不难，说简单也不简单。但折腾完之后，你拥有的是一个完全由自己掌控的内容空间——没有算法推荐、没有广告、没有辣鸡内容。

博客上线只是第一步，我认为，个人博客最怕的不是没人看，而是自己不知道写什么。我的原则很简单——写自己真正折腾过的东西。比如这篇文章，就是我搭博客过程的记录；之后遇到什么坑、学到什么新东西，顺手就写下来。

不要纠结“这东西网上已经有很多教程了”。你写的不是教程，是你自己的痕迹——踩过的坑、走过的弯路、当下的思考，这些才是个人博客区别于“二手内容”的地方。

回到开头那个问题：为什么要在 AI 生成内容泛滥的时代亲手搭一个博客？因为真实的声音，从来不是算法能替你生成的。种一棵树最好的时间是十年前，其次是现在。博客也是一样。

评论