Github Pages ofrece un servicio valioso al permitirte alojar un sitio web estático directamente desde un repositorio Git. Es una plataforma ideal para desarrolladores individuales que desean mostrar sus portafolios, apoyar proyectos de código abierto o difundir información sobre instituciones educativas u organizaciones.
Muchos proyectos prominentes utilizan Github Pages para el alojamiento, incluyendo algunos conocidos como Bootstrap, NormalizeCSS y Yelp.
Este tutorial te guiará a través de los pasos para crear y publicar un sitio simple utilizando Github Pages. Se asume que tienes un conocimiento básico de Git y sus comandos, como cómo crear y enviar commits a un repositorio remoto. Si no, te recomiendo que consultes nuestra guía: 30 Comandos Básicos de Git que Debes Conocer.
¡Empecemos!
Paso 1: Crear un Repositorio
Primero, necesitas una cuenta de Github para crear un repositorio. Puedes nombrar el repositorio como quieras; no hay requisitos específicos de nomenclatura.
Después de crear el repositorio, el siguiente paso es clonarlo en tu computadora local. Si tienes instalada la aplicación Github Desktop, puedes hacerlo fácilmente yendo a File > Clone Repository dentro de la aplicación.
Alternativamente, puedes clonar el repositorio usando la interfaz de línea de comandos (CLI) de git, por ejemplo:
git clone https://github.com/codigonautas/primera-aventura.gitPaso 2: Crear la Página Principal
Para configurar una página de inicio, Github busca principalmente un archivo llamado index.html. También puede utilizar index.md o README.md. Este archivo se puede colocar en la raíz de tu repositorio o dentro de un subdirectorio para separar tu sitio del código fuente principal, comúnmente en el directorio docs o site.
En este ejemplo, mostraré cómo agregar un archivo index.html en el directorio docs, complementado con estilos y scripts de Bootstrap.
Con los archivos en su lugar, ahora podemos agregarlos y enviarlos al repositorio de Github.
Paso 3: Configurar el Despliegue de la Página
En tu repositorio de Github, navega a Settings > Pages. Aquí, selecciona la fuente que deseas desplegar como Github Pages. Como hemos colocado el archivo index.html en el directorio docs, elige la rama apropiada y configura el directorio a /docs en la sección «Build and deployment».
Eso completa la configuración de tu sitio Github Pages. El sitio será accesible a través de un patrón de URL proporcionado por Github. Por ejemplo, si tu repositorio está en github.com/codigonautas/primera-aventura, entonces tu sitio Github Pages estará en codigonautas.github.io/primera-aventura. Demo.
Bonus: Usando un Dominio Personalizado
Usar un dominio personalizado para tu sitio Github Pages proporciona una URL personalizada que es más fácil de recordar y mejora la marca de tu sitio. Aquí te explicamos cómo configurarlo.
Paso 1: Agregar un Registro DNS
Para empezar, agrega un registro DNS para vincular tu dominio personalizado a Github Pages. Por ejemplo, si deseas utilizar primera-aventura.codigonautas.net, deberás crear un registro CNAME en el administrador de DNS de tu dominio que apunte a codigonautas.github.io.
Si no estás seguro de dónde encontrar el administrador de DNS o cómo agregar una nueva entrada de DNS, contacta con tu registrador de dominio para obtener ayuda.
Paso 2: Esperar la Propagación del Dominio
Después de configurar el registro DNS, se necesita algo de tiempo para que los cambios se propaguen, lo cual puede variar desde unos minutos hasta 24 horas. Puedes monitorearlo con herramientas de propagación de DNS como WhatsMyDNS o usando el siguiente comando:
dig primera-aventura.github.io +nostats +nocomments +nocmdUna vez que se confirma la propagación del DNS, es posible que veas resultados similares a estos:
Paso 3: Agregar Dominio al Repositorio
Una vez que se completa la propagación del DNS, informa a Github sobre tu dominio personalizado. Ve a la configuración de tu repositorio, dirígete a la sección Páginas e ingresa tu dominio personalizado en el campo Dominio personalizado. Github verificará el dominio y lo configurará. Una vez verificado, también puedes asegurar tu sitio habilitando la opción «Enforce HTTPS«.
¡Ahora tu sitio Github Pages debería ser accesible a través de tu dominio personalizado!
