如何用 Astro 快速搭建个人博客？

哈！各位朋友，大家好。咱今天聊点技术，说说怎么用 Astro 快速搭建一个个人博客。别kan标题长，其实过程hen简单，而且 Astro 这玩意儿特别友好。我之前也是从零开始的，踩过不少坑，所以想把经验分享给你们。说实话，我一直觉得搭建博客挺有意思的，Ke以自由发挥，打造属于自己的小天地。

简单来说Astro 就是一个静态站点生成器 ，它让你用现代前端技术来构建网站，然后把结果提前渲染好，部署到 CDN 上。这样速度快不说SEO 优化也Zuo得hen好。

理由有hen多啊：

开发体验好： Astro 支持各种前端框架，你熟悉的douKe以用。

性Neng优： 静态站点加载快得惊人！

SEO Friendly： 搜索引擎友好是标配！

易于维护： 代码结构清晰简洁

得安装 Node.js 和 pnpm, 别问我为什么 pnpm, 因为它比 npm 快多了, 而且在 Monorepo 项目里geng方便。

npm install -g pnpm

使用 Astro CLI 创建项目：

npm create astro@latest my-blog --template nextstart

运行 pnpm install 安装必要的依赖包。

在 src/pages 目录下创建你的博客文章页面 并写上内容。

import { defineCollection } from 'astro:collections';export const collections = defineCollection,      pubDate: z.coerce.date,      updatedDate: z.coerce.date.optional,      description: z.string.optional,      tags: z.array).default,      category: z.string.optional,      draft: z.boolean.default,    }),  });

/* Shiki 代码块背景 / background-color: var !important; / 暗色模式 */ color: var !important; background-color: var;

// 用 Shiki 高亮的代码片段 //确保 CSS 背景颜色正确覆盖// 使用 client load 指令//设置暗黑模式样式//注意前缀和后缀的区别