Accede a todo EDteam con un único pago¡Sube a premium!

KeystoneJS, un poderoso CMS Nodejs

Hola comunidad, hoy vengo a presentarles KeystoneJS un poderoso CMS NodeJS para el desarrollo de sitios web que esta construido sobre Express y Mongodb, por cual antes de empezar a usar keystone debes tener instalado NodeJS y mongodb.Keystone tiene características muy interesantes y útiles para el desarrollo de nuestros proyectos y como lo podran ver más adelante también es bastante personalizable,por lo cuál lo podremos adaptar fácilmente a nuestras necesidades.

Diseño web
8 minutos
Hace 6 años
KeystoneJS, un poderoso CMS Nodejs

Hola comunidad, hoy vengo a presentarles KeystoneJS un poderoso CMS NodeJS para el desarrollo de sitios web que esta construido sobre Express y Mongodb, por cual antes de empezar a usar keystone debes tener instalado NodeJS y mongodb.

Keystone tiene características muy interesantes y útiles para el desarrollo de nuestros proyectos y como lo podran ver más adelante también es bastante personalizable,por lo cuál lo podremos adaptar fácilmente a nuestras necesidades.

Algunas de las características de Keystone son las siguientes:

  1. Genera un sistema de administración en base a tus modelos de mongo.
  2. Permite procesar fácilmente cualquier clase de formulario.
  3. Posee un sistema para el envío de emails desde tu sitio web.
  4. Posee un sistema de autenticación y de encriptado de contraseñas.
  5. Usa cloudinary para el almacenamiento de archivos multimedia.

Para crear un nuevo proyecto con Keystone recomiendo instalar su generador con el siguiente comando:

npm install -g generator-keystone

Después creamos una carpeta donde podamos crear nuestro proyecto.

Ahora,instalaremos Yeoman para poder ejecutar el generador.

npm install -g yo

Ya con esto estamos listos para crear nuestro primer proyecto con Keystone, para lo cual ejecutaremos el siguiente comando en la carpeta que hemos creado previamente:

yo keystone

Al momento de ejecutar este comando el generador de Keystone hará varias preguntas, para que puedas personalizar de una manera inicial tu proyecto.

  1. ¿Cuál es el nombre de tu proyecto? Aquí ingresarás el nombre que quieras que aparezca en tu sitio y en la zona administrativa.

  2. ¿Que motor de plantillas quieres utilizar? Aquí te pregunta que motor de plantillas quieres usar en tu proyecto, por defecto viene pug pero puedes usar libremente otras opciones como twig o handlebars.

  3. ¿Que preprocesador de css te gustaría usar? Aquí puedes configurar que preprocesador de css quieres, por defecto viene less pero también puedes escoger entre sass y stylus.

  4. ¿Te gustaría incluir un blog? No siempre vas a necesitar un blog en tus sitios web, pero de necesitarlo Keystone nos permite agregarlo y administrarlo de una manera muy fácil.

  5. ¿Te gustaría agregar una galería? Esta opción permite agregar una galería de imágenes en nuestros proyectos, cabe destacar que todas las imágenes que agregues a esta galería se guardaran en la nube de Cloudinary

  6. ¿Te gustaría agregar un formulario de contacto? Activando esta opción se agregará un formulario de contacto en tu sitio web y todos los mensajes que se envían a través de este formulario serán guardados en la base de datos y podrán ser vistos desde la zona administrativa.

  7. ¿Cómo te gustaría llamar a tu modelo de usuario? Aquí puedes poner el nombre que tendrá tu modelo de usuario de mongo, por defecto viene User.

  8. Ingresa un email para el primer usuario administrativo.

  9. Ingresa una contraseña temporal.

  10. ¿Te gustaría crear un nuevo directorio para tu proyecto? Si seleccionas que no, le estarás indicando al generador que la carpeta actual es donde se generará tu proyecto, en el caso que selecciones que si, se creara una nueva carpeta con el nombre de tu proyecto.

  11. ¿Te gustaría agregar una configuración de email en tu proyecto? Es esta opción si seleccionamos que si, se agregara una plantilla para el envío de correos y se abrirán las opciones de configuración de Mailgun el cual es el servicio que keystone usa para el envío de correos.

  12. ¿Te gustaría incluir comentarios de código? Esta opción es bastante útil si estas empezando con Keystone, ya que agrega muchos comentarios en tu código para que así puedas estudiarlo de una manera más fácil.

Ya con todo esto hecho el generador de Keystone empezará a crear toda la estructura de nuestro proyecto.

Cuando termine podremos ejecutar el siguiente comando en la carpeta de nuestro proyecto:

node keystone.js

Esto iniciará nuestro proyecto en el puerto 3000,pero antes de ejecutarlo asegúrate que el servicio de MongoDB este corriendo para que así pueda funcionar.

Ya cuando abramos en el navegador el puerto 3000 tendremos el siguiente sitio

En la sección de login tendremos lo siguiente

y por ultimo en la zona administrativa donde podremos acceder después de hacer el login tendremos la siguiente interfaz

Esto fue todo por el post de hoy, espero que te haya gustado y cuéntame si has usado keystone en alguno de tus proyectos. Hasta la próxima 😉

Te invito a visitar mi sitio web para conocer un poco más sobre mi trabajo.Alejandro García Serna

Comentarios de los usuarios

Pregunta a ChatEDT