Astro建站教程:安装nodejs,npm下载Astro,安装扩展

news/2024/7/10 23:07:15 标签: Astro, Wordpress, PHP, Blog, Windows, JavaScript, typescript
  1. 下载Nodejs LTS版:https://nodejs.org/en
    安装步骤全默认即可,安装路径可以根据自己的爱好更改
  2. 在桌面右键打开cmd或powershell,输入node -v和npm -v测试是否安装成功
  3. 浏览器打开https://docs.astro.build/en/install/auto/
    复制里面的npm create astro@latest这行代码,在本地的cmd中输入并回车,然后输入y
    这里的Template copied应该是Use blog template才对,不要选错了!TypeScript那项可以选Yes的,git那项要选No!
  4. 在VS Code安装Astro扩展
  5. 在文件夹的根目录输入npm run dev运行Astro
  6. 运行成功,浏览器打开http://localhost:4321/查看
  7. 建立博客

    你可以在这个路径编写Markdown,我认为有能力进行以上操作的人应该都会写Markdown对吧,现在,你可以像写Markdown文件一样写博客了

    在这里,你能修改以下的内容:

Astro_17">为什么选择Astro

Astro 是一款 一体化 Web 框架 ,用于构建 快速、 以内容为中心的网站。

为什么选择 Astro 而不是其他 Web 框架? 以下五个核心设计原则可帮助解释我们构建 Astro 的原因、它要解决的问题以及为什么 Astro 可能是您的项目或团队的最佳选择

Astro_22">Astro是…

  • 以内容为中心 :Astro 专为内容丰富的网站而设计。
  • 服务器优先 :网站在服务器上呈现 HTML 时运行速度更快。
  • 默认情况下很快 :在 Astro 中建立一个慢速网站应该是不可能的。
  • 易于使用 :您无需成为专家即可使用 Astro 构建某些东西。
  • 功能齐全,但灵活 :超过 100 多个 Astro 集成可供选择。

以内容为中心

Astro 专为构建内容丰富的网站而设计。 这包括大多数营销网站、发布网站、文档网站、博客、投资组合和一些电子商务网站。

相比之下,大多数现代 Web 框架都是为构建 Web 应用程序 而设计的。 这些框架最适合在浏览器中构建更复杂、类似应用程序的体验:登录管理仪表板、收件箱、社交网络、待办事项列表,甚至像 Figma 和 Ping 这样的原 生 应用 程序 。

这是了解 Astro 的最重要的差异之一。 Astro 对内容的独特关注让 Astro 能够做出权衡并提供无与伦比的性能功能,而这些功能对于更多以应用程序为中心的 Web 框架的实施来说是没有意义的。

服务器优先

Astro 尽可能利用服务器端渲染而不是客户端渲染。 这与传统服务器端框架(PHP、WordPress、Laravel、Ruby on Rails 等)数十年来一直使用的方法相同。 但您不需要学习第二种服务器端语言来解锁它。 对于 Astro,一切仍然只是 HTML、CSS 和 JavaScript(或者 TypeScript,如果您愿意的话)。

这种方法与其他现代 JavaScript Web 框架(如 Next.js、SvelteKit、Nuxt、Remix 等)形成鲜明对比。 这些框架需要对整个网站进行客户端渲染,并包括服务器端渲染,主要是为了解决性能问题。 这种方法被称为 单页应用程序 (SPA) 方法相反, 与 Astro 的多页面应用程序 (MPA) 。

SPA 模式有其优点。 然而,这些是以额外的复杂性和性能权衡为代价的。 这些权衡会损害页面性能,包括 交互时间 (TTI) 等关键指标,这对于首次加载性能至关重要的以内容为中心的网站来说没有多大意义。

默认情况下很快

良好的性能始终很重要,但 对于以内容为中心的网站尤其 重要。 事实证明,糟糕的表现会导致您失去参与度、转化率和金钱。 例如:

  • 每快 100 毫秒 → 转化次数增加 1%( Mobify ,每年收入 +380,000 美元)
  • 速度提高 50% → 销售额增加 12% ( AutoAnything )
  • 速度提高 20% → 转化率提高 10%( 家具村 )
  • 速度提高 40% → 注册量增加 15% ( Pinterest )
  • 速度提高 850 毫秒 → 转化率提高 7% ( COOK )
  • 每慢 1 秒 → 用户减少 10% ( BBC )

在许多 Web 框架中,很容易构建一个在开发过程中看起来很棒的网站,但在部署后加载速度却非常慢。JavaScript通常是罪魁祸首,因为用户的手机和低功耗设备很少能与开发人员笔记本电脑的速度相匹配。

Astro 的神奇之处在于它如何将上面解释的两个价值观结合起来——内容聚焦与服务器优先的 MPA 架构——进行权衡并提供其他框架无法提供的功能。 结果是每个网站都具有惊人的开箱即用的网络性能。 我们的目标:用 Astro 构建一个缓慢的网站几乎是不可能的。

Astro 网站的 加载速度可提高 40%,而 JavaScript 数量可减少 90% 与使用最流行的 React Web 框架构建的同一网站相比, 。 但不要相信我们的话:看着 Astro 的表现让 Ryan Carniato(Solid.js 和 Marko 的创建者) 哑口无言

便于使用

Astro 的目标是让每个 Web 开发人员都可以使用。 Astro 的设计宗旨是让人感觉熟悉且平易近人,无论技能水平或过去的 Web 开发经验如何。

我们首先确保您可以使用您已经了解的任何最喜欢的 UI 组件语言。 React、Preact、Svelte、Vue、Solid、Lit 和其他几个都支持在 Astro 项目中创建新的 UI 组件。

我们还想确保 Astro 也有一个很棒的内置组件语言。 为此,我们创建了自己的 .astro用户界面语言。 它深受 HTML 的影响:任何有效的 HTML 片段都已经是有效的 Astro 组件! 但它还结合了一些我们最喜欢的从其他组件语言借用的功能,例如 JSX 表达式 (React) 和默认的 CSS 作用域(Svelte 和 Vue)。 这种与 HTML 的接近性还使得使用渐进增强和常见的可访问性模式变得更加容易,而无需任何开销。

Astro 的设计比其他 UI 框架和语言简单。 造成这种情况的一个重要原因是 Astro 被设计为在服务器上渲染,而不是在浏览器中渲染。 这意味着您不需要担心:钩子(React)、过时的闭包(也是 React)、引用(Vue)、可观察量(Svelte)、原子、选择器、反应或派生。 服务器上没有反应性,因此所有复杂性都消失了。

我们最喜欢的格言之一是: 选择复杂性。 我们设计 Astro 是为了尽可能地消除开发人员体验中“所需的复杂性”,特别是当您第一次使用时。 您可以仅使用 HTML 和 CSS 在 Astro 中构建一个“Hello World”示例网站。 然后,当您需要构建更强大的东西时,您可以逐步获取新功能和 API。

功能齐全但灵活

Astro 是一款一体化 Web 框架,包含构建网站所需的一切。 Astro 包括组件语法、基于文件的路由、资产处理、构建过程、捆绑、优化、数据获取等。 您可以构建出色的网站,而无需超出 Astro 的核心功能集。

如果您需要更多控制,可以通过超过 100 种集成 来扩展 Astro,例如 React 、 Svelte 、 Vue 、 Tailwind CSS 、 MDX 等。 连接您最喜欢的 CMS 或 部署到您最喜欢的主机。 只需一个命令即可

Astro 与 UI 无关,这意味着您可以 自带 UI 框架 (BYOF) 。 React、Preact、Solid、Svelte、Vue 和 Lit 均在 Astro 中得到正式支持。 您甚至可以在同一页面上混合搭配不同的框架,使未来的迁移更加容易,并防止项目锁定到单个框架。


http://www.niftyadmin.cn/n/5001791.html

相关文章

代码随想录算法训练营第42天 | ● 01背包问题,你该了解这些! ● 01背包问题,你该了解这些! 滚动数组 ● 416. 分割等和子集

文章目录 前言一、01背包问题,你该了解这些!二、01背包问题,你该了解这些! 滚动数组三、416. 分割等和子集总结 前言 01背包 一、01背包问题,你该了解这些! 确定dp数组以及下标的含义 对于背包问题&#x…

国内 11 家通过备案的 AI 大模型产品

国内 11 家通过《生成式人工智能服务管理暂行办法》备案的 AI 大模型产品将陆续上线。 一、北京5家 1、百度的 “文心一言”https://yiyan.baidu.com 2、抖音的 “云雀”,基于云雀大模型开发的 AI 机器人 “豆包” 开始小范围邀请测试。用户可通过手机号、抖音或…

【AIGC专题】Stable Diffusion 从入门到企业级实战0402

一、概述 本章是《Stable Diffusion 从入门到企业级实战》系列的第四部分能力进阶篇《Stable Diffusion ControlNet v1.1 图像精准控制》第02节, 利用Stable Diffusion ControlNet Openpose模型精准控制图像生成。本部分内容,位于整个Stable Diffusion生…

跨源资源共享(CORS)Access-Control-Allow-Origin

1、浏览器的同源安全策略 没错,就是这家伙干的,浏览器只允许请求当前域的资源,而对其他域的资源表示不信任。那怎么才算跨域呢? 请求协议http,https的不同域domain的不同端口port的不同 好好好,大概就是这么回事啦&…

react16之前diff算法的理解和总结

此篇文章所讨论的是 React 16 以前的 Diff 算法。而 React 16 启用了全新的架构 Fiber,相应的 Diff 算法也有所改变,本片不详细讨论Fiber。 fiber架构是为了支持react进行可中断渲染,降低卡顿,提升流畅度。 react16之前的版本&…

latex 参考文献作者列表自定义格式

鉴于各种情况,有时需要对参考文献中的作者名字列表进行一定的修改, 比如有的期刊要求当参考文献中的作者人数多于两人时只列出第一作者,其余作者使用et al.代替 当作者人数等于两人时,使用and连接两个作者的名字 当作者只有一个人…

细且全面介绍typescript的枚举类型enum操作和应用 代码案例分析

这里写目录标题 枚举类型的定义枚举类型的使用枚举类型的应用1. 状态管理2. 配置管理3. API调用 总结 枚举类型的定义 在TypeScript中,枚举类型是一种特殊的数据类型,用于定义一组有限的命名常量。枚举类型的定义使用关键字enum。下面是一个简单的枚举类…

探秘MySQL三个神秘隐藏列(mysql三个隐藏列) rownum、rowid、oid

探秘MySQL三个神秘隐藏列 MySQL是一款流行的关系型数据库管理系统,被广泛应用于Web应用程序开发和数据存储。然而,MySQL也有一些神秘的隐藏列,这些隐藏列可以帮助我们更好地管理和查询数据。 接下来,我们将探秘MySQL三个神秘隐藏…