You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
4 Hrs
47 Min
3 Seg

Crear tu primera página web con Astro

4/25
Resources

How to create a page in Astro?

Astro is a framework that makes it easy to build dynamic and responsive websites. In this guide, we will explore how to build a simple page using Astro, making sure to understand its structure and the functionality provided by the framework. It's an exciting opportunity to immerse yourself in a new technology, discovering how to use it effectively in your web projects.

What is the basic structure of a file in Astro?

The common starting point in Astro is the index.astro file, located inside the Pages directory. When you open this file, you will notice that it has three main sections that allow you to work with JavaScript, HTML templates and CSS styles, all in a single file. This unified structure makes for a more cohesive and focused development.

In each Astro (.astro) file, the structure typically includes:

  • JavaScript required for the page at the top.
  • HTML template where you will structure the visual content of the page.
  • A style section at the bottom, which will be local to that file and will not interfere with others.

How do layouts and dynamic paths work?

Astro provides the flexibility to reuse common layouts for multiple pages, which facilitates a consistent design. Layouts, located in the layouts folder, can be included on different pages and allow you to set shared elements, such as the header and footer.

In Astro, you can also work with dynamic paths, especially within projects that require dealing with variable content. Although we do not go into its implementation here, this feature is essential for applications that handle dynamic content efficiently.

How to create a new page?

To create a new page in Astro, simply follow these steps:

  1. Inside the Pages directory, create a new file, such as blog.astro.

  2. Inside this file, start by typing the HTML content you want to display. For example:

    <div> <h2>HelloBlog</h2></div>.
  3. Add local styles below the HTML using the style tag. These styles will only affect elements within this file.

    <style> h2 { font-size: 2em; }</style>.

How to initialize the local development environment?

To display your changes in real time, you will need to initialize the local development environment using the terminal. Use the following command:

npm run dev

With this command, Astro will automatically monitor any changes to your files and refresh the page in the browser as needed. Remember that for certain changes to critical files such as astro.config or if you introduce Tailwind or Typescript, you will need to stop and restart the local server.

What makes style management in Astro special?

A notable advantage of working with Astro is its focus on style management. Astro generates unique hashes for CSS classes within each page. This means you can style your components without worrying that they will inadvertently impact other elements of the site, a common challenge in traditional web development. So, when you prepare your projects with Astro, you'll have the peace of mind that each section remains independent and styled according to its own rules.

Now that you have created your first page in Astro and better understand its structure and capabilities, you are ready to move forward on this exciting web development path. Keep exploring, experimenting and feel free to share your experiences and projects with the community to further enrich your learning!

Contributions 7

Questions 4

Sort by:

Want to see more contributions, questions and answers from the community?

Para insertar código en Javascript, se debe meter en bloques de ---. Astro automáticamente sabrá que es código en JS. Luego podemos utilizarlo en el bloque de HTML:

---
// Esto es código JS

const nameCourse='Platizi con Astro'
---

<div>
	<h1>Bienvenido a curso de {nameCourse}</h1>
</div>

Crear tu primera página web con Astro

Para Astro, las páginas residen en el directorio src/pages , quienes son los responsables de administrar el routing, la carga de información, y la distribución del contenido de nuestro sitio web.
.

Páginas Astro

Inicialmente, las páginas de Astro usan la extensión .astro para extender el soporte de características similares a componentes, en otros Frameworks.

src/pages/page.md
---
---
<html lang="en">
  <head>
    <title>My Homepage</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

En distribución, mezclamos los layouts en el directorio src/layouts para evitar repetir elementos de HTML comunes, por ejemplo <head> y <body> .

src/layouts/Default.astro
---
---
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <BaseHead title={title}/>
  </head>
  <body>
    <slot /> <!-- your content is injected here -->
  </body>
</html>
src/pages/page.md
---
import DefaultLayout from '../layouts/Default.astro';
---
<DefaultLayout title="Greetting 👋">
  <p>Hello World 🎉</p>
</DefaultLayout>

✨ Concepto clave
Adicionalmente, como core en Astro podemos emplear como páginas al contenido con formato markdown .md , donde por extensión instalable contenido con formato markdown extendido .mdx .

src/pages/index.md
---
layout: '../layouts/Default.astro'
title: 'Greetting 👋'
---

Hello World 🎉

Instalen la extensión oficial de Astro en Visual Studio Code para tener disponible color en el código, sugerencias y otras cosas más en los archivos “.astro”

Esta super chevere este framework!

Llegue hasta este punto todo funciono bien hasta que tuve que abrir el localhost3000/blog la pagina no carga y no se si este framework sea solo para mac lo estoy realizando desde un Windows 11, lo intente averigüe con varias personas pero no encontré solución ni del mismo tutor me retiro.

si alguien si izo la pregunta de cuan extensión usa el profe para que se le vean los icono de esa forma esteta extensión Material Icon Theme

Astro tiene cositas de Svelte y NextJS. Súper intuitivo el scaffolding del proyecto.