Como Usar JAMStack en WordPress – Parte 2 (Final)

3 minuto(s)

Demo Github

Para poner la cereza al postre, vamos a poner nuestro proyecto en un arquitectura JAMStack.

Las iniciales JAM significan (JavaScript, API y Markup), entonces ya usamos la API de WordPress en la primera parte de este tutorial.

También usamos JavaScript (React JS) y HyperText Markup Language (HTML).

Ahora convertiremos a nuestro WordPress en un Headless CMS o Sistema de Gestión de Contenidos Desacoplado o sin cabeza, vamos con ello.

Partes

  • Parte 1
  • Parte 2 (Final – GitHub)
Headless CMS creado con WordPress y JAMStack
Cuando WordPress pasa a ser un Headless CMS, los creadores pueden seguir redactando contenido sin importar su ubicación

Subida de Proyecto a GitHub

Vamos a subir los archivos del proyecto a GitHub.

Pero no vamos a subir los archivos de desarrollo, sino, su versión compilada.

Para compilar nuestro proyecto, ejecutamos el siguiente comando:


Se nos ha creado un directorio llamado /dist

Este directorio contiene en su interior los archivos del proyecto compilados y listos para subirlos a producción:


Ahora usare la GitHub CLI, la cual me da más control sobre una cuenta de GitHub.

Por ejemplo nos permite crear un repositorio desde la terminal de comandos.

En el siguiente video te enseño a Como Usar la GitHub CLI y crear un repositorio desde una terminal o consola de comandos:

Creo un repositorio en GitHub y lo clono en mi computadora:


Ahora muevo los archivos del directorio /dist al directorio /wordpress-jamstack (los muevo manualmente es decir los copio y pego).

Ingreso al directorio /wordpress-jamstack y ejecuto los siguiente comandos para subir los archivos al repositorio de GitHub creado:


Para esta tarea use la terminal de Visual Studio Code y me sugirió ejecutar el comando git push –set-upstream origin master para subir los cambios al repositorio.

Si voy a GitHub puedo ver que los archivos se han subido al repositorio correctamente:

Repositorio de GitHub del proyecto WordPress JAMStack
También puedes subir los cambios al repositorio de la manera habitual sin usar la GitHub CLI

Cada ves que hagamos cambios al proyecto, siempre debemos subirlos a su repositorio de GitHub.

Hacer de WordPress un Headless CMS

Vamos a la página web de Netlify e iniciamos sesión con nuestra cuenta.

Si no tienes una cuenta, es buen momento para crearla.

Por último creo un nuevo sitio en Netlify y lo conecto al repositorio de wordpress-jamstack que publiqué anteriormente en GitHub.

En este video puedes ver todos los pasos que debes hacer hasta publicar el proyecto:

Si voy a esta URL que me creo Netlify para el proyecto, puedo ver que ha sido publicado y esta funcionando sin problemas.

Con ello hemos terminado de crear nuestro proyecto de JAMStack con WordPress.

Así es como puedes usar JAMStack en WordPress.

Conclusión

En este tutorial has aprendido a Como Usar JAMStack en WordPress.

Te servirá de guía para crear proyectos más avanzados usando JAMStack y WordPress.

Recuerda practicar lo necesarios, así seras un mejor desarrollador.

Nota(s)

  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.