安装Astrojs

第一步，安装 nodejs。
然后，输入 npm create astro latest
安装完成后，输入 npm run dev

项目结构分析

public文件夹：
①网站标识及图标：favicon.svg
②不需要Astro优化的图片
③字体文件：设置一个 fonts文件夹 woff2
④与爬虫相关： robots.txt/sitemap.xml
⑤可直接下载的静态资源

src文件夹：放项目源文件
①建立blog文件夹，下置markdown文件，里面放文章
②建立components文件夹
③建立images文件夹，下放需要优化的图片
④建立布局组件文件夹，layouts文件夹下 layout.astro
⑤建立Pages文件夹，下面放 index.astro
⑥css样式文件夹，下面放置相关样式

页面及路由

静态路由：
新建页面：about.astro
动态路由：data文件夹下面建一个 xxx.json
然后建立一个动态路由去调用 data里面的数据

Components

创建属于自己的组件，视频示例中放置的是 cart.astro
cart.astro的头部有一个类似Markdown当中Frontmatter的头部标签

Layout布局

Layouts文件夹下 layout.astro
包裹页面的公共结构

CSS

在普通的页面的 xxx.astro当中，就可以写css。
然后如果想变成全局样式，在定义元素前面 + global

可以再专门写一个文件，css文件，建一个style文件夹，下面写一个style.css

安装TailwindCss

Fonts字体

安装Fontsource, www.fontsource.org

img图片

public文件夹中创建图片
src文件夹下建立 images文件夹，放置图片 然后导入

项目当中引入 React框架

项目中引入Scripts脚本

xxx.astro 文件下面写入

inline script 内联脚本

Markdown页面

之间引入

安装其他框架如 react vue等

gpt搭配astro建站

略过

表单提交，GitHub Page

SEO设置

Head.astro组件

将Head.astro组件引入 xxx.astro

Head.astro组件下面需要包含的几个配置要素

title description robots

真实SEO测试

制作落地页，设置TDK
扩展着陆页文案

Astro + 无头CMS

下载LocalWP，创建网站。

重点：无头如何设置。

举例：

const response = await fetch("http://myastropage.local/wp-json/wp/v2/pages");
const pages = await response.json();

const selectedPage = page.find(page => page.slug == "astrojs")

xxxxxxx

Supabase

注册Supabase,
项目文件夹下注册一个lib,然后注册一个 Supabase.js