Crear tu primera página web con Astro

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!