Como Usar JAMStack en WordPress – Parte 2 (Final)

Nube Colectiva

hace 7 meses

Como Usar JAMStack en WordPress - Parte 2 (Final)

En esta página:

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)

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:


npm run build

> wordpress-jamstack@0.0.0 build
> vite build

vite v5.2.11 building for production...
✓ 76 modules transformed.
dist/index.html                   0.89 kB │ gzip:  0.53 kB
dist/assets/index-LW6A4N_c.css    1.37 kB │ gzip:  0.71 kB
dist/assets/index-D1Ow4XNx.js   173.77 kB │ gzip: 58.14 kB
✓ built in 871ms

npm run build

> wordpress-jamstack@0.0.0 build

> vite build

vite v5.2.11 building for production...

✓ 76 modules transformed.

dist/index.html 0.89 kB │ gzip: 0.53 kB

dist/assets/index-LW6A4N_c.css 1.37 kB │ gzip: 0.71 kB

dist/assets/index-D1Ow4XNx.js 173.77 kB │ gzip: 58.14 kB

✓ built in 871ms

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:


/wordpress-jamstack   
    ├── /dist // Se ha creado este directorio 
        ├── /assets 
        ├── index.html 
        ├── vite.svg 
    ├── /node_modules 
    ├── /public
    ├── /src
    ├── .eslintrc.cjs
    ├── .gitignore 
    ├── index.html      
    ├── package.json 
    ├── README.md
    ├── vite.config.ts

/wordpress-jamstack

├── /dist // Se ha creado este directorio

├── /assets

├── index.html

├── vite.svg

├── /node_modules

├── /public

├── /src

├── .eslintrc.cjs

├── .gitignore

├── index.html

├── package.json

├── README.md

├── vite.config.ts

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:


gh repo create wordpress-jamstack --public --clone 

✓ Created repository collectivecloudperu/wordpress-jamstack on GitHub
  https://github.com/collectivecloudperu/wordpress-jamstack

gh repo create wordpress-jamstack --public --clone

✓ Created repository collectivecloudperu/wordpress-jamstack on GitHub

https://github.com/collectivecloudperu/wordpress-jamstack

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:


git add . 

git commit -m "Cambios" 

git push --set-upstream origin master   
      
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 12 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (7/7), 59.06 KiB | 7.38 MiB/s, done.
Total 7 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/collectivecloudperu/wordpress-jamstack.git
 * [new branch]      master -> master
branch 'master' set up to track 'origin/master'.

git add .

git commit -m "Cambios"

git push --set-upstream origin master

Enumerating objects: 7, done.

Counting objects: 100% (7/7), done.

Delta compression using up to 12 threads

Compressing objects: 100% (7/7), done.

Writing objects: 100% (7/7), 59.06 KiB | 7.38 MiB/s, done.

Total 7 (delta 0), reused 0 (delta 0), pack-reused 0

To https://github.com/collectivecloudperu/wordpress-jamstack.git

* [new branch] master -> master

branch 'master' set up to track 'origin/master'.

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:

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.

Sabías que el equipo de Google Developers crear proyectos JAMStack constantemente.

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.

Conoce Los 5 Mejores Editores de Código Para JavaScript.

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.