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

  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.mzph.cn/news/73634.shtml

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

相关文章

安全狗陈奋:数据安全需要建立在传统网络安全基础之上

8月22日-23日,由创业邦主办的“2023 DEMO WORLD 企业开放式创新大会”在上海顺利举行。 作为国内云原生安全领导厂商,安全狗受邀出席此次活动。 本次大会以“拥抱开放”为主题,聚焦开放式创新,通过演讲分享、专场对接、需求发布…

你用过 Maven Shade 插件吗?

文章首发地址 Maven Shade插件是Maven构建工具的一个插件,用于构建可执行的、可独立运行的JAR包。它解决了依赖冲突的问题,将项目及其所有依赖(包括传递依赖)合并到一个JAR文件中。 下面是对Maven Shade插件的一些详解&#xff…

MySQL知识笔记——初级基础(实施工程师和DBA工作笔记)

老生长谈,MySQL具有开源、支持多语言、性能好、安全性高的特点,广受业界欢迎。 在数据爆炸式增长的年代,掌握一种数据库能够更好的提升自己的业务能力(实施工程师)。 此系列将会记录我学习和进阶SQL路上的知识&#xf…

Revit SDK 介绍:RayTraceBounce 光线反弹

前言 这个例子模拟光线反弹。 内容 通过修改参数,从(0,0,0)点向(1,0,0)方向射出光线,经过若干次反弹之后的结果。如图所示: 在Revit API 中&…

Codeforces-Round-895-Div-3

A. Two Vessels 题目翻译 你有两个装有水的容器。第一个容器含有 a a a克水,第二个容器含有 b b b克水。这两艘船都非常大,可以容纳任意数量的水。 您还有一个空杯子,最多可容纳 c c c克水。 一次,您可以从任何容器中舀出多 c…

go语言基本操作--四

面向对象编程 对于面向对象编程的支持go语言设计得非常简洁而优雅。因为,Go语言并没有沿袭面向对象编程中诸多概念,比如继承(不支持继承,尽管匿名字段的内存布局和行为类似继承,但它并不是继承)、虚函数、构造函数和析构函数、隐…

HTTP代理如何设置

HTTP代理是一种非常重要的网络工具,它可以帮助我们在访问互联网时提高访问速度,保护用户隐私等等。在使用HTTP代理时,需要先进行设置。下面就来介绍一下HTTP代理如何设置。 一、了解HTTP代理 在开始设置HTTP代理之前,我们需要先了…

html 标签简介

概述 标签的效果不重要,重要的是标签的语义。 文本标签 文本标签用于包裹:词汇、短语等。排版标签,比如div,p,h1等。排版标签更宏观(大段的文字),文本标签更微观(词汇、短语)。文…

西门子LAD编程扫描周期带来的步序跳转问题

一、程序目的 按一下启动,程序进入第一步。延时五秒之后进入第二步进行自加1,然后回到第一步继续延时5秒循环,依次类推。 二、出现的问题 第一次程序进入第一步时,定时器正常定时,计数正常加1,但从第二轮开…

文件上传漏洞-upload靶场5-12关

文件上传漏洞-upload靶场5-12关通关笔记(windows环境漏洞) 简介 ​ 在前两篇文章中,已经说了分析上传漏的思路,在本篇文章中,将带领大家熟悉winodws系统存在的一些上传漏洞。 upload 第五关 (大小写绕过…

【DataV/echarts】vue中使用,修改地图和鼠标点击部分的背景色

引入:使用 DataV 引入地图的教程是参考别人的,主要介绍修改地图相关的样式; 引入地图 是参考别人的,这里自己再整理一遍,注意需要安装 5 版本以上的 echarts; DataV 网址:https://datav.aliyun.…

浅谈Http协议、TCP协议(转载)

TCP标志位,有6种标示:SYN(synchronous建立联机) ,ACK(acknowledgement 确认) ,PSH(push传送),FIN(finish结束) ,RST(reset重置), URG(urgent紧急) Sequence number(顺序号码) ,Acknowledge num…

《向量数据库指南》——向量数据库Milvus Cloud 2.3的可运维性:从理论到实践

一、引言 在数据科学的大家庭中,向量数据库扮演着重要角色。它们通过独特的向量运算机制,为复杂的机器学习任务提供了高效的数据处理能力。然而,如何让这些数据库在生产环境中稳定运行,成为了运维团队的重要挑战。本文将深入探讨向量数据库的可运维性,并分享一些有趣的案…

新风机未来什么样?

新风机在未来将会有许多令人期待的发展和改进,让我们一起来看一看吧!以下是新风机未来的一些可能性: 智能化和智能家居:新风机将更多地与智能家居系统整合,通过物联网和人工智能技术,实现智能控制和智能调节…

听觉刺激期间的神经血管耦合:ERPs和fNIRS血流动力学

导读 强度依赖性振幅变化(IDAP)已在事件相关电位(ERPs)中进行了广泛的研究,并与多种精神疾病相关联。本研究旨在探讨功能近红外光谱(fNIRS)在IDAP范式中的应用,该范式与ERPs相关,可以指示神经血管耦合的存在。两个实验分别有33和31名参与者。…

JS的深拷贝和浅拷贝

‍本文作者是360奇舞团开发工程师 数据类型的数据存储 在讨论深拷贝和浅拷贝之前,先来了解下Js基本数据和引用数据类型的存储问题 基本数据类型:Number String Boolean Undefined Symbol Null引用类型 :Object,function,Array等 基本数据类型…

ChatGPT:深度学习和机器学习的知识桥梁

目录 ChatGPT简介 ChatGPT的特点 ChatGPT的应用领域 ChatGPT的工作原理 与ChatGPT的交互 ChatGPT的优势 ChatGPT在机器学习中的应用 ChatGPT在深度学习中的应用 总结 近年来,随着深度学习技术的不断发展,自然语言处理技术也取得了显著的进步。其…

Bean 的生命周期总结

目录 一、Bean生命周期的五个阶段 Bean的初始化 二、PostConstruct 和 PreDestroy 各自的效果 三、 实例化和初始化的区别 四、为什么要先设置属性在进⾏初始化呢? 一、Bean生命周期的五个阶段 Java 中的公共类称之为 Bean 或 Java Bean,而 Spring 中的…

STM32F4X RNG随机数发生器

STM32F4X RNG随机数发生器 随机数的作用STM32F4X 随机数发生器RNG控制寄存器RNG状态寄存器RNG数据寄存器RNG数据步骤RNG例程 随机数的作用 随机数顾名思义就是随机产生的数字,这种数字最大的特点就是其不确定性,你不知道它下一次产生的数字是什么。随机…

计算机网络-谢希任第八版学习笔记总结

一.计算机网络概述 21世纪三个特点 数字化 信息化 智能化,其中主要是围绕智能化。 网络的常见分类: 电话网络 有线电视网络 计算机网络 互联网:Internet 由数量极大的计算机网络相连接 特点: 共享性 连通性 互联网&…