Astro 2.0正式发布,现代化静态站点生成器

简介: Astro 2.0正式发布,现代化静态站点生成器

大家好,我是 CUGGZ。

2023 年 1 月 24 日,Astro 2.0 正式发布。Astro 是一个现代化的轻量级静态站点生成器,用于构建以内容为中心的高性能网站,具有出众的开发者体验。下面就来看看 Astro 2.0 都有哪些更新!

Astro 的下一代前端架构(称为 Astro Islands)可以优化网站,在与前端框架结合使用(如 React、Svelte 和 Vue)时将加载速度提高 33%,并将 JavaScript 减少 90%。Astro 2.0 是第一个为 Markdown 和 MDX 提供完整类型安全的主要 Web 框架。Astro 现在可以通过内置的解析、验证和自动 TypeScript 类型生成来组织 Markdown。

Astro 2.0 的更新亮点如下:

  • 内容集合:Markdown 和 MDX 的自动类型安全;
  • 混合渲染:支持静态渲染和动态渲染;
  • 重新设计的错误 Overlays;
  • 改进的开发服务器 (HMR);
  • Vite 4.0;
  • 新的公开路线图。

Astro 2.0 目前已经在 npm 上可用。可以在终端中运行 npm i astro@latest 命令来升级现有项目,或者在浏览器中访问 astro.new 从头开始创建一个新项目。

Markdown和MDX的自动类型安全

33.webp.jpg

Astro 2.0 旨在解决现代 Web 开发中一个被忽视的问题:使用 Markdown/MDX 很难

当有数百个不同的文件时,不可能保持检查的一致性。 一个拼写错误就可能导致整个网站崩溃,需要进行修复。

Astro 2.0 通过新的 Content Collections API 重新定义了围绕内容的开发者体验。将 Markdown 和 MDX 文件组织到不同的集合中,Astro 会处理剩下的事情:

  • SEO最佳实践;
  • 信息性错误消息;
  • 自动生成类型;
  • 内联类型错误、自动完成等。

混合渲染:静态遇见动态

34.webp.jpg

近一年来,Astro 允许用户在静态 (SSG) 和服务端 (SSR) 构建输出之间进行选择。 静态网站提供了令人难以置信的性能,但它们缺乏为每个请求按需生成 HTML 的能力。

Astro 2.0 通过混合渲染将两全其美的技术结合在一起。 混合渲染让用户可以选择在不放弃已部署服务的情况下预渲染某些页面。预渲染提前构建页面,以便所有这些请求立即加载。

将静态和动态内容混合在一起为 Astro 开启了全新的可能性,包括:

  • 提高页面的渲染性能;
  • 提高大型站点的构建性能;
  • 将 API 添加到现有的静态站点。

重新设计的错误界面

35.webp.jpg

Astro 2.0 最重要的 UI 部分更改就是错误 overlay。当出现问题时,开发人员可以第一时间看到错误详情,这对于调试问题是很有用的。

Astro 2.0 以全新的 Astro 外观和感觉完全重新设计了错误体验。此外,新的错误 overlay 突出显示了比以前更多的信息,例如解决错误的有用提示和跳转到喜欢的编辑器中的代码的按钮。

开发服务器优化

36.webp.jpg

Astro 2.0 提高了 Astro 开发服务器的性能和可靠性,特别是在热模块重新加载(HMR)方面。

Astro 用户在过去几个月中受益于这些改进的增量发布,最终在 2.0 全部发布。 Astro 2.0 标志着所有这些改进首次在一个版本中一起提供。

Vite 4.0

37.webp.jpg

Astro 2.0 最重要的内部依赖项升级之一:Vite 4.0。

Vite 是支持 Astro 内部构建引擎的重要工具。 Vite 4.0 是 Vite 的最新版本,包括几项重要的改进和错误修复,有利于所有 Astro 用户。

Astro 公开路线图

38.webp.jpg

Astro 有一个开放的 RFC 流程,任何人都可以针对某项功能提出新想法,社区会在每周一次的 Discord 电话会议上开会讨论这些想法。

然而,在实践中,RFC 流程并没有为贡献者提供足够的指导。RFC 是冗长的,需要花费大量精力才能创建详细的文档。一些人发现这个过程令人望而生畏。还有一些人创建了 RFC,后来才意识到他们的想法是不可行的。

新的路线图通过降低新想法和提案的进入门槛来解决这些缺点。在编写正式的 RFC 之前,可以讨论甚至接受新的想法。Astro 维护人员还将在流程的早期提供指导,以帮助解决问题并讨论功能优先级。

Astro 2.0 Release Notes:astro.build/blog/astro-…

相关文章
|
7月前
|
JavaScript 开发者 UED
静态网站生成:使用VuePress建立静态文档网站
【4月更文挑战第24天】VuePress是一款基于Vue.js的静态网站生成器,适用于构建文档类网站,以其Markdown渲染和Vue组件支持深受喜爱。要使用VuePress搭建静态文档网站,首先确保安装Node.js和npm,然后全局安装VuePress。创建项目,编辑Markdown文件,自定义样式和配置,通过`vuepress dev`启动本地服务器预览,最后用`vuepress build`生成静态文件进行部署。VuePress简化了内容创建和网站定制,是开发文档网站的理想选择。
154 4
|
7月前
|
Devops Python
【DevOps】 Mkdocs 静态站点生成器 简介及实践
MkDocs是一个基于Python的静态站点生成器,它可以将Markdown格式的文档转换为漂亮的静态网站。MkDocs提供了一种简单而灵活的方式来创建文档,并支持多种主题和插件。
116 0
|
前端开发 JavaScript 开发工具
28款静态网站快速搭建生成器
28款静态网站快速搭建生成器
1165 0
|
安全 前端开发 JavaScript
使用Gatsby构建静态网站:快速、安全和可扩展
Gatsby是一款现代化的静态网站生成器,它结合了React和GraphQL的强大功能,可以帮助开发人员快速构建高性能、安全和可扩展的静态网站。本文将介绍如何使用Gatsby创建一个简单的静态网站,并展示一些实例代码来帮助您入门。
272 0
WordPress 的最佳设计和自定义页面布局生成器是什么吗?
WordPress 有很多设计和自定义页面布局生成器可供选择,它们都有不同的特点和优缺点,最佳的选择取决于您的需求和偏好。以下是一些常用和受欢迎的 WordPress 页面布局生成器:
|
XML JavaScript 前端开发
【静态Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
【静态Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
|
域名解析 JavaScript 小程序
1分钟部署vue静态网站,借助云开发静态网站部署属于自己的网站
1分钟部署vue静态网站,借助云开发静态网站部署属于自己的网站
889 0
|
XML JavaScript 前端开发
【Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
【Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
|
Web App开发 移动开发 JavaScript
新手必会的静态站点生成器——Gridsome
Gridsome 通过使用PRPL模式将超高性能构建到每个页面中。您可以获得开箱即用的代码拆分、资产优化、渐进式图像和链接预取。Gridsome 网站默认获得几乎完美的页面速度分数。通过本教程中,你将从头开始构建自己的应用,分别使用 Gridsome -Cli 和 云开发平台
1178 3
新手必会的静态站点生成器——Gridsome
|
负载均衡 Java 应用服务中间件
基于动态、静态内容结合的网络优化案例| 学习笔记
快速学习基于动态、静态内容结合的网络优化案例。
基于动态、静态内容结合的网络优化案例| 学习笔记