Astro新前端框架首次体验

Astro新前端框架首次体验

1、什么是Astro

Astro是一个静态网站生成器的前端框架,它提供了一种新的开发方式和更好的性能体验,帮助开发者更快速地构建现代化的网站和应用程序。

简单来说就是:Astro这个是一个网站生成器,可以直接通过提供的模版进行下载想要的网站模版,比如一般官网下载信息网站或者博客网站。

2、Astro特点

Astro还支持多种前端框架,包括React、Vue和Svelte等。开发者可以根据自己的喜好和需求选择合适的框架来开发网站。

Astro还具有优秀的性能和开发体验。它使用了编译时渲染的技术,可以将网站预先编译成静态文件,提供更快的加载速度和更好的SEO优化。同时,Astro还提供了热重载和即时预览等功能,使得开发过程更加高效和便捷。

简单来说就是:支持其他流行的前端框架,并且性能优化也挺好,易于上手,开发人员不用浪费太多时间。

3、快速使用Astro

模版地址:Themes | Astro

1、选择一个Free的模版

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2、查看模版详细

在这里插入图片描述

3、根据readme文件进行克隆下载安装在vscode编辑器上,查看运行

4、查看目录,找到对应需要更改数据的地方,这里是md文件,可以直接copymd文件过来,上面为标题信息

在这里插入图片描述

在这里插入图片描述

到这里就基本结束了,信息更换这个项目确实基本就完成了,模版结构不用改变,也可按需求。

4、使用免费服务器netlify部署

示例:使用github登录netlify

1、将克隆下来的项目更改后上传到github

2、使用github账号登录进netlify,并且选择你的仓库项目

3、进行选择仓库项目的部署

4、部署成功即可查看在netlify上面进行部署的网站

在这里插入图片描述

通过测试,只要新修改的代码上传到github上面,通过netlify部署的网站会自动更新(会有一点延迟),非常方便,如果有自己的域名,你可以换成你自己的域名。

到此,第一次使用和测试成功,这个前端框架在特定使用的场景感觉还是非常实用的,比如一般官网摸样、个人博客、下载网站等。世界很大,我想去看看。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/369309.html

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

相关文章

Hyper-V克隆虚拟机教程分享!

方法1. 使用导出导入功能克隆Hyper-V虚拟机 导出和导入是Hyper-V服务器备份和克隆的一种比较有效的方法。使用此功能,您可以创建Hyper-V虚拟机模板,其中包括软件、VM CPU、RAM和其他设备的配置,这有助于在Hyper-V中快速部署多个虚拟机。 在…

前端引用vue/element/echarts资源等引用方法Blob下载HTML

前端引用下载vue/element/echarts资源等引用方法 功能需求 需求是在HTML页面中集成Vue.js、Element Plus(Element UI的Vue 3版本)、ECharts等前端资源,使用Blob下载HTML。 解决方案概述 直接访问线上CDN地址:简单直接&#xff0c…

计算机网络(2

计算机网络续 一. 网络编程 网络编程, 指网络上的主机, 通过不同的进程, 以编程的方式实现网络通信(或网络数据传输). 即便是同一个主机, 只要不同进程, 基于网络来传输数据, 也属于网络编程. 二. 网络编程套接字(socket) socket: 操作系统提供的网络编程的 API 称作 “soc…

【数据结构与算法】堆排序算法原理与实现:基于堆实现的高效排序算法

💓 博客主页:倔强的石头的CSDN主页 📝Gitee主页:倔强的石头的gitee主页 ⏩ 文章专栏:《数据结构与算法》 期待您的关注 ​ 目录 一、引言 堆排序的简介 堆排序的特点 二、堆的概念 三、堆排序算法的原理 四、堆…

软件测试面试1000问(含答案)

1、自动化代码中,用到了哪些设计模式? 单例设计模式工厂模式PO设计模式数据驱动模式面向接口编程设计模式 2、什么是断言( Assert) ? 断言Assert用于在代码中验证实际结果是不是符合预期结果,如果测试用例执行失败会抛出异常并提供断言日志 3、什么是web自动化…

数据结构预科

在堆区申请两个长度为32的空间,实现两个字符串的比较【非库函数实现】 要求: 1> 定义函数,在对区申请空间,两个申请,主函数需要调用2次 2> 定义函数,实现字符串的输入,void input(char …

Jenkins容器的部署

本文主要是记录如何在Centos7上安装docker,以及在docker里面配置tomcat、mysql、jenkins等环境。 一、安装docker 1.1 准备工作 centos7、VMware17Pro 1.2 通过yum在线安装dokcer yum -y install docker1.3 启动docker服务 systemctl start docker.service1.4 查看docke…

Java传引用问题

本文将介绍 Java 中的引用传递,包括其定义、实现方式、通过引用修改原来指向的内容和通过引用修改当前引用的指向的区别 目录 1、引用传递的概念 2、引用传递的实现方式 3、传引用会发生的两种情况: 通过引用修改当前引用的指向 通过引用修改原来指…

《数据仓库与数据挖掘》 总复习

试卷组成 第一章图 第二章图 第三章图 第四章图 第五章图 第六章图 第九章图 第一章 DW与DM概述 (特点、特性) DB到DW 主要特征 (1)数据太多,信息贫乏(Data Rich, Information Poor)。 &a…

H2 Database Console未授权访问漏洞封堵

背景 H2 Database Console未授权访问,默认情况下自动创建不存在的数据库,从而导致未授权访问。各种未授权访问的教程,但是它怎么封堵呢? -ifExists 很简单,启动参数添加 -ifExists ,它的含义&#xff1a…

【机器学习】机器学习的重要方法——线性回归算法深度探索与未来展望

欢迎来到 破晓的历程博客 引言 在数据科学日益重要的今天,线性回归算法以其简单、直观和强大的预测能力,成为了众多领域中的基础工具。本文将详细介绍线性回归的基本概念、核心算法,并通过五个具体的使用示例来展示其应用,同时探…

CASS7.0按方向和距离绘制图形

1、绘制工具 2、按方向和距离绘制 (1)切换方向 (2)距离输入

Python函数缺省参数的 “ 坑 ” (与C++对比学习)

我们都知道Python函数的缺省参数可以降低我们调用函数的成本,但是一般我们的缺省参数都是不可变对象,如果是可变对象,我们对其多次调用会发生什么呢? def func(arr[]):arr.append(Hello)print(arr)func() func() func() 这貌似…

MongoDB-社区版-本地安装

系统:win10 1. 下载server:Download MongoDB Community Server | MongoDB 我选的zip包 2. 下载shell:MongoDB Shell Download | MongoDB 我选的zip包 3. 启动server 4. 启动shell, 完成

MYSQL函数进阶详解:案例解析(第19天)

系列文章目录 一、MySQL的函数(重点) 二、MySQL的窗口函数(重点) 三、MySQL的视图(熟悉) 四、MySQL的事务(熟悉) 文章目录 系列文章目录前言一、MySQL的函数1. 聚合函数2. group_c…

Redis 多数据源自定义配置 Spring Boot 升级版

文章目录 1.前言2.git 示例地址3.需求4.代码实现4.1 application.properties 配置文件4.2 获取 application.properties 中的 redis 配置4.2.1 Environment 对象来获取自定义 redis 配置 4.3 初始化 RedisTemplate 对象,并注册到 Spring IOC 容器4.3.1 初始化方法4.…

spring boot (shiro)+ websocket测试连接不上的简单检测处理

1、用前端连接测试的demo一切正常,但是到了项目中连接不上了 一开始以为是地址错,但是换了apifox测试也是不可以。 2、考虑是shiro进行了拦截了,所以就访问不到了地址,那么就放行。 3、再次用apifox测试,成功了。 当然…

马拉松报名小程序的设计

管理员账户功能包括:系统首页,个人中心,用户管理,赛事信息管理,赛事报名管理,活动商城管理,留言板管理,系统管理 微信端账号功能包括:系统首页,赛事信息&…

C++:智能指针

目录 前言 1.内存泄漏及其危害 2.内存泄漏分类: 3.如何检测内存泄漏 4.如何避免内存泄漏 一、为什么需要智能指针? 二、智能指针的使用及其原理 1.RAII 2.智能指针 3.std::auto_ptr 4.std::unique_ptr 5.std::shared_ptr 6.std::weak_ptr…

SA 注册流程

目录 1. UE开机后按照3GPP TS 38.104定义的Synchronization Raster搜索特定频点 2.UE尝试检测PSS/SSS,取得下行时钟同步,并获取小区的PCI;如果失败则转步骤1搜索下一个频点;否则继续后续步骤; 3.解析Mib,…