类似于hexo,这里使用Astro部署博客.创建一个Github项目部署在Vercel,主要目的是记录一些琐碎的学习记录,顺便学习一下很热的Astro.
Astro介绍
Astro 是集多功能于一体的 Web 框架，用于构建快速、以内容为中心的网站。
主要特性
- 组件群岛: 用于构建更快网站的新 web 架构。
- 服务器优先的 API 设计: 从用户设备上去除高成本的 Hydration。
- 默认零 JS: 没有 JavaScript 运行时开销来减慢你的速度。
- 边缘就绪: 在任何地方部署，甚至像 Deno 或 Cloudflare 这样的全球边缘运行时。
- 可定制: Tailwind, MDX 和 100 多个其他集成可供选择。
- 不依赖特定 UI: 支持 React, Preact, Svelte, Vue, Solid, Lit 等等
可以使用[codesandbox](CodeSandbox: Code, Review and Deploy in Record Time)与[stackblitz](StackBlitz | Instant Dev Environments | Click. Code. Done.)在线写一些代码.
可以在这个网站Getting Started | astro.new玩玩一些常用模板.
也有其他用户的例子Themes | Astro，关于主题的.
另外可以使用astro方便添加其他库,比如添加tailwind.
npx astro add tailwind
这里增加了tailwind以及react
Astro的配置
在
astro.config.mjs文件中自定义 Astro 的运行方式。它在 Astro 项目中十分常见，所有官方的示例模板和主题都默认附带。
这里我使用了Blog模板,用于记录博客的.
- Edit this page in
src/pages/index.astro- Edit the site header items in
src/components/Header.astro- Add your name to the footer in
src/components/Footer.astro- Check out the included blog posts in
src/pages/blog/- Customize the blog post page layout in
src/layouts/BlogPost.astro
项目结构
Astro 为你的项目提供了一个有想法的文件夹布局。每个 Astro 项目的根目录下都应该包括以下目录和文件：
src/*- 你的项目源代码（组件、页面、样式等）。public/*- 你的非代码、未处理的资源（字体、图标等）。package.json- 项目列表。astro.config.mjs- Astro 配置文件（可选）。tsconfig.json- TypeScript 配置文件（可选）。
src/components
组件是你在 HTML 页面中可重复使用的代码单元。它可以是 Astro 组件 或是像 React 或 Vue 这样的前端组件。通常将你项目中所有组件都分组放在这个文件夹中。
这在 Astro 项目中是个习惯，但不过你可以自由地根据喜好进行管理。
src/layouts
布局是特殊的组件，它将一些内容包裹在一个更大的页面布局中。通常用在 Astro 页面和 Markdown 页面中以定义页面的布局。
和 src/components 一样，这个目录也只是约定俗成。
src/pages
页面是一种用于创建新的页面的特殊组件。一个页面可以是一个 Astro 组件，也可以是一个 Markdown 文件，它代表你网站的一些内容页面。
src/styles
在 src/styles 目录下存储你的 CSS 或 Sass 文件仍只是个习惯。只要你的样式在 src/ 目录下的某个地方，并且正确导入，Astro 就能处理并压缩它们。
public/
public/ 目录用于文件和资源，它不会在 Astro 构建过程中处理。这些文件将不加修改地被直接复制到构建文件夹。
这种行为使得 public/ 成为存放图片和字体等普通资源或 robots.txt 和 manifest.webmanifest 等特殊文件的理想选择。
撰写组件
Astro 组件非常灵活的。通常情况下，Astro 组件会包含一些可在页面中复用的 UI，如 header 或简介卡。在其他时候，Astro 组件可能包含一个较小的 HTML 片段，像是常见的使 SEO 更好的
<meta>标签集合。Astro 组件甚至可以包含整个页面布局。Astro 组件中最重要的一点是，它们在构建过程中会被渲染成 HTML。即使你在组件内运行 JavaScript 代码，它也会抢先一步运行从呈现给用户的最终页面中剥离出来。其最终使得网站变得更快，且默认不用任何 JavaScript。
Comments NOTHING