Publicar una aplicación Next.js en GitHub Pages

Hace poco tomé la decisión de compartir mis experiencias como programador en un blog y, por qué no, comenzar describiendo los pasos que seguí para publicar una aplicación Next.js (Este Blog) en GitHub Pages.

La aplicación que estoy usando es una plantilla clonada de Vercel templates.

Creando el repositorio

Primero, empezamos creando un respositorio publico en GitHub usando la siguiente convención <usuario_github>.github.io. El nombre del repositorio debe comenzar con tu nombre de usuario para que funcione.

2. Puedes clonar el repositorio usando el cliente git de tu preferencia.

3. Crea o copia la aplicación Next.js en el repositorio. En mi caso, cloné la plantilla base de Vercel templates e hice algunos ajustes a mi gusto.

4. Prueba que la aplicación funciona en tu PC.

Esta aplicación está configurada con yarn package manager, por lo tanto, la puedes correr usando el siguiente comando para cargar la aplicación en tu navegador.

yarn dev 

5. Una vez comprobado, commit and push tus cambios en GutHub

Configurando Pages

1. En GitHub, ubica el repositorio <usuario_github>.github.io y navega hacia Settings > Pages.

2. Ubica la sección de Build and deployment, haz click en el Source dropdown y escoge GitHub Actions.

3. Un nuevo worklfow de GitHub aparecerá debajo. Click en el botón Configure.

4. Este workflow será ejecutado cada vez que hagas un commit el la branch main, en donde la aplicación se compila y se publica tan pronto como el commit es realizado.

Puedes guardar el workflow haciendo click en el botón Commit Changes.

5. Añade tu mensaje en el commit y haz click en Commit Changes

6. Puedes navegar hacia la sección Actions y mirar el progreso de la publicacion.

7. Una vez el proceso termine, puedes navegar a la URL que aparecerá en deploy job.

8. Y esto es todo por ahora! Tienes una aplicación Next.js publicada y corriendo en GitHub Pages.