用Astro建立一个静态站点

news2024/11/22 16:39:54

介绍

Astro是一个相对较新的web框架,它可以帮助你轻松地建立快速干净的网站。Astro能够与目前主流的JavaScript前端框架一起工作,如React,
Vue或solid。

终端用户喜欢网站快速展示,但开发人员喜欢用复杂的JavaScript框架来构建网站。

Astro就像一个静态端生成器,试图在服务器端生成一个静态版本的网站,并减少发送到客户端的代码量,使之尽可能少。这有助于使网站非常快。同时Astro允许您使用自己喜欢的框架,甚至同时使用多个框架来构建网站。

astro具有以下主要功能:

  • 服务器优先的API设计:把复杂的交互从终端页面上移除。
  • 组件岛:一个新的网络架构,以建立更快的网站,这些组件岛指的是HTML静态页面上的交互式UI组件。一个页面上可以存在多个岛,一个岛始终是孤立呈现的。为了保持对页面速度的影响尽可能低,Astro使它能够在需要时只加载那些网页的部分。
  • 默认情况下为零JS:没有JavaScript运行时开销来降低您的速度,默认情况下Astro在发送给客户端的输出中不添加JavaScript代码。这使你的网站超快,并尽可能减少捆绑大小。
  • 可定制:你可以通过 React, Svelte, Vue, Tailwind CSS, MDX, image optimizations等100多个集成 扩展 Astro 只需要一个命令 即可连接您喜欢的CMS 或 部署到您喜欢的服务器。
  • ui不可知:这意味着您可以自带UI框架(BYOF)。React、Preact、Solid 、Svelte、Vue和 Lit都在Astro中得到官方支持。您甚至可以在同一页面上混合和匹配不同的框架,使未来的迁移更容易,并防止项目锁定到单个框架。

实现网站demo

html+css+javascript的源码在:https://github.com/kylvia/astro-started-website/tree/main/static-common
效果展示:
https://sparkly-raindrop-84e1a5.netlify.app/

前期准备

编辑器:vscode 。插件: Astro、Tailwind CSS IntelliSense

构建您的第一个Atro项目

  1. 简单跟随 create-astro CLI 指引,很快就能在本地启动并运行新项目!
# 使用 pnpm 创建新项目 (本项目以pnpm为例)
pnpm create astro@latest
  1. 目录和文件
    Astro 为你的项目提供了一个有想法的文件夹布局。每个 Astro 项目的根目录下都应该包括以下目录和文件:
  • src/* - 你的项目源代码(组件、页面、样式等)。
  • public/* - 你的非代码、未处理的资源(字体、图标等)。
  • package.json - 项目列表。
  • astro.config.mjs - Astro 配置文件(可选)。
  1. 集成tailwind CSS
pnpm astro add tailwind
  1. 根据demo项目,先确立组件和路由页面
    在这里插入图片描述

  2. 基本使用介绍
    在这里插入图片描述

  3. 页面公共框架BasicLayout
    在这里插入图片描述

  4. 页面实现
    在这里插入图片描述
    更多的本项目的实现及部署见:B站 是阿狸呀

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

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

相关文章

Go语言包管理学习

重点 首先你要确认你的GOPath 我是winodw系统,所以如图 所以你要创建的文件是在$GOPATH(我这里是E:\LearnFile\GO)\src文件下 项目结构 你只能有一个main包和main函数 go文件内容 ./hello/hello.go 这是正常引入,不会报错,但是这个不是主…

logback重写DBAppenderBase连接达梦数据库实现自定义日志

一. 背景 本来项目组使用的数据库是Oracle,如今要切换到达梦。。。早期的时候就讨论过数据库日志迁移的问题,本来以为是一个小问题可以随便搞定,没想到是踩坑了,记录下: 二. 如果已经实现Oracle自定义日志 简单来说&a…

TCP/IP协议

作者:~小明学编程 文章专栏:JavaEE 格言:热爱编程的,终将被编程所厚爱。 目录 应用层 XML json ​编辑 protobuffer 传输层 UDP的数据报文格式 TCP报文格式 TCP的可靠传输 确认应答(安全机制) …

Java版本TransE代码的学习

参考资料 Anery/transE: transE算法 简单python实现 FB15k (github.com) Translating Embeddings for Modeling Multi-relational Data (nips.cc) 输入 1.数据集S 2.Entities集合E 3.Relations集合L 4.margin hyperparameter γ 5.每个向量的长度 k 初始化 为Entities集…

服务发现组件:Consul简易攻略

简介 Consul是一种分布式、高可用性、支持多数据中心的解决方案,可动态、分布式基础架构连接和配置的应用程序。 特性 『多数据中心』  Consul是为支持数据中心而构建的,可以支持任意数量的区域,而无需复杂的配置。『服务网格』  Consul服…

ROS移动机器人——32电机驱动

驱动电机,我们在这里使用TB6612来驱动电机,同时,电机的内部我们有编码器进行计次 输出比较 cnt,就是时基单元寄存器 ccr,在cnt下方,为捕获比较寄存器,cc是捕获比较的意思,r就是寄存…

内存溢出问题排查

一、问题背景下午突发服务器CPU频繁撑爆,服务启动后不久就挂掉。一周前系统有一次投产,之后再没有更新过系统。同时在日志中看到大量的dubbo服务调用失败。二、排查问题产生原因1.查看JVM崩溃日志hs_err_pid.logJVM崩溃时会生成hs_err_pid_xxx.log日志文…

面经分享|2022年秋招斩获7个规控算法工程师offer

该面经来自深蓝学院用户投稿,作者为东北大学自动化专业硕士。 作者2022年秋招情况:投递的岗位包括决策规划,规划控制和控制岗位。本人累计投递70家自动驾驶公司,最终收获10多家公司的笔试或面试反馈。最终拿到的offer包括主机厂、…

抖音短视频运营中的六大定位法

抖音六大定位法 1年龄反转法年龄反转法的秘诀就是指,所设定的人物、性格与实际的年龄并不是特别符合,从而让用户产生比较强烈的差异感。比如之前很火的北海爷爷,是一位有着七十多岁高龄的先生,但他依然很有精神,举止优…

【Mybatis-plus 入门教程】

🌈博客主页:屠一乐的博客 📅 发文时间:2023.1.6 🎈 一定存在只有你才能做成的事 🌹 博主水平有限,如有错误,欢迎指正 欢迎各位👍收藏💎评论✉ MyBatisPlus …

舆情监测技术手段有哪些,网络舆情监测监测技术应用到哪些方面?

随着网络舆情的快速发展,舆情影响到方方面面,大多数企业将网络舆情监测纳入其日常工作。对于舆情监测上如何做到全面监测,那些技术上可以实现,接下来TOOM舆情监测小编带您简单了解舆情监测技术手段有哪些,网络舆情监测…

C语言 文件处理

文件操作 为什么使用文件 什么是文件 程序文件 数据文件 文件名 文件的打开和关闭 文件指针 只要没打开一个文件就会有一个文件信息区,只要一更改文件信息区也会跟着更改 **FILE *fopen( const char filename, const char mode ); filename 文件名 *char mode 打…

疑难杂症之vscode--During startup program exited with code 0xc0000139.--缺失重要文件(杂记)

问题展示在vscode中,只要用了STL容器,就会出现这样的提示发现自己的 vscode 不能运行带有部分 stl 库的程序,编译不会报错,运行也不会报错但是也没有结果,调试的话会有下图中报错。拿一个以前的程序做测试,…

Java 集合系列:Vector源码深入解析

概论 学完ArrayList和LinkedList之后,我们接着学习Vector。学习方式还是和之前一样,先对Vector有个整体认识,然后再学习它的源码;最后再通过实例来学会使用它。 第1部分 Vector介绍 Vector简介 Vector 是矢量队列,…

java服装商城购物商场项目源码

简介 Java基于ssm开发的服装商城,用户可以浏览商品和特价商品,加入购物车,直接下单支付,在我的个人中心里可以管理自己的订单,收货地址,编辑资料等。管理员可以发布商品,上下架商品&#xff0c…

Neo4j详细介绍及使用教程

文章目录一、Neo4j介绍1.Neo4j简介2.图数据库简介3.Neo4j的优缺点4.Neo4j的常见应用场景二、使用教程1.下载安装2.数据插入和查询(1)基本概念(2)基本语法Ⅰ.CREATE操作——创建Ⅱ.MERGE——创建或更新Ⅲ.Match操作——查找指定的图数据Ⅳ.DELETE操作——删除节点3.JAVA实战一、…

FPGA之VGA/LCD数字时钟显示

文章目录前言一、LCD显示控制1.LCD显示一个字符2.LCD显示多个字符二、数字时钟输出1.数字时钟2.十进制数据拆分BCD码三、按键检测及LCD驱动1.按键检测2.LCD驱动四、总结前言 软件实现了在4.3寸LCD左上角显示一个数字时钟,效果如下图所示。本文针对VGA/LCD控制时许有…

leetcode:2103. 环和杆(python3解法)

难度:简单 总计有 n 个环,环的颜色可以是红、绿、蓝中的一种。这些环分布穿在 10 根编号为 0 到 9 的杆上。 给你一个长度为 2n 的字符串 rings ,表示这 n 个环在杆上的分布。rings 中每两个字符形成一个 颜色位置对 ,用于描述每个…

makefile 入门

make常用选项 # make 默认在当前目录中寻找GUNmakefile,makefile,Makefile的文件作为make的输入文件 # -f 可以指定默认的输入文件名,如: -f MyMakefile # -v 显示make版本号 # -n 只输出命令,但不执行,一般用于测试 # -s 只执行命令,但不显示具体命令,与在命令中使用作用一样…

第四十四讲:神州防火墙双机热备配置

两台防火墙硬件型号和软件版本都完全相同,为了避免防火墙不堪重负而宕机引起网络中断,可以考虑应用双机热备(HA)解决方案。双机热备能够把两台防火墙构成一个工作组,一主一备,保证数据通信畅通,…