个人网站迁移到 Astro

toc

• 背景
• 框架
  • Astro 较好的地方
  • Next.js 较好的地方
  • Lighthouse 打分
• 部署
  • 测速截图
• 一些经验
  • 模板
  • 图片的处理
  • redirect

背景

旧版的个人网站使用 Gridsome 构建，已经运行了 2 年了。

虽然使用 Vue 做了一些定制，但是整体还是受限于 Gridsome。

再加上想学点新鲜玩意，所以就花点时间进行了升级。

框架

新建工程实际动手对比了 Next.js 和 Astro，最后选择了 Astro。

Astro 较好的地方

• 模板漂亮
• 对 MDX 的支持较好

Next.js 较好的地方

• 更出名

引用官方网站的介绍：

Astro 是一个一体化的 Web 框架，用于构建快速、以内容为中心的网站。

关键特性:

• 组件岛：一种新的 Web 架构，用于构建更快的网站。
• 服务器优先的 API 设计：将昂贵的 hydration 从用户的设备上移走。
• 默认情况下为零 JS：没有 JavaScript 运行时开销来降低您的速度。
• 边缘就绪：部署在任何地方，甚至是像 Deno 或 Cloudflare 这样的全球边缘运行时。
• 可定制：Tailwind，MDX，和 100+ 其他集成选择。
• UI 框架无关：支持 React, Preact, Svelte, Vue, Solid, Lit 等。

Astro 实现了 Islands Architecture。

Lighthouse 打分

* 其中 Best Practices打分 92 是因为百度统计 js 的问题

部署

强烈推荐 Vercel 这个平台，在准备好仓库的前提下，只需要 5 分钟就可部署好。

Vercel 是一个站点托管平台，提供 CDN 加速，同类的平台有 Netlify 和 Github Pages，相比之下，Vercel 国内的访问速度更快，并且提供 Production 环境和 development 环境，对于项目开发非常的有用的，并且支持持续集成，一次 push 或者一次 PR 会自动化构建发布，发布在 development 环境，都会生成不一样的链接可供预览。

测速截图

一些经验

模板

选个好模板，事半功倍。

我选的是 AstroPaper，迁移下来总时长也就 1 天。

图片的处理

跟据文档，Astro 支持两种处理图片的方式：

1. 放到 public/ 目录：像其他资源一样处理，框架不做任何处理。缺点就是内容的图片放在两处，管理不便。
2. 放到 src/ 目录：跟内容放一起，但是内容要使用 MDX 格式。

我选择了第 2 种方式，将图片放在 .mdx 文件同目录的 _img 目录里。这里使用 _img 目录是让 Astro 在扫描内容的时候，忽略掉对图片的扫描，否则控制台会有警告。

引入图片的代码如下：

import { Image } from 'astro:assets';
import cover from "./_img/cover.jpg";

<Image src={cover} alt="Cover" />

redirect

由于旧版的文章 URL 已经在别处引用，新版文章地址变化后，需要继续保持原 URL 继续有效。

使用了 Vercel 提供的机制。

vercel.json

{
  "redirects": [
    {
      "source": "/blog",
      "destination": "/posts",
      "permanent": true
    },
    {
      "source": "/projects",
      "destination": "/",
      "permanent": false
    }
}