Cómo Crear un Blog en Astro 5 con Markdown y Componentes React imagen

Cómo Crear un Blog en Astro 5 con Markdown y Componentes React

Astro 5 es una poderosa herramienta para crear sitios web rápidos y modernos. En esta guía, aprenderás a crear un blog usando Astro con Markdown para escribir artículos y componentes React para añadir interactividad.

¿Qué es Astro?

Astro es un framework de desarrollo web que permite construir sitios estáticos y dinámicos utilizando múltiples frameworks de frontend como React, Vue o Svelte. Con su enfoque “content-first”, Astro prioriza la generación de HTML estático para mejorar la velocidad de carga.

Pasos para Crear un Blog en Astro 5

1. Inicia un Nuevo Proyecto Astro

Comienza creando un nuevo proyecto en Astro. En tu terminal, ejecuta:

npm create astro@latest

Sigue las instrucciones en pantalla y selecciona una plantilla básica.

Luego, entra en el directorio del proyecto:

cd nombre-del-proyecto

Instala las dependencias:

npm install

2. Crea Páginas con Markdown

Astro soporta archivos Markdown (.md) y Markdown + JSX (.mdx) de forma nativa. Crea una carpeta src/pages/blog y añade un archivo Markdown:

src/pages/blog/primer-articulo.md

Añade el siguiente contenido al archivo:

---
title: "Mi Primer Artículo"
description: "Este es el primer artículo de mi blog en Astro."
publishDate: "2025-01-19"
author: "XanSaul"
tags: ["Astro", "Markdown"]
---

# Bienvenido a mi Primer Artículo

Este es el inicio de mi blog creado con **Astro 5**. ¡Es increíble lo rápido y sencillo que es usar Astro!

Puedes incluir código como este:

```javascript
console.log("Hola, mundo!");
Y también imágenes:
![Astro Logo](./astro-logo.png)

3. Configura una Lista de Artículos

Para listar los artículos en tu blog, puedes usar el sistema de glob de Astro. Crea un archivo para la página principal del blog:

src/pages/blog.astro

Añade el siguiente código:

---
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
---

<html lang="es">
<head>
  <title>Blog</title>
</head>
<body>
  <h1>Mi Blog en Astro</h1>
  <ul>
    {posts.map((post) => (
      <li>
        <a href={post.slug}>{post.data.title}</a>
        <p>{post.data.description}</p>
        <small>Publicado el: {post.data.publishDate}</small>
      </li>
    ))}
  </ul>
</body>
</html>

4. Añade Componentes React

Astro te permite usar componentes React fácilmente. Primero, instala el soporte para React:

npm install @astrojs/react

Luego, actualiza tu archivo astro.config.mjs:

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  integrations: [react()],
});

Crea un componente React en src/components/Contador.jsx:

import { useState } from 'react';

export default function Contador() {
  const [cuenta, setCuenta] = useState(0);

  return (
    <div>
      <p>Cuenta actual: {cuenta}</p>
      <button onClick={() => setCuenta(cuenta + 1)}>Incrementar</button>
    </div>
  );
}

Importa el componente React en tu artículo de blog:

---
title: "Artículo Interactivo"
description: "Este artículo incluye un contador interactivo usando React."
publishDate: "2025-01-19"
author: "XanSaul"
tags: ["Astro", "React"]
---

# Artículo Interactivo

Este artículo incluye un contador interactivo hecho con React.

<Contador />

5. Agrega Estilos

Puedes usar CSS nativo o bibliotecas como Tailwind CSS. Para instalar Tailwind CSS, ejecuta:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Configura tailwind.config.cjs para que busque archivos Astro:

module.exports = {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Importa los estilos en src/styles/global.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Y enlázalos en src/layouts/BaseLayout.astro o directamente en tus páginas.

Conclusión

Con Astro 5, puedes construir un blog rápido y moderno en minutos. Combinando Markdown para el contenido y React para la interactividad, obtendrás lo mejor de ambos mundos. ¡Empieza a crear tu blog hoy!