¿Qué es Astro?
Astro es un framework de Javascript que te permite crear sitios web estaticos.
Requerimientos
- Nodejs Instalado
Instalacion de Astro
npm create astro
Just the basics
npm install? Yes
Visual Studio Code
Instala la extension de Astro
Ejecutar Astro
npm run dev
Pages
Crea una pagina about.astro en pages/
con el siguiente contenido:
---
import MySiteLayout from '../layouts/Layout.astro'
---
<MySiteLayout title="About Website">
<h1 class="title">About</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem consequuntur accusantium amet a
perspiciatis maxime asperiores velit error ex quos obcaecati aut voluptate, fugit placeat autem nobis natus delectus
voluptas magnam explicabo quidem. Reprehenderit dolores dolorem suscipit temporibus quia laborum molestiae
exercitationem nihil quae nemo labore dolorum nulla, quidem ducimus mollitia laudantium voluptatibus veniam
expedita. Quod, reprehenderit, nesciunt voluptatem odio assumenda qui obcaecati minus iure corrupti, autem eum
ducimus eius labore dignissimos eos facilis vitae similique! Atque excepturi dolore adipisci ipsum nulla maxime odit
aut mollitia incidunt sit, modi expedita quis velit voluptates et voluptatibus eveniet facere enim. Dicta, porro.
</p>
</MySiteLayout>
CSS
Para poder añadir estilos locales, puedes usar las etiquetas style de HTML.
<style>
.title {
font-size: 7rem;
}
</style>
Markdown
pages/post/first.md
---
layout: "../layouts/Layout.astro"
title: "My First Post - My Astro Website"
---
### List of Posts
pages/posts/index.md
---
layout: "../../layouts/Layout.astro"
title: "My Blog Posts"
---
# All My Posts
```markdown
A lis of my all posts
- [first post](/posts/first)
# WElcome to my post
this is my first **post**
https://docs.astro.build/en/core-concepts/astro-pages/
Javascript/TYpescripts
Tambien es posible cargar codigo de Javascript y Typescript en pages.
layouts
Crea un archivo llamado layouts/MainLayout.astro, con el siguiente contenido:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Layout</title>
</head>
<body>
<h1>Welcome to My Site</h1>
<slot/>
</body>
</html>
Luego puedes importarlo en otros archivos:
---
import MainLayout from '../layouts/MainLayout.astro'
---
<MainLayout title="About Website">
<h1 class="title">About</h1>
<p>lorem </p>
</MainLayout>
Components
componentes/footer.astro
---
const {customText} = Astro.props
---
<footer>
<h1>This is my footer</h1>
<p>{customText}</p>
</footer>
Props
const { title } = Astro.props
sass
public
this is a test
Fetch Data
import Layout from '../layouts/Layout.astro'
const response = await fetch('https://rickandmortyapi.com/api/character') const data = await response.json() const characters = data.results
Users
<ul>
{characters.map(character => (
<li>
<img src={character.image} class="image-profile" alt={character.name} />
{character.name}
</li>
))}
</ul>
Añade frameworks con
astro add
astro add tailwind
npx astro add tailwind
astro add react
build
npm run build