Recientemente renové mi versión de código abierto de 2048 Game y decidí migrarla a Next.js y React 18. El juego existente se publicó en GitHub Pages sin ningún dominio personalizado. Estaba considerando implementar en Vercel, pero perdería el tráfico orgánico de Google que se acumuló durante los últimos 3 años. Significa que necesitaba experimentar con la implementación en páginas de GitHub y hoy compartiré lo que aprendí. Si quieres ver el resultado final antes de leer el artículo completo, puedes . compruébalo aquí Introducción rápida Usaré dos funciones de GitHub: GitHub Actions y GitHub Pages. Si no has oído hablar de ellos, déjame explicarte rápidamente: son como pequeños flujos de trabajo que pueden realizar tareas en tus proyectos. Es como tener un ayudante que automáticamente hace las cosas que usted le dice que haga. Puede utilizar Acciones para ejecutar pruebas, realizar controles de calidad o crear su aplicación. En mi caso, utilicé estos flujos de trabajo para automatizar el proceso de implementación. Las GitHub Actions ¿Qué son ? Piense en ellos como una opción de alojamiento web para desarrolladores y proyectos de código abierto. Puedes usar GitHub Pages para compartir tus portafolios, alojar sitios web de tus proyectos de código abierto o simplemente publicar tus proyectos favoritos como el mío. las páginas de GitHub Ahora comencemos. Paso 1: active las páginas de GitHub para su repositorio Para publicar nuestra aplicación Next.js, necesitaba activar GitHub Pages para el repositorio del proyecto. Puede encontrarlo en la pestaña Configuración (1 en la imagen a continuación), luego seleccionar en el menú del lado izquierdo (2) y buscar el menú desplegable que nos permite especificar la de implementación (3). Páginas Fuente Ahora deberá cambiar la de implementación a . fuente GitHub Actions A partir de ahora, tu proyecto tiene una página dedicada. Sólo necesitas publicar contenido allí. Paso 2: configurar el proceso de compilación de Next.js Antes de implementar la aplicación Next.js, es importante cambiar el resultado de la compilación. De forma predeterminada, Next.js usa Node.js para ejecutar la aplicación y esto es incompatible con GitHub Pages. GitHub Pages está diseñado para alojar archivos estáticos, lo que significa que solo podemos publicar HTML, CSS, JavaScript (y otros archivos estáticos) allí. Entonces necesitaremos habilitar la generación de páginas estáticas en Next.js. Para hacerlo, cambiará el modo de salida para dentro de : export next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", // <=== enables static exports reactStrictMode: true, }; module.exports = nextConfig; Ahora, después de ejecutar , Next.js generará una carpeta que contiene recursos estáticos para su aplicación. En los próximos pasos, tomaremos este directorio y lo cargaremos en GitHub Pages. next build out Paso 3: arreglar las imágenes que faltan Las páginas se publican en una subruta de un dominio y toman el nombre del proyecto como subruta. ¿Confuso? Echemos un vistazo a una URL de mi juego 2048 como ejemplo: https://mateuszsokola.github.io/2048-in-react/ Github creó un subdominio dedicado para mi usuario llamado . Pero el proyecto se publica en la subruta, que en mi caso es . Desafortunadamente, esto generará problemas con imágenes y estilos faltantes. mateuszsokola (mi nombre de usuario) /2048-in-react De forma predeterminada, Next.js asigna todos los activos estáticos del dominio. Esto significa que el archivo se resolverá en en lugar de . favicon.ico mateuszsokola.github.io/favicon.ico mateuszsokola.github.io/2048-in-react/favicon.icon Para solucionar este problema, podemos configurar un prefijo de ruta agregando dentro del archivo : basePath next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { basePath: "/2048-in-react", // <=== here it is output: "export", reactStrictMode: true, }; module.exports = nextConfig; En mi caso es ya que mi proyecto se llama . /2048-in-react 2048-in-react Recuerde incluir ( / ) al comienzo del directorio del proyecto. Paso 4: crear acciones de Github Next.js está produciendo artefactos de implementación que se pueden publicar en páginas de GitHub. Ahora es el momento de configurar Github Actions para publicarlas. Decidí la implementación en dos acciones separadas para promover la reutilización: La acción configurará Node.js e instalará todas las dependencias. Tener una acción independiente para la configuración de Node.js me permitirá reutilizarla para otras canalizaciones. Por ejemplo, tengo tuberías que corren y . Probablemente también quieras tener más de una acción. setup-node codificador pruebas La acción creará artefactos Next.js y los publicará en GitHub Pages cada vez que fusionemos código en la rama . publish main Permítanme comenzar explicando la acción del . Aquí está el código: setup-node # File: .github/workflows/setup-node/action.yml name: setup-node description: "Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧" runs: using: "composite" steps: - name: Setup Node.js ⚙️ uses: actions/setup-node@v4 with: node-version: 20 - name: Cache dependencies ⚡ id: cache_dependencies uses: actions/cache@v3 with: path: node_modules key: node-modules-${{ hashFiles('package-lock.json') }} - name: Install dependencies 🔧 shell: bash if: steps.cache_dependencies.outputs.cache-hit != 'true' run: npm ci : cree este archivo en el directorio de su proyecto. Asegúrate de llamarlo . Importante .github/workflows/setup-node action.yml ¿Qué hace este fragmento? Crea una acción . La acción le permite agrupar varios pasos del flujo de trabajo en una sola acción. Si no está claro, lo entenderás una vez que entremos en la segunda acción. composite composite Crea un nuevo entorno de compilación utilizando Node.js 20 e instala las dependencias del proyecto. Estas son las partes más importantes de la acción del . Ahora, pasemos a la acción : setup-node publish # File: .github/workflows/publish.yml name: publish-to-github-pages on: push: branches: - main permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: build: runs-on: ubuntu-latest steps: - name: Checkout 🛎️ uses: actions/checkout@v4 - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧 uses: ./.github/workflows/setup-node - name: Setup Pages ⚙️ uses: actions/configure-pages@v4 with: static_site_generator: next - name: Build with Next.js 🏗️ run: npx next build - name: Upload artifact 📡 uses: actions/upload-pages-artifact@v3 with: path: ./out deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Publish to GitHub Pages 🚀 id: deployment uses: actions/deploy-pages@v4 Cree este archivo en el directorio de su proyecto. Puedes nombrar el archivo como quieras; yo llamé al mío . .github/workflows publish.yml ¿Que hace? Esta acción se activa cada vez que el nuevo código se inserta o fusiona en la rama . main Utiliza la acción para configurar el entorno. La acción que creé en la acción anterior. Ahora ya sabes cómo incluir tus acciones en otras acciones. setup-node composite composite La acción tiene dos etapas: en la primera etapa, se está creando la aplicación Next.js. En la segunda etapa, los artefactos de la primera etapa se cargan en GitHub Pages. Estos son los aspectos más importantes del proceso de implementación. Omití los permisos y la configuración de simultaneidad ya que permanecen sin cambios para todas las implementaciones de GitHub Pages. Ahora, la acción está lista para usarse. Comprometerse y presionar Después de confirmar y enviar sus cambios a la rama , GitHub activará automáticamente la implementación en GitHub Pages. main Para inspeccionar el proceso, navegue hasta la pestaña (1 en la imagen a continuación) y seleccione la acción en el menú del lado izquierdo (2) Verá todas sus implementaciones en la pantalla (se llaman ). Acciones publicar en páginas de github . flujos de trabajo Ahora seleccione el primero de esos flujos de trabajo y verá una implementación de dos etapas. En la etapa , puede encontrar un enlace a su sitio web en GitHub Pages. de implementación Conclusión Github Pages no es suficiente para alojar sitios web con millones de visitas. Pero es una opción perfecta para alojar su portafolio o un sitio web para su proyecto de código abierto. Existen muchas opciones gratuitas para alojar nuestros sitios web como Vercel, pero quería mostrarles una alternativa. GitHub Pages está diseñado para desarrolladores y creo que todos los desarrolladores deberían estar familiarizados con él. Si este artículo te ayudó, compártelo en tus redes sociales. ¿Y dónde implementas tu aplicación? ¿Siempre es Vercel? Aprenda React 18 y Next.js ¿No te sientes fuerte con React o Next.js? ¡Únete a mi curso en línea en Udemy! Te ayudaré a comenzar con React creando un Juego 2048 completamente funcional. Creo que crear juegos hace que el aprendizaje sea más divertido y tendrás algo interesante que mostrarles a tus amigos. 👇👇👇👇 🧑🎓 Únete Curso de React 18 y Next.js en Udemy – 80% de descuento solo esta semana.
