Astro安装和使用

目录

1. 前置准备

安装node.js。

安装pnpm。

2. 安装Astro

以使用AstroPaper主题为例。

pnpm create astro@latest --template satnaing/astro-paper

安装过程中选择好目录，别的都yes。

完成上面这步后，进入项目目录，安装依赖。

pnpm install

安装完成后可以运行一下看看。

pnpm run dev

3. 配置Astro

在src目录下进行配置。

config.ts中配置网站信息及一些基本表现。

constants.ts中配置社交链接和分享文章相关的内容。

src/pages/index.astro中配置主页内容。

src/pages/about.md中配置关于内容。

如果需要配置中文，可以直接让Agent生成。

4. 创建文章

在src/data/blog目录下创建文章文件。

frontmatter可以参考项目本身给出的文件。

在src/data/blog目录下可以创建子目录，实际网址会表现出层级关系。子目录名以_开头，则不会出现在网址中。

通过设置draft为true，可以将文章设置为草稿状态，不会在网站上显示。

在文章中使用## Table of contents可以自动生成目录，但是是英文的。我让AI加上了## 目录。

5. 部署

我将项目部署到CloudFlare Pages。

上传Github后，在CloudFlare中配置即可，可以在框架中选择Astro。

6. 后话

Astro本身比较新，自由度很高。

本来门槛也挺高的，但现在用AI就很方便了。

参考资料

1. AstroPaper的示例博客。