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

这篇具有很好参考价值的文章主要介绍了Astro建站教程:安装nodejs,npm下载Astro,安装扩展。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  1. 下载Nodejs LTS版:https://nodejs.org/en
    安装步骤全默认即可,安装路径可以根据自己的爱好更改
  2. 在桌面右键打开cmd或powershell,输入node -v和npm -v测试是否安装成功
    Astro建站教程:安装nodejs,npm下载Astro,安装扩展,Windows,Astro,Wordpress,PHP,Blog,Windows,JavaScript,typescript
  3. 浏览器打开https://docs.astro.build/en/install/auto/
    复制里面的npm create astro@latest这行代码,在本地的cmd中输入并回车,然后输入y
    Astro建站教程:安装nodejs,npm下载Astro,安装扩展,Windows,Astro,Wordpress,PHP,Blog,Windows,JavaScript,typescript这里的Template copied应该是Use blog template才对,不要选错了!TypeScript那项可以选Yes的,git那项要选No!
  4. 在VS Code安装Astro扩展 Astro建站教程:安装nodejs,npm下载Astro,安装扩展,Windows,Astro,Wordpress,PHP,Blog,Windows,JavaScript,typescript
  5. 在文件夹的根目录输入npm run dev运行Astro
  6. 运行成功,浏览器打开http://localhost:4321/查看
  7. 建立博客
    Astro建站教程:安装nodejs,npm下载Astro,安装扩展,Windows,Astro,Wordpress,PHP,Blog,Windows,JavaScript,typescript
    你可以在这个路径编写Markdown,我认为有能力进行以上操作的人应该都会写Markdown对吧,现在,你可以像写Markdown文件一样写博客了
    Astro建站教程:安装nodejs,npm下载Astro,安装扩展,Windows,Astro,Wordpress,PHP,Blog,Windows,JavaScript,typescript
    Astro建站教程:安装nodejs,npm下载Astro,安装扩展,Windows,Astro,Wordpress,PHP,Blog,Windows,JavaScript,typescript在这里,你能修改以下的内容:
    Astro建站教程:安装nodejs,npm下载Astro,安装扩展,Windows,Astro,Wordpress,PHP,Blog,Windows,JavaScript,typescript
    Astro建站教程:安装nodejs,npm下载Astro,安装扩展,Windows,Astro,Wordpress,PHP,Blog,Windows,JavaScript,typescript

为什么选择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 中得到正式支持。 您甚至可以在同一页面上混合搭配不同的框架,使未来的迁移更加容易,并防止项目锁定到单个框架。文章来源地址https://www.toymoban.com/news/detail-701879.html

到了这里,关于Astro建站教程:安装nodejs,npm下载Astro,安装扩展的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • windows安装npm教程

    在安装和使用NPM之前,我们需要先了解一下,NPM 是什么,能干啥? 一、NPM介绍 NPM(Node Package Manager)是一个用于管理和共享JavaScript代码包的工具。它是Node.js生态系统的一部分,广泛用于构建JavaScript应用程序和库。 以下是NPM的主要功能和用途: 代码包管理 NPM允许开发者在

    2024年02月07日
    浏览(37)
  • 下载安装npm,配置环境变量详细教程

    要在本地运行项目,就需要安装npm,其次还需要配置项目依赖node-modules。今天我们就先安装npm 在官网下载 http://nodejs.cn/download/ 选择windows或者Mac即可 可以看到版本号,说明成功了 然后验证是否能使用npm 出现这些信息,就证明成功了。 创建2个新的文件夹,用在存放全局包 分

    2024年01月21日
    浏览(70)
  • node npm 下载,安装,使用 全网最全教程

    node npm 下载,安装,使用 全网最全教程 1.前段时间 使用到vue的时候 需要下载node.js 废话不多说看步骤, 到node.js官网下载 最新的下载地址:[https://nodejs.org/en/download/] 个人建议安装在d盘好点 ![在这里插入图片描述] 最后完成安装 Node.js已经安装完成,可以先进行下简单的测试

    2023年04月15日
    浏览(48)
  • nodejs配置npm下载依赖位置和镜像源

    创建本地目录,并执行配置下载位置 npm config set cache “D:noderepsnpm_cache” npm config set prefix “D:noderepsnpm_global” 2.查看下载位置 npm config ls 默认下载位置如下 ,C:UsersAdministratorAppDataRoaming,AppData 是隐藏文件夹 执行配置后 3.在C:Users用户名.npmrc 可以查看到配置 4. 输入 np

    2024年02月12日
    浏览(50)
  • windows安装npm(Node.js)教程

    在使用之前,先了解下基础定义: npm:  nodejs 下的包管理器。 webpack: 它主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的准备,比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基

    2024年02月12日
    浏览(58)
  • 下载了nodejs但是npm -v的时候没有反应如何解决

    小伙伴们,我真的别npm搞哭了,昨天折腾俩小时,整半天没出来,今天早上又整了一个多小时才解决,我必须写篇博客记录一下整个安装nodejs的心路历程!!! 说一下我的问题: 安装nodejs就是正常官网Nodejs官网链接安装,一路next傻瓜安装就行,不过你想中途改安装路径也是

    2024年02月09日
    浏览(44)
  • 阿里云服务器搭建WordPress建站教程基于Windows系统

    本教程是使用阿里云服务器镜像系统选择的是Windows操作系统,手动安装WordPress博客网站全过程。本教程介绍如何在Windows操作系统的ECS实例上搭建WordPress网站。 目录 准备工作 搭建WordPress网站 解析WordPress网站域名 创建Windows操作系统的ECS实例,并且已经部署Web环境。本教程使

    2024年02月13日
    浏览(56)
  • 【CentOS】【npm】centos安装npm(Nodejs)

    最后面添加: :wq保存,然后运行命令,使得环境变量生效 查看环境变量是否生效 可以用node -v和npm -v来检查下:

    2024年02月14日
    浏览(55)
  • Nodejs和npm的使用方法和教程

    Node.js 是一个开源和跨平台的 JavaScript 运行时环境。 它几乎是任何类型项目的流行工具! ( 运行环境 ,是不是很熟悉,对。就是 == java  JRE,Java 运行时环境 ) Node.js 在浏览器之外运行 V8 JavaScript 引擎(Google Chrome 的内核) 用法完全一致,npm是官方的,从国外官方服务器获

    2024年02月06日
    浏览(43)
  • 【IIS建站教程】windows本地搭建web服务,内网穿透发布公网访问

    转载自远程源码文章:【IIS搭建网站】本地电脑做服务器搭建web站点并公网访问「内网穿透」 在网上各种教程和介绍中,搭建网页都会借助各种软件的帮助,比如网页运行的Apache和Nginx、数据库软件MySQL和MSSQL之类,为方便用户使用,还出现了XAMPP、PHPStudy、宝塔面板等等一系

    2024年02月06日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包