Astro+Vercel部署博客

发布于 2023-09-01  530 次阅读



类似于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
image-20230708152345258

这里增加了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

标题部分 src/components

组件是你在 HTML 页面中可重复使用的代码单元。它可以是 Astro 组件 或是像 React 或 Vue 这样的前端组件。通常将你项目中所有组件都分组放在这个文件夹中。

这在 Astro 项目中是个习惯,但不过你可以自由地根据喜好进行管理。

src/layouts

标题部分 src/layouts

布局是特殊的组件,它将一些内容包裹在一个更大的页面布局中。通常用在 Astro 页面Markdown 页面中以定义页面的布局。

src/components 一样,这个目录也只是约定俗成。

src/pages

标题部分 src/pages

页面是一种用于创建新的页面的特殊组件。一个页面可以是一个 Astro 组件,也可以是一个 Markdown 文件,它代表你网站的一些内容页面。

src/styles

标题部分 src/styles

src/styles 目录下存储你的 CSS 或 Sass 文件仍只是个习惯。只要你的样式在 src/ 目录下的某个地方,并且正确导入,Astro 就能处理并压缩它们。

public/

标题部分 public/

public/ 目录用于文件和资源,它不会在 Astro 构建过程中处理。这些文件将不加修改地被直接复制到构建文件夹。

这种行为使得 public/ 成为存放图片和字体等普通资源或 robots.txtmanifest.webmanifest 等特殊文件的理想选择。

撰写组件

Astro 组件非常灵活的。通常情况下,Astro 组件会包含一些可在页面中复用的 UI,如 header 或简介卡。在其他时候,Astro 组件可能包含一个较小的 HTML 片段,像是常见的使 SEO 更好的 <meta> 标签集合。Astro 组件甚至可以包含整个页面布局。

Astro 组件中最重要的一点是,它们在构建过程中会被渲染成 HTML。即使你在组件内运行 JavaScript 代码,它也会抢先一步运行从呈现给用户的最终页面中剥离出来。其最终使得网站变得更快,且默认不用任何 JavaScript。

参考资料

  1. 入门指南 🚀 Astro 文档
  2. State of JavaScript 2022 (stateofjs.com)
  3. Getting Started | astro.new
  4. (1) Astro Crash Course in 60 Minutes - YouTube
届ける言葉を今は育ててる
最后更新于 2023-09-01