Astro是一个用于生成文档、静态博客等内容驱动的静态网站生成工具。本站点就是使用Astro生成，并在GitHub Pages上进行发布。

开始

在Astro官网上可以找到很多已有的网站模板，我选择的是博客模板。

随便找一处空地，输入以下命令来通过这个模板新建一个项目：

pnpm create astro@latest --template blog

生成步骤和create-vite和create-react-app什么的差不多，在此省略。在此使用TypeScript，并选择了最严格的那款配置文件。

接下来用VSCode打开项目目录。不过这时候还不能开始作业，因为相关依赖还没有安装完毕，输入以下命令安装依赖：

pnpm i

个人习惯额外安装ESLint和Prettier并配置好相关插件，不过其实没必要。

工作空间布局

我们再把目光调转回工作空间，认识一下astro项目下的各个文件夹。

• components 文件夹下放置着常用的Astro组件。
• content 文件夹下放置的是Astro的各种Markdown或其他内容文件，比如说我们的博文会放置在其下的blog文件夹中，包括MD和MDX格式的文件。
• layouts 文件夹不是很重要，不过习惯上用这个文件夹来存储一些模板网页布局，比如说我们博文的格式。
• pages 文件夹下放置着网页的路由布局，每一个.astro文件或者文件夹下的index.astro都对应着一个路由。特别的，像[...somename].astro这样的名称意味着在该文件所在路由下有不确定数量的类似页面，当然index.astro除外。
• styles 文件夹下习惯上用来放置网页CSS样式。
• .astro 文件夹下放置着由Astro自动生成的辅助开发用文件，不要动就完事了。

Astro组件

.astro文件都是Astro组件，是一种模板组件，通常上半部分可以写JS，下半部分写类似JSX的网页布局（当然也可以写TypeScript）。

Astro组件的写法跟Vue组件比较像，也可以从一个Astro组件中引入其他Astro组件，如果配置好了那么还可以引入React，Vue等组件。

每个Astro组件还会被暴露一个Astro变量，可以通过Astro.props获取一些有用的关于本页面的信息，比如说markdown文件或者是markdown的描述什么的。

astro.config.js

为什么他们要用mjs做后缀？太别扭了。所以我改成js做后缀，毕竟都4202年了谁还写CommonJS啊，不会吧不会吧，不会真有人还在cjs上踌躇不前吧

astro.config.js是整个Astro项目的配置文件，可以在内部配置Astro项目相关的配置。

比如说加入React支持，然后接着在Astro里面堆React。

小结

总的来说，Astro没有什么特别复杂的概念，只要知道你该在哪里写你的代码就好了。