Como dato importante, GitHub pages solo acepta páginas estáticas, es decir, sin backend, es por eso que se suelen usar API’s para despliegues aquí:D!
Introducción a las aplicaciones web
Qué aprenderás sobre el despliegue de aplicaciones
Historia de las aplicaciones
Apps Monolíticas vs microservicios
Stacks LAMP, MERN, JOTL, JAM
En dónde se pueden desplegar aplicaciones LAMP y JOTL
Despliegue en servicios frontend
Despliegue en Github pages
Despliegue en Surge
Despliegue en Netlify
Despliegue en Vercel
Despliegue de Bases de datos
Desplegando una base de datos NoSql en Mongo Atlas
Desplegando una base de datos relacional en ElephantSQL
Despliegue en servicios backend
Qué es Heroku
Desplegando Api en Heroku
Consultando nuestra API desde Postman
Generar documentación de API con Postman
Conclusiones finales
Capas gratuitas de grandes proveedores
Despedida
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Despliegue en Github pages
6/17Recursos
¿Cómo desplegar tu primera aplicación con GitHub Pages?
Desplegar una aplicación web puede parecer un reto, pero usando herramientas como GitHub Pages, se vuelve mucho más accesible. Aquí te guiaré paso a paso para que puedas lanzar tu propio sitio web de manera gratuita. Todo lo que necesitas es un repositorio en GitHub, y estarás listo para mostrar tu aplicación al mundo.
¿Cómo crear un nuevo repositorio en GitHub?
Primero, debes iniciar sesión en tu cuenta de GitHub y crear un nuevo repositorio. Sigue estos pasos:
- Haz clic en el botón "New Repository" (Nuevo Repositorio), representado con un símbolo de más.
- Asigna un nombre al repositorio con el formato
nombreusuario.github.io. Por ejemplo, si tu usuario esjuanperez, tu repositorio debe llamarsejuanperez.github.io. - Añade una descripción si lo deseas, aunque este paso es opcional.
- Selecciona la opción pública para hacer tu sitio accesible a todos.
- Crea el repositorio.
¿Cómo preparar tu aplicación para GitHub Pages?
Supongamos que ya tienes un proyecto listo para publicar. El proceso es el siguiente:
- Descarga el proyecto existente (puede ser un archivo
.zip). - Descomprime el archivo en tu máquina local.
En este ejemplo, se usará una aplicación que consume la API de SpaceX para mostrar lanzamientos. Asegúrate de tener los archivos HTML, CSS y JavaScript necesarios para que funcione correctamente.
¿Cómo clonar y mover archivos al repositorio?
El siguiente paso es clonar el repositorio que has creado anteriormente. Para hacerlo:
-
Abre la aplicación de escritorio de GitHub o usa la terminal si prefieres trabajar con comandos.
-
Clona el repositorio en la carpeta de documentos o el directorio de tu elección con el siguiente comando:
git clone https://github.com/nombreusuario/nombreusuario.github.io -
Copia los archivos descomprimidos de tu aplicación al repositorio clonado. Usa la consola con el comando
mv, o arrastra y suelta los archivos directamente en la carpeta.mv /ruta-de-tu-app/* /ruta-del-repositorio/
¿Cómo subir y publicar tu proyecto en GitHub Pages?
Con los archivos dentro de tu repositorio, es hora de prepararlos para subirlos a GitHub:
-
Navega a la carpeta del repositorio e ignora los archivos innecesarios como
.DS_Storeen macOS. Crea un archivo.gitignorecon el siguiente contenido:.DS* -
Usa los siguientes comandos para añadir y comitear los archivos:
git add . git commit -m "Add application files" -
Finalmente, sube tus archivos a GitHub con:
git push origin masterTen en cuenta que GitHub ha cambiado el nombre de la rama principal de
masteramain.
¿Cómo verificar y acceder a tu aplicación en GitHub Pages?
Una vez realizado el push, accede a tu cuenta de GitHub y carga la página. Debes ver tu proyecto listado. Ahora, ve a la sección de ajustes del repositorio y busca el apartado de GitHub Pages; debería indicarte que tu sitio está publicado. La URL a la que debes acceder es similar a https://nombreusuario.github.io.
Este es un gran momento, ya que tu aplicación está en línea y accesible para todo el mundo.
Aclaraciones finales para desplegar tus aplicaciones
- La rama principal de los repositorios en GitHub ahora se llama
mainy nomaster. - Si decides usar un subdominio personalizado, como
js.org, para tu GitHub Pages, sigue las instrucciones adicionales para configurarlo.
¡Y ahí lo tienes! En unos simples pasos, has aprendido a desplegar tu primera aplicación con GitHub Pages. Sigue explorando y desarrollando tus habilidades. ¡El mundo del desarrollo web es vasto y emocionante!
Aportes 37
Preguntas 14
Ordenar por:
Para no andar bajando zips y hacer clonado del repositorio les dejo el curso de Git y GitHub https://platzi.com/clases/git-github/
Ayuda mucho a profesionalizar nuestro perfil y mantener todo en orden
En ambientes mac puedes hacer “open .” desde la linea de comandos y te abrira un finder en la carpeta donde esta ubicado el prompt
Quien lo diría, tan fácil como poner
username.github.io
en el nombre del repo xD
Les comparto mi primer Portafolios en Github pages 😄 https://ernestomarrero8.github.io/
https://elmergustavo.github.io/
Logré desplegarlo desde GitHub pages
Yo lo que hice fue lo siguiente.
- Descargar mi repo a mi maquina con git clone.
- Descargar el repo a mi maquina y ponerla en otra branch, de esta manera:
- git remote add space (url del github del spacex)
- git checkout -b spacex
- git branch --set-upstram-to=space/master spacex
- git pull
- git push origin spacex
Hola, Recuerden crear s token antes de hacer git push. Si no saben cómo hacerlo aquí lo explica:
https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
lo unico que hay que hacer es crear el archivo CNAME con el nombre del subdomino y guardarlo en la rama MASTER ?
O hay pasos adicionales para que activen mi subdomio?
No sabia que poner así que copie el HTML de una página que cree en Wix hace tiempo de mi Cv personal
Yo os saludo hijos de Deborah e Ian o amantes de los sombreros. Si tenéis vuestro entorno configurado en una distro cualquiera, encontraréis del .deb o .rpm que necesitáis de GitHub Desktop en este link => https://github.com/shiftkey/desktop/releases/tag/release-2.5.4-linux1
No me lo agradezcáis, el mérito es del héroe que se tomó la molestia de compilarlo ya que en la web oficial no aparece.
Hay que aclarar que github pages solo sirve para publicar sitios estaticos.
estimado profesor , no veo el link del proyecto? para poder descargarlo .
Les comparto mi práctica en esta clase: https://andresgnavarro.github.io
Se podría visualizar mi proyecto de app con una fake api? o mejor aún con un canal de youtube?
Para desplegar tu aplicación en GitHub Pages, sigue estos pasos:
1. **Crear un repositorio**:
- Ve a GitHub y crea un nuevo repositorio. El nombre debe ser `usuario.github.io`.
2. **Clonar el repositorio**:
- En la terminal, usa el comando:
```
git clone https://github.com/usuario/usuario.github.io
```
3. **Mover archivos**:
- Copia los archivos de tu proyecto al repositorio clonado.
4. **Inicializar Git (si es necesario)**:
- Si no lo has hecho, inicializa el repositorio:
```
git init
```
5. **Agregar archivos**:
- Agrega los archivos al staging area:
```
git add .
```
6. **Crear un commit**:
- Realiza un commit:
```
git commit -m "Primer despliegue"
```
7. **Subir tus cambios**:
- Sube tus archivos a GitHub:
```
git push origin master
```
8. **Verifica**:
- Accede a `https://usuario.github.io` para ver tu aplicación.
Sigue cada paso y asegúrate de tener tu usuario de GitHub configurado.
El mensaje de error "fatal: couldn't find remote ref master" indica que Git no puede encontrar la rama "master" en el repositorio remoto. Esto puede suceder por varias razones:
1. **Rama principal renombrada**: GitHub ha cambiado el nombre de la rama principal de "master" a "main". Intenta usar `git push origin main` en su lugar.
2. **Rama no existe en el remoto**: Verifica que realmente hayas creado la rama "master" en el repositorio remoto. Puedes usar `git branch -a` para listar todas las ramas disponibles.
3. **Errores de conexión**: Asegúrate de estar conectado al repositorio correcto y de tener permisos adecuados.
Revisa estos aspectos para solucionar el problema.
Hay alguna forma de que alguien que empieza de casi cero aprenda?? se supone que es la primer clase práctica de la ruta de DevOps y no entendí ni la mitad casi.
Agradezco la ayudo!!
<https://celioso.github.io/spacex-platzi-master-practica/>
Mira que solo me mostro la este témplate
Hola! Quiero comentarles mi caso...
Estoy desplegando una web App en React en digital ocean, pero el front cuando se comunica con el backend falla o es lenta.
Estoy consumiendo micro servicios para pagos y fotos de productos y descripciones, estos también fallan.
Realmente no sé qué estoy haciendo mal. o talvez estoy utilizando mal las herramientas de despliegue ya que en mi entorno local el código funcionaba a la perfección. Agradezco quién me pueda ayudar!
Les dejo mi proyecto:
LINK PERFIL, espero me den feedback
es un comienzo de algo increible
A mi no me funciono simplemente clonando el contenido del repo del profe y haciendo git push en mi propio repositorio, ya que GitHub pages se basa en el directorio /root, y no en el directorio /src, así que lo que hice fue mover todo el contenido de /src en root ( / ) y cambié los comandos del package.json que dirigían al src/, por el /, y la publicación en GitHub pages ya me funciono.
No era mas sencillo solo clonarlo desde la terminal?
No eniendo el finde de hacer todo por terminal, no se entiende que se hizo y pocos van a entender el fin del video. Para terminar haciendo el procedimiento entre windows y terminal.
al realizar:
git push origin main
me presentaba el siguiente error:
remote: Support for password authentication was removed on August 13, 2021
la solución es crear un personal token, se genera en la pagina de github en la parte de <> Developer sttings
< https://wrvp-1.github.io/ >
Subí un formulario de registro como prueba
Crear github page
ghpages es el despliegue mas sencillo que podemos hacer de archivos estaticos
Les comparto mi página en github con plantilla Bootstrap https://juli6464.github.io/
Para los que les aparezca este error:
error: src refspec master does not match any
error: failed to push some refs to 'https://github.com/Benjamin121000/Benjamin121000.github.io.git'
Solo tienen que cambiar:
git push origin master
Por:
git push origin main
Esto se debe a que en 1 de Octubre del 2020, hubo un cambio en todo GitHub ya no se utilizaria Master sino Main, Saludos
Así configuré el servicio con un proveedor gratuito.
Esta fue la forma como logré configurar el sitio, el reto no supe como hacerlo
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?