用 Astro 搭建一个高性能博客

import Info from "../../components/mdx/Info.astro"; import Error from "../../components/mdx/Error.astro"; import Warning from "../../components/mdx/Warning.astro"; import Success from "../../components/mdx/Success.astro";

前言

本篇文章的目的旨在读者无须在多个窗口间跳动即可完成 Astro 的部署与个性化。需要下载的内容可在本页面一键下载

为什么选择 Astro

关于这个问题，你可以访问它的官方网站：为什么是 Astro? | Docs

如果你想了解我的想法，请移动至本文结尾

需要的环境

● 为了让 Astro 在你的系统上运行，你需要安装  Node.js、版本  v18.14.1  或更高版本。

点击下载： node-v20.11.1-x64

● [可选] 安装 pnpm：

npm install -g pnpm

我还需要什么

● 一个 GitHub 账号
● 一个合适的代码编辑器
● 掌握一定的 魔法-Magic

创建你的博客项目
{" "} Astro 不像 Hexo，可以安装多个主题，然后只用写几个配置文件就好了——还能随便切换主题。Astro 每个主题就是一个项目，而每位作者用的 `frontmatter` 格式可能都不一样，所以为了避免频繁迁移项目，请先选好自己要使用的主题。{" "}

选择你需要的主题

Astro 像 Hexo 一样，也有很多主题可用（更好的说法是项目模板）。你可以在 Themes | Astro 挑选自己需要的主题，这里我选择简单好用的 AstroPaper 作为示例。

拷贝主题 / 项目模板（仓库）

只需要使用包管理器即可（推荐使用 pnpm）：

# npm 6.x
npm create astro@latest --template satnaing/astro-paper
# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template satnaing/astro-paper
# yarn
yarn create astro --template satnaing/astro-paper

完成后的目录如下：

/
├── public/
│   ├── assets/
│   │   └── logo.svg
│   │   └── logo.png
│   └── favicon.svg
│   └── astropaper-og.jpg
│   └── robots.txt
│   └── toggle-theme.js
├── src/
│   ├── assets/
│   │   └── socialIcons.ts
│   ├── components/
│   ├── content/
│   │   |  blog/
│   │   |    └── some-blog-posts.md
│   │   └── config.ts
│   ├── layouts/
│   └── pages/
│   └── styles/
│   └── utils/
│   └── config.ts
│   └── types.ts
└── package.json

安装必要的内容：

npm installl

如果你迫不及待想看看自己的博客，可以启动 Astro 开发服务：

npm run dev

你应该能在终端中看到 Astro 正在以开发模式运行的提示信息。

在浏览器中输入 http://localhost:4321/ 即可即时预览。

个性化你的博客

config.ts

里面包含了网站的一些基本信息，下面是 AstroPaper 的 config.ts：

// file: src/config.ts
export const SITE = {
  website: "https://astro-paper.pages.dev/",
  author: "Sat Naing",
  desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
  title: "AstroPaper",
  ogImage: "astropaper-og.jpg",
  lightAndDarkMode: true,
  postPerPage: 3,
  scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
};

新文章

blog/ 文件夹中放的就是你的文章，用一般的 MarkDown 格式编写即可，注意里面的 frontmatter，不同的主题可能有不同的 frontmatter 规则，详见主题仓库的 README.md。

下面是 AstroPaper 的 frontmatter 规则：

部署你的博客项目

随便找一个托管平台部署即可，这里使用 Vercel 。

将你的项目托管至 GitHub

这个不用多说了吧：

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin 你的仓库地址
git push -u origin main

托管 Vercel

1. 进入 Vercel 然后注册一个账号；
2. 新建一个项目；
3. 选择你刚刚创建的仓库（这里拿之前的举例子）；
4. 点击 Deploy；
5. 看到满屏的烟花了吗？你成功了！

可能遇到的问题

1. 克隆项目时报错了： 这可能是 npm 镜像的问题，推荐使用官方镜像 + 使用魔法。

博主之前就是用了其他镜像导致祭了。

npm config set registry https://registry.npmjs.org/

1. 项目自己就报错了： 因为 Astro 的博客就是一个独立的项目： 所以这个很难有一个通用的解法，下面是可能的问题： ● 启用了作者的实验性内容（我就遇到过）； ● 文章格式不符合项目要求或者文件路径错误； ● ……
2. 本地没问题，部署报错了： 看看 pnpm-lock.yaml 和 package.json 有没有问题。
3. 其他（待添加）

尾声——我为什么选择 Astro

搭建个人博客有很多种途径，作者本人（我）曾在此吃了不少苦头。刚开始我买了云服务器准备使用 WordPress 搭建网站，结果发现这对服务器的要求太高了，WP 还会出一些奇怪的 BUG （比如某一个重要 .js 突然祭了，就写不了文章了）。于是乎，我找到了成本更低也更快捷的方法——Hexo。它拥有庞大的社区，解决方案也很成熟，很适合我这种没有基础的小白。问题就是，单从我个人体验来说，Hexo 并不像它简介说的一样快速，它太臃肿了，尤其是对于某些主题来说，东西太多太杂，资源浪费严重。如果你曾使用PageSpeed Insights (web.dev)测试过 Hexo 站点，会发现它真的慢……

下面是用 Butterfly 搭建的一个 Hexo 站点，仅有两篇文章：

我的老博客：

更不用说其他的了……

而下面是我现在的博客：

就我个人而言，Astro 是一个优于 Hexo 的替代品，那么我为什么不用 Astro 呢？

via サン猫の時間漂流

Invalid media:
image
image
image
image
image
image
image