Hashnode & Astro
Hashnode es un CMS alojado que te permite crear un blog o publicación.
Integración con Astro
Sección titulada Integración con AstroLa API Pública de hashnode es una API GraphQL que te permite interactuar con Hashnode. Esta guía utiliza graphql-request
, un cliente GraphQL minimalista que funciona bien con Astro, para traer tus datos de Hashnode a tu proyecto de Astro.
Prerrequisitos
Sección titulada PrerrequisitosPara comenzar necesitarás tener lo siguiente:
-
Un proyecto de Astro - Si aún no tienes un proyecto de Astro, nuestra Guía de Instalación te ayudará a empezar en poco tiempo.
-
Un sitio en Hashnode - Puedes crear un sitio personal gratuito visitando Hashnode.
Instalando dependencias
Sección titulada Instalando dependenciasInstala el paquete graphql-request
usando el gestor de paquetes de tu elección:
Haciendo un blog con Astro y Hashnode
Sección titulada Haciendo un blog con Astro y HashnodeEsta guía usa graphql-request
, un cliente GraphQL minimalista que funciona bien con Astro, para traer tus datos de Hashnode a tu proyecto de Astro.
Requisitos Previos
Sección titulada Requisitos Previos- Un blog de Hashnode.
- Un proyecto de Astro integrado con el paquete graphql-request instalado.
Este ejemplo creará una página de índice que lista las publicaciones con enlaces a páginas individuales generadas dinámicamente.
Obteniendo Datos
Sección titulada Obteniendo Datos-
Para obtener los datos de tu sitio con el paquete
graphql-request
, crea un directoriosrc/lib
y crea dos archivos nuevos:client.ts
&schema.ts
:Directorysrc/
Directorylib/
- client.ts
- schema.ts
Directorypages/
- index.astro
- astro.config.mjs
- package.json
-
Inicializa una instancia de API con GraphQLClient utilizando la URL de tu sitio web de Hashnode.
-
Configura un
schema.ts
para definir la estructura de los datos devueltos por la API de hashnode.
Mostrando una lista de publicaciones
Sección titulada Mostrando una lista de publicacionesObtener mediante getAllPosts()
devuelve un array de objetos que contiene las propiedades de cada publicación, tales como:
title
- El título de la publicaciónbrief
- La representación HTML del contenido de la publicacióncoverImage.url
- La URL de origen de la imagen destacada de la publicaciónslug
- El slugh de la publicación
Utiliza el array posts
que devuelve la consulta para mostrar una lista de publicaciones de blog en la página.
Generando páginas
Sección titulada Generando páginas-
Crea la página
src/pages/post/[slug].astro
para generar dinámicamente una página para cada publicación.Directorysrc/
- …
Directorylib/
- client.ts
- schema.ts
Directorypages/
- index.astro
Directorypost/
- [slug].astro
- astro.config.mjs
- package.json
-
Importa y utliza
getAllPosts()
ygetPost()
para obtener los datos de Hashnode y generar rutas de página individuales para cada publicación. -
Crea la plantilla para cada página usando las propiedades de cada objeto
post
. El ejemplo de abajo muestra el título de la publicación y tiempo de lectura, luego el contenido completo de la publicación:<Fragment />
Es un componente integrado de Astro que te permite evitar un elemento de contenedor innecesario. Puede ser especialmente útil cuando recuperas HTML de un CMS (e.g. Hashnode o WordPress).
Publicando tu sitio
Sección titulada Publicando tu sitioPara desplegar tu sitio visita nuestra guía de despliegue y sigue las instrucciones de tu proveedor de alojamiento preferido.
Recursos de la Comunidad
Sección titulada Recursos de la Comunidadastro-hashnode
en GitHub