是阿狸呀༺࿈༻

用Astro建立一个静态站点

#Astro #tailwind

介绍

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

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

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

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站 是阿狸呀

Open in Codeflow