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

news2024/10/6 18:08:23
  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?

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

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

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.coloradmin.cn/o/973852.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Sigrity Power DC 19 导入translator转换后文件显示unsupported file

Sigrity Power DC 19 导入translator转换后文件显示unsupported file的解决办法 先create New Workspace,然后load Layout 选择Load an existing Layout 选择spd文件 List item

Transform和小写transform的关系

1.为什么Transform类是保护的不能通过new 来实例化对象,也没有静态函数,而Rotate()这种方法却属于它,该如何访问? Transform 类还是被保护的不允许用户修改! protected Transform(); 是一个受保护的构造函数,不能直接实例化 Transform 类。 2.为甚么transform可以访问Tr…

华为数通方向HCIP-DataCom H12-821题库(单选题:281-300)

第281题 OSPF 协议对邻居路由器之间交换的所有数据包都具有认证能力,在VRP系统中,OSPF支持以下哪一种算法? A、DES B、MD5 C、AES D、RSA 答案:B 解析: 在VRP系统中,OSPF协议支持的认证算法是MD5。 第282题 以下关于堆叠拓扑连接方式的描述,错误的是哪一项? A、根…

Meta AI 多语言阅读理解数据集 Belebele

Meta AI 宣布推出一款涵盖 122 种语言变体的多语言阅读理解数据集,名为 Belebele。“我们希望这项工作能够引发围绕 LLM 多语言性的新讨论”。 BELEBELE 是首个跨语言并行数据集,可以直接比较所有语言的模型性能。该数据集涵盖了 29 种脚本和 27 个语系中…

2.4 PE结构:节表详细解析

节表(Section Table)是Windows PE/COFF格式的可执行文件中一个非常重要的数据结构,它记录了各个代码段、数据段、资源段、重定向表等在文件中的位置和大小信息,是操作系统加载文件时根据节表来进行各个段的映射和初始化的重要依据…

百度自研高性能ANN检索引擎,开源了

作者 | Puck项目组 导读 Puck是百度自研的开源ANN检索引擎。Puck开源项目包含两种百度自研的检索算法,以高召回、高准确、高吞吐为目标,适用于多种数据规模和场景。随着业务发展不断的优化和迭代,进行充分的技术开发和测试,确保了…

深入剖析计算机网络和操作系统:面试必备知识解析

深入剖析计算机网络和操作系统的核心概念和面试题,帮助大家全面理解和掌握这两个重要领域的关键知识,为面试做好准备。 计算机网络 什么是TCP拥塞控制?它的目的是什么? TCP拥塞控制是一种机制,用于在网络中控制数据流…

简述电子企业MES管理系统解决方案的实施策略

引言:在电子制造企业中,随着产品种类的增多和订单数量的增长,传统的手工管理方式已经无法满足企业的生产需求。为了提高生产效率,降低成本,提高订单的履行速度和准确性,电子企业需要实施MES管理系统。本文将…

【C++】STL-函数对象 + 谓词

1.函数对象使用 #include <iostream> using namespace std;//STL-函数对象&#xff08;仿函数&#xff09;class MyAdd { public:int operator()(int v1, int v2){return v1 v2;} }; //1、函数对象在使用时&#xff0c;可以像普通函数那用调用&#xff0c;可以有参数&am…

NineData 中标移动云数据库传输项目

导读近日&#xff0c;玖章算术 NineData 智能数据管理平台成功中标《2023 年移动云数据库传输服务软件项目》&#xff0c;中标金额为 406 万。这标志着玖章算术 NineData 平台已成功落地顶级运营商行业&#xff0c;并在数据管理方面实现了大规模应用实践。 NineData 中标 2023 …

2023年Python依然是霸主?十大企业编程语言揭秘!

计算机编程语言是现代企业和科技领域不可或缺的一部分&#xff0c;它们为程序员提供了与计算机进行交流的工具。就像人类有多种交流语言一样&#xff0c;计算机编程语言也多种多样&#xff0c;每种语言都有其独特的特点和用途。随着数字化时代的来临&#xff0c;企业在选择编程…

ChatGPT AIGC 一键总结SQL优化所有知识点

SQL优化一直是程序员非常关注的内容,使用ChatGPT AIGC结合思维导图进行总结SQL优化的所有知识点内容。 非常简单实用的操作,就得到了如何进行SQL优化的所有细节。 更多内容见: AIGC ChatGPT ,BI商业智能, 可视化Tableau, PowerBI, FineReport, 数据库Mysql Oracle, Off…

Cyber RT学习---5.Cyber RT通信机制解析与实践

5.Cyber RT通信机制解析与实践 5.1 通信机制简介 5.1.1 话题通信 模式&#xff1a; 以发布订阅的方式实现不同节点之间数据交互的通信模式。 如图1-1所示&#xff0c;Listener-Talker通信首先创建了两个Node&#xff0c;分别是Talker Node和 Listener Node。 每个Node实例化…

精通期权短线交易的技巧,从此成为投资高手!

投资期权最常见的两种交易方式就是长线交易和短线交易&#xff0c;每一种交易方式都有自己的特点和优势&#xff0c;适合不同类型和目的的投资者。下面给大家分享一些精通期权短线交易的技巧&#xff0c;从此成为投资高手&#xff01;希望能帮到大家。本文来自&#xff1a;期权…

中国人保为天能电力器具承保产品责任险,为消费者保驾护航!

战略达成&#xff0c;保驾护航 2023年7月&#xff0c;河北天能电力器具制造有限公司与世界五百强之一的综合性保险公司——中国人民财产保险股份有限公司达成战略合作&#xff0c;签署产品安全责任险保单&#xff0c;携手为消费者保驾护航&#xff01; 产品质量是当下企业生存发…

Unity 中 Pivot 与 Center,重置模型物体的轴心为中心

文章目录 1. 概念2. 动态计算正确的模型中心点Center3. 重置模型物体的轴心为中心 1. 概念 在 Unity 面板的左上角有两个按钮&#xff0c;在本文中主要研究 Pivot/Center Pivot&#xff08;轴心&#xff09;&#xff1a;模型的真实位置&#xff0c;是由建模软件设定的可在模…

mysql trace

optimizer_trace 它可以跟踪优化器做出的各种决策&#xff08;比如访问表的方法、各种开销计算、各种转换等&#xff09;&#xff0c;并将跟踪结果记录到 information_schema 数据库中的 optimizer_trace 表中。 mysql 默认是关闭 追踪的 开启、并设置格式为 josn,同时设置trac…

光环云出席Enjoy出海AIGC主题研讨会,助力企业迎接AI时代机遇与挑战

AIGC的崛起&#xff0c;为2023年的全球化突围之路拓展了想象空间。 从年初至今&#xff0c;OpenAI和ChatGPT高举高打&#xff0c;很大程度上起到了教育市场的作用&#xff1b;此外&#xff0c;Meta推出大模型&#xff0c;Snapchat、Soul、字节等大厂或上线或内测聊天机器人&…

正中优配:纺织服装行业景气向上 多因素支撑稀土价格上涨

昨日&#xff0c;沪深两市股指盘中放量拉升&#xff0c;沪指、深成指涨超1%&#xff0c;上证50指数涨近2%。截至收盘&#xff0c;沪指涨1.4%报3177.06点&#xff0c;深成指涨1.41%报10611.74点&#xff0c;创业板指涨0.85%报2118.03点&#xff0c;上证50指数涨1.79%&#xff1b…

递归算法学习——有效的数独,解数独

一&#xff0c;有效的数独 1.题意 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#x…