Blog con Next.js y Notion como CMS

Este proyecto es un blog moderno y altamente personalizable construido con Next.js, utilizando Notion como sistema de gestión de contenidos (CMS), y estilizado con Tailwind CSS y DaisyUI.

Herramientas utilizadas

• Next.js: Framework de React para renderizado del lado del servidor (SSR), generación de sitios estáticos (SSG) y enrutamiento dinámico.
• Notion como CMS: Utilizamos Notion como backend para gestionar el contenido del blog. Esto permite una gestión de contenido fácil y flexible sin necesidad de una base de datos tradicional.
• Tailwind CSS: Un framework de utilidades CSS altamente personalizable que permite un diseño rápido y consistente.
• DaisyUI: Un complemento de Tailwind CSS que añade componentes preestilizados y temáticos, lo que acelera el desarrollo de la interfaz de usuario.
• TypeScript: Añade tipos estáticos a JavaScript, mejorando la calidad del código y reduciendo errores en tiempo de desarrollo.

Uso de Notion como CMS

Notion se utiliza como CMS para gestionar el contenido del blog. Cada entrada del blog es una página en una base de datos de Notion. La estructura de la base de datos debe incluir los siguientes campos:

Título: Título del post.

Descripcion: URL amigable para el post.

Fecha: Fecha en que se publicó el post.

Etiquetas: Etiquetas del post.

Portada: Foto principal del post.

Configuración del Proyecto

Requisitos previos

• Node.js (v14 o superior)
• Yarn o npm (Yo utilicé Bun)
• Una cuenta de Notion y una base de datos configurada como CMS

Instalación

1. Clona este repositorio:

   git clone https://github.com/ingfranciscastillo/next-notion-blog
   cd blog-nextjs-notion
   1. Clona este repositorio:
   

2. Instala las dependencias:

    yarn install
    # o
    npm install
   

3. Configura las variables de entorno:

Crea un archivo .env.local en la raíz del proyecto y añade las siguientes variables:

NOTION_SECRET=your_notion_api_key NOTION_DATABASE_ID=your_notion_database_id

NOTION_API_KEY: Tu clave de API de Notion. NOTION_DATABASE_ID: El ID de la base de datos de Notion que actuará como CMS.

4. Inicia el servidor de desarrollo:

   yarn dev
   # o
   npm run dev
   

Licencia

Este proyecto está bajo la licencia MIT. Consulta el archivo LICENSE para más detalles.

Contacto

Si tienes alguna pregunta o sugerencia, no dudes en contactarme a través de mi correo electrónico o en Twitter.

¡Gracias por visitar este repositorio! Espero que este proyecto te sea útil y te inspire a crear tu propio blog con Next.js y Notion. ¡Feliz codificación! 🚀