Publicar tu primer sitio web en internet es más fácil de lo que imaginas. Con GitHub Pages, un servicio gratuito integrado en GitHub, puedes convertir cualquier repositorio en una aplicación web funcional con HTML, CSS y JavaScript, utilizando una API como fuente de datos externa. A continuación se explica paso a paso cómo lograrlo.
¿Cómo crear el repositorio correcto para GitHub Pages?
El primer paso es iniciar sesión en github.com y crear un nuevo repositorio [0:14]. Si no encuentras el botón principal, puedes usar el ícono de "+" y seleccionar New Repository. Lo importante aquí es el formato del nombre del repositorio: debe seguir la estructura tu-usuario.github.io. Por ejemplo, si tu usuario es santiagof1, el repositorio se llamará santiagof1.github.io [0:30].
- La descripción es opcional; puedes escribir algo como "My personal website".
- El repositorio debe ser público.
- No es necesario inicializar con un README si vas a subir código existente.
Este formato específico de nombre es lo que le indica a GitHub que debe tratar ese repositorio como un sitio web servido automáticamente.
¿Cómo subir los archivos del proyecto al repositorio?
Para el ejemplo se utiliza un proyecto llamado Platzi Nauta, una aplicación que consume la API de SpaceX para mostrar información sobre lanzamientos espaciales [1:02]. El flujo es el siguiente:
- Descargar el proyecto en formato
.zip y descomprimirlo.
- Clonar el repositorio recién creado usando el cliente de escritorio de GitHub o la terminal [1:30].
- Mover el contenido del proyecto descomprimido hacia la carpeta del repositorio clonado.
Desde la terminal puedes usar el comando mv con un asterisco para copiar todos los archivos de una carpeta a otra [2:08]. También puedes hacerlo arrastrando archivos desde la interfaz gráfica de tu sistema operativo.
¿Qué es el archivo .gitignore y por qué es importante?
Antes de subir los archivos, conviene crear un archivo llamado .gitignore [2:50]. Este archivo le dice a Git qué archivos debe ignorar y no subir al repositorio. En macOS, por ejemplo, se genera automáticamente un archivo .DS_Store que no es relevante para el proyecto. Basta con agregar .ds* dentro del .gitignore para excluirlo.
¿Cómo hacer el push hacia GitHub?
Una vez que los archivos están en su lugar, se ejecutan los comandos de Git [3:10]:
git add . para agregar todos los archivos al área de preparación.git commit -am "[add repo]" para crear un commit con un mensaje descriptivo.git push origin master para enviar todo al servidor de GitHub.
Si es la primera vez que haces push desde tu equipo, GitHub te pedirá usuario y contraseña para autenticarte.
¿Cómo verificar que tu sitio está publicado?
Después del push, recarga la página del repositorio en GitHub y verás todos los archivos del proyecto listados [3:50]. Para confirmar la publicación:
- Ve a la pestaña Settings del repositorio.
- Busca la sección GitHub Pages en la parte inferior.
- Allí encontrarás la URL donde tu sitio ya está disponible, con el formato
tu-usuario.github.io [4:10].
Al hacer clic en esa URL, el proyecto Platzi Nauta aparece completamente funcional, mostrando los lanzamientos de SpaceX con la posibilidad de ver detalles de cada uno [4:25].
¿Qué más debes saber sobre GitHub Pages?
Hay dos aclaraciones relevantes. La primera es que la rama Master, históricamente la rama principal en cualquier repositorio, está cambiando de nombre en GitHub a Main [4:45]. Este cambio responde a una decisión de la comunidad que busca un lenguaje más inclusivo.
La segunda es la posibilidad de configurar un dominio personalizado o subdominio para tu sitio en GitHub Pages [5:00]. En lugar de usar usuario.github.io, puedes apuntar un dominio propio como js.org para que tu sitio tenga una URL más profesional.
Si ya desplegaste tu sitio, comparte en los comentarios cómo quedó y qué dominio configuraste. En el siguiente paso se explorará el despliegue de aplicaciones usando otro servicio llamado Source.
