Skip to content

Instantly share code, notes, and snippets.

@caprosset
Last active November 1, 2023 12:30
Show Gist options
  • Save caprosset/f74506f4fd10ab60b2c689d2cf216735 to your computer and use it in GitHub Desktop.
Save caprosset/f74506f4fd10ab60b2c689d2cf216735 to your computer and use it in GitHub Desktop.
Github Pages deployment - M1

M1 - Deployment (ES)

Actualizar el proyecto y guardar los últimos cambios

Antes de despliegar/subir nuestro proyecto, primero guardaremos los últimos cambios con un commit y subiremos estos cambios a GitHub (git push origin master o git push origin main dependiendo de cómo se llame la rama principal).

Desde la terminal, nos situamos dentro de la carpeta raíz de nuestro proyecto y ejecutamos los siguientes comandos:

git add .

git commit -m "Deploy the app with GitHub Pages"

git push origin master 

Crear una nueva rama gh-pages en nuestro proyecto

Desde la terminal, mientras estamos dentro de la carpeta raíz de nuestro proyecto, ejecutamos el siguiente comando para crear una nueva rama que llamaremos gh-pages (importante respectar este nombre):

git checkout -b gh-pages

Esto creará una nueva rama en nuestro proyecto (en local) y nos colocará automáticamente en esta nueva rama.

Esta rama servirá para despliegar nuestro proyecto y subirlo a github pages.

Para ver todas la ramas que tiene el proyecto:

git branch

Subir nueva rama a GitHub

Para subir (o pushear) la nueva rama recién creada en el repositorio local, desde la terminal ejecutamos el siguiente comando:

git push origin gh-pages

Activar GitHub Pages (deploy live)

El paso final para despliegar el proyecto es activar la opción de GitHub Pages. Para eso, vamos a la página del repositorio en GitHub y abrimos el panel de Ajustes (Settings).

img


  1. Una vez allí, nos desplazamos hacia abajo en la sección GitHub Pages.

  2. Hacemos clic en el menú desplegable, debajo del título Source.

  3. Seleccionamos como fuente la rama gh-pages, haciendo clic en la rama gh-pages.

  4. Esto publicará el proyecto y nos proporcionará el enlace de la versión online del proyecto.

    Normalmente, si la rama gh-pages fue creada anteriormente, los 4 pasos anteriores serán hechos automáticamente.


Continuar trabajando en el proyecto desde la rama master o main

Después de despliegar vuestro proyecto online, y antes de seguir trabajando en el código, nos cambiamos de vuelta a la rama master (o main, dependiendo cómo se llame). La rama gh-pages sólo se utilizará para implementar el proyecto a GitHub pages y subirlo online.

Desde la terminal, mientras estamos dentro de la carpeta raiz de nuestro proyecto, ejecutamos el siguiente comando para cambiar a la rama master:

git checkout master

Después de este paso podemos continuar trabajando en el proyecto.


Subir el proyecto actualizado de nuevo a GitHub Pages

Cada vez que deseamos subir/despliegar las actualizaciones que realizamos en el proyecto, debemos seguir los siguientes pasos:

  1. En la rama master (o main), guardamos todos los cambios y creamos un nuevo commit:

    git add .
    
    git commit -m "Deploy the app with GitHub Pages"
    
    git push origin master
  2. Una vez hecho, nos colocamos en la rama gh-pages:

    git checkout gh-pages
  3. Traemos todos los cambios (incluyendo el commit nuevo) de la rama master a la rama gh-pages:

    git merge master

    Esto copiará todos los cambios que existen en la rama master (o main) y los pegará en la rama en la que estamos actualmente gh-pages.

  4. Subimos la rama actualizada (gh-pages) a GitHub.

    git push origin gh-pages

    Esto despliegará el nuevo código y lo subirá online.

  5. Después pushear del código nuevo y antes de continuar con el proyecto, nos cambiamos a la rama master.

    git checkout master
    

    La rama gh-pages sólo se utilizará para subir el proyecto a GitHub pages y tenerlo online.


Eso es todo 🎉👩‍💻👨‍💻

@claumiranda
Copy link

👍🏼excelente info..me súper sirvió..Graciaaaas!!!!!!!

@manuelortizus
Copy link

👌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment