Servidores

Alojar página web en GitHub

En este tutorial te enseñaré cómo alojar tu sitio web o aplicación web en GitHub totalmente gratis. Si bien GitHub no está pensado como un servicio de hosting, podemos ejecutar nuestras aplicaciones dentro del servicio.

Te enseñaré cómo usar GitHub para servir tu proyecto web. Por ahora solo te mostraré cómo usarlo para servir JavaScript, HTML y CSS (pues no podemos procesar nada del lado del servidor).

Así que, que quede claro: solo va a funcionar para las cosas del lado del cliente y no del lado del servidor sin importar el lenguaje de programación.

Pero no te preocupes, para un portafolio o aplicación web funcionará de maravilla, siempre y cuando no utilice backend.

Requisitos

Obviamente no te voy a enseñar paso por paso. Aquí necesitas tener una cuenta de GitHub (es gratis crearla) y necesitas saber cómo crear un repositorio.

Si quieres un tutorial usando Windows puedes hacer clic aquí.

Creando repositorio

Crea tu repositorio con el nombre que quieras. Este nombre sí es importante, pues aparecerá al final de la URL para acceder, así:

tu_usuario.github.io/nombre_del_proyecto

Así que si quieres, por ejemplo, colocar tu portafolio, podría llamarse “portafolio” de modo que su URL será tu_usuario.github.io/portafolio.

Crea el repositorio y sube todo lo necesario. En mi caso tengo una sencilla aplicación con Vue y JavaScript, así que he subido el HTML, JavaScript, etcétera y se ve así:

Repositorio para publicar página web en GitHub

Publicando repositorio

Ahora ya estando en GitHub ve a los ajustes de tu repositorio dentro de Settings (fíjate en la imagen de arriba, en la parte superior está el icono de un engrane).

Luego ve a Pages > y elige Main en la rama, finalmente haz clic en Save.

Publicar aplicación web en GitHub usando GitHub Pages

Aparecerá una alerta indicando la URL en donde tu proyecto está servido:

Página publicada y alojada en GitHub

Si quieres ver mi proyecto puedes verlo aquí.

Conclusión

Lo bueno de todo esto es que cuando hagas actualizaciones en el repositorio (es decir, dentro del código del proyecto) los cambios se van a reflejar en el sitio web casi de manera instantánea.

Como lo dije, si bien esto no es un hosting, funciona muy bien. En mi caso lo utilizo para publicar algunas aplicaciones sencillas pues de este modo puedo mantenerlas actualizadas sin realizar el despliegue en otras plataformas.

Por cierto, también es posible desplegar aquí aplicaciones de Angular, React y Vue, ya que los 3 frameworks “compilan” a JavaScript al final, así que puedes compilar y después simplemente desplegar en GitHub.

Te repito: esto funciona si tu app no usa backend.

Esto abre muchas posibilidades. Se me ocurre que incluso podrías tener un gestor de contenido local (en Python, PHP o cualquier lenguaje que te guste) que al final genere contenido estático y lo suba a GitHub.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Imprimir ñ en impresora térmica

En este post te enseñaré a imprimir la letra ñ en una impresora térmica. Voy…

1 día hace

Tramitar acta de nacimiento en línea de manera instantánea

En este post te quiero compartir mi experiencia tramitando un acta de nacimiento de México…

2 días hace

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 semanas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

3 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

3 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

3 semanas hace

Esta web usa cookies.