学习系列目录
热门话题系列
什么是Astro?
Astro(40K star) 是一个为构建内容驱动型网站(如博客、营销和电子商务网站)而设计的Web框架。它的一个显著特点是默认情况下尽可能少地发送客户端JavaScript,除非用户另有指定。这种做法被称为“Islands(岛屿)架构”,它允许开发者在同一个项目中结合使用不同的UI框架,如React、Svelte和Vue。
Astro专注于内容优先、对搜索引擎优化(SEO)友好的网站,以及它提供的良好的开发者体验(DX),这使得它成为构建现代静态Web应用的一个引人注目的选择。
Astro使用的大公司案例和行业反馈
Astro自推出以来,受到了许多大型技术公司的青睐,例如:Google Firebase, MicroSoft Fluent2。
“对我们来说,Astro能够生成完全静态的文件非常重要。这对我们非常有利,因为我们希望能够防御多种问题,例如DDoS攻击。因此,拥有一个高度依赖后端服务的产品可能会导致问题。在这个时代,拥有一个完全静态的网站,并将其托管在Azure上,对于安全性和可扩展性来说非常有利。”
— Tudor Popa, 微软工程经理(Fluent 2)
Astro的主要应用场景及优势
Astro最适用于构建快速、高效的静态网站,如博客、文档站点以及营销网站。由于其出色的性能表现,Astro也常被用于电子商务网站的前端开发,以及任何对SEO和加载速度有较高要求的场景。
谷歌的核心网络指标(Core Web Vitals,简称CWV)是一组标准化的三项指标,用以衡量用户在浏览网页时的体验。每个指标分别测量用户体验的不同方面——加载速度、交互响应性和视觉稳定性,三者共同决定了网站的整体性能。
在所有已知使用某一框架构建的网站中,Astro的表现尤为突出,它是唯一一个Google核心网页指标(CWV)合格率超过50%的框架。而SvelteKit也超过了平均合格率(40.5%),其他框架则未能达到这一水平。
Astro的技术原理
Astro框架的技术原理主要基于以下几个方面,这些特性共同定义了Astro的强大性能和开发者体验:
-
默认情况下不发送任何客户端JavaScript(Ships zero client-side JavaScript by default):Astro默认生成的网站不包含客户端JavaScript代码,使页面加载速度极快,同时提升了网站的总体性能。
-
Islands(组件级部分水合):Astro采用了一个独特的“Islands”架构,允许开发者独立地为需要客户端交互的组件加载JavaScript,而不是整个页面。这一点类似于懒加载,但是在组件级别上实现,从而最大化性能。
-
View Transitions(视图转换):Astro提供了视图过渡和页面切换的功能,即使在一个静态网站中也能实现平滑的用户体验,而这通常仅在客户端JavaScript框架中才能见到。
-
Great DX(出色的开发体验):Astro注重开发者体验,提供了快速的重载、有用的错误消息和丰富的开发文档,确保开发者能够轻松上手并享受编码过程。
-
官方和用户提交的起始模板和主题:Astro社区及其官方渠道提供了多种起始模板和主题,这使得快速启动新项目变得简单,同时也能够灵活地适应不同的设计需求。
-
官方和用户提交的集成:Astro提供了广泛的集成支持,包括但不限于对React、Vercel、Tailwind等的支持。这意味着开发者可以轻松地将Astro与他们已经熟悉和喜爱的工具和框架结合起来,无缝地融入现有的工作流程中。
使用Astro构建一个简单的博客站点
以下是构建一个简单Astro博客站点的基本步骤:
为了创建一个使用Astro框架的简单博客网站,你需要遵循以下步骤和目录结构。这里假设你已有基本的Node.js和npm/yarn知识,并已安装在你的开发环境中。
-
安装Astro CLI:
npm init astro
或者如果你使用yarn:
yarn create astro
然后按照提示完成创建新项目的过程。
-
项目目录结构:
假设你的博客项目结构如下:
/src ├── /components │ └── Tag.astro ├── /pages │ ├── index.astro │ ├── post1.astro │ ├── post2.astro │ └── post3.astro └── /styles └── global.css
-
创建博客文章:
在
/src/pages/
目录下创建.astro
文件来表示你的博客文章。例如:<!-- src/pages/post1.astro --> --- // Frontmatter script const title = "博客标题1"; const date = "2024-03-01"; const tags = ["tag1", "tag2"]; --- <html> <head> <title>{title}</title> </head> <body> <h1>{title}</h1> <p>发布日期: {date}</p> <p>这是第一篇博客文章的内容。</p> <footer> <p>标签:</p> {/* 使用Tag组件展示标签 */} {tags.map(tag => <Tag tag={tag} />)} </footer> </body> </html>
重复这个过程,创建
post2.astro
和post3.astro
。 -
创建标签组件:
在
/src/components/
目录下创建Tag.astro
文件:<!-- src/components/Tag.astro --> <span class="tag">{props.tag}</span> <style> .tag { background-color: #e0e0e0; padding: 5px 10px; margin: 2px; border-radius: 5px; } </style>
-
添加全局样式:
在
/src/styles/
目录下创建global.css
:/* src/styles/global.css */ body { font-family: Arial, sans-serif; }
然后在
src/pages/index.astro
中引入它:<!-- src/pages/index.astro --> --- import "../styles/global.css"; --- <html> <head> <!-- ... --> </head> <body> <!-- 网站内容 --> </body> </html>
-
启动本地开发服务器:
npm run dev
或者如果你使用yarn:
yarn dev
-
构建项目:
当你准备将你的网站部署到生产环境时:
npm run build
或者如果你使用yarn:
yarn build
原文链接:https://juejin.cn/post/7341288345782616105 作者:函数猫FunctionCat