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.rhkb.cn/news/121705.html

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

相关文章

OB Cloud助力泡泡玛特打造新一代分布式抽盒机系统

作为中国潮玩行业的领先者,泡泡玛特凭借 MOLLY、DIMOO、SKULLPANDA 等爆款 IP,以及线上线下全渠道营销收获了千万年轻人的喜爱,会员数达到 2600 多万。2022 年,泡泡玛特实现 46.2 亿元营收,其中线上渠道营收占比 41.8%…

找redis大key工具rdb_bigkeys

github官网 https://github.com/weiyanwei412/rdb_bigkeys 在centos下安装go [roothadoop102 rdb_bigkeys-master]# wget https://dl.google.com/go/go1.13.5.linux-amd64.tar.gz [roothadoop102 rdb_bigkeys-master]# tar -zxf go1.13.5.linux-amd64.tar.gz -C /usr/local将g…

【开发问题系列】CSV转Excel

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

element+vue table表格全部数据和已选数据联动

1.组件TableChoose <template><div class"tableChooseBox"><div class"tableRow"><div class"tableCard"><div class"tableHeadTip">全部{{ labelTitle }}</div><slot name"body" …

Sentry 是一个开源的错误监控和日志聚合平台-- 通过docker-compose 安装Sentry

概述 Sentry 是一个开源的错误监控和日志聚合平台&#xff0c;用于帮助开发团队实时监控和调试应用程序中的错误和异常。它可以捕获应用程序中的错误和异常&#xff0c;并提供详细的错误报告&#xff0c;包括错误堆栈跟踪、环境信息、用户信息等。这些报告可以帮助开发团队快速…

CVE-2023-28303(截图修复)

在做羊城杯的misc的时候发现了一个图片&#xff0c;典型的图片高度不对&#xff0c;修改之后对图片的高度进行不断修改尝试&#xff0c;发现图片很大&#xff0c;但是内容没有出现&#xff0c; 从这里指知道存在feld文件x 截出zip文件内容&#xff0c;把04 03 改为03 04 这里的…

RabbitMQ快速上手及讲解

前言&#xff1a;在介绍RabbitMQ之前&#xff0c;我们先来看下面一个场景&#xff1a; 1.1.1.1 异步处理 场景说明&#xff1a; 用户注册后&#xff0c;需要发注册邮件和注册短信&#xff0c;传统的做法有两种 1.串行的方式 (1)串行方式&#xff1a;将注册信息写入数据库后&a…

Docker使用数据卷挂载进行数据存储与共享

一、挂载和数据卷 在 Docker 中&#xff0c;挂载&#xff08;Mounting&#xff09;和数据卷&#xff08;Data Volumes&#xff09;是用于在容器和宿主机之间共享数据的机制。 挂载&#xff1a;将宿主机文件系统中的目录或文件与容器中的目录或文件进行关联的过程。数据卷&…

Python中if __name__ == ‘__main__‘:的作用和原理

if name ‘main’:的作用 一个python文件通常有两种使用方法&#xff0c; 第一是作为脚本直接执行&#xff0c;第二是 import 到其他的 python 脚本中被调用&#xff08;模块重用&#xff09;执行。 举例说明如下&#xff1a; 在本文件中&#xff0c;name 是main 在被impor…

Ubuntu18.04安装docker-io

1. 安装docker 1.1 网上一搜&#xff0c;全是更新仓库、下载依赖、添加docker的gpg密钥、添加docker仓库、安装docker-ce的步骤&#xff0c;但是在安装docker-ce时却提示“package "docker-ce" has no installation candidate”&#xff0c;就很迷。 1.2 安装docke…

【用unity实现100个游戏之8】用Unity制作一个炸弹人游戏

文章目录 前言素材开始一、绘制地图二、玩家设置三、玩家移动四、玩家四方向动画运动切换 五、放置炸弹六、生成爆炸效果七、墙壁和可破坏障碍物的判断八、道具生成和效果九、玩家死亡十、简单的敌人AI十一、简单敌人AI十二、随机绘制地图十三、虚拟摇杆 最终效果待续源码完结 …

数据库设计DDL

DDL&#xff1a;数据定义语言&#xff0c;用来定义数据库对象&#xff08;数据库、表&#xff09; DDL&#xff08;数据库操作&#xff09; 查询&#xff1a; 查询所有数据库&#xff1a;show databases; 查询当前数据库&#xff1a;select database(); 使用&#xff1a; 使用…

第P3周:天气识别

一、前期准备 1、设置GPU import torch import torch.nn as nn import torchvision.transforms as transforms import torchvision from torchvision import transforms, datasetsimport os,PIL,pathlibdevice torch.device("cuda" if torch.cuda.is_available() …

华为数通方向HCIP-DataCom H12-821题库(拖拽题,知识点总结)

以下是我在现有题库中整理的需要重点关注的考点内容,如有遗漏小伙伴可以留言补充。

插入排序(Insertion Sort)

C自学精简教程 目录(必读) 插入排序 每次选择未排序子数组中的第一个元素&#xff0c;从后往前&#xff0c;插入放到已排序子数组中&#xff0c;保持子数组有序。 打扑克牌&#xff0c;起牌。 输入数据 42 20 17 13 28 14 23 15 执行过程 完整代码 #include <iostream…

python爬虫关于ip代理池的获取和随机生成

前言 在进行爬虫开发时&#xff0c;代理IP池是一个非常重要的概念。代理IP池是指一个包含多个可用代理IP的集合&#xff0c;这些代理IP可以用来绕过网站的防爬虫策略&#xff0c;从而提高爬取数据的成功率。 在本文中&#xff0c;我们将介绍如何获取代理IP池&#xff0c;并且随…

指针进阶(1)

指针进阶 朋友们&#xff0c;好久不见&#xff0c;这次追秋给大家带来的是内容丰富精彩的指针知识的拓展内容&#xff0c;喜欢的朋友们三连走一波&#xff01;&#xff01;&#xff01; 字符指针 在指针的类型中我们知道有一种指针类型为字符指针 char* &#xff1b; 使用方法如…

Clion 使用ffmpeg 学习1 开发环境配置

Clion 使用ffmpeg 学习1 开发环境配置 一、准备工作1. 准备环境2. 下载FFmpeg 二、操作步骤1. Clion 新建一个C项目2. 修改 CMakeLists.txt3. 修改配置4. 运行测试5. 打印rtsp 流信息的 demo 一、准备工作 在视频处理和多媒体应用程序开发中&#xff0c;FFmpeg 是一个强大的开…

Jenkins自动构建(Gitee)

Gitee简介安装JenkinsCLI https://blog.csdn.net/tongxin_tongmeng/article/details/132632743 安装Gitee jenkins-cli install-plugin gitee:1.2.7 # https://plugins.jenkins.io/gitee/releases获取安装命令(稍作变更) JenkinsURL Dashboard-->配置-->Jenkins Locatio…

华为云银河麒麟V10安装libmcrypt

本次安装是在华为云上执行。cpu是鲲鹏&#xff0c;操作系统是银河麒麟V10. 先下载安装包&#xff1a; wget http://downloads.sourceforge.net/mcrypt/libmcrypt-2.5.8.tar.gz 解包&#xff0c;进入目录中。 执行如下命令&#xff1a; ./configure make make install 执…