Este post es la segunda parte de uno anterior en el que explicaba el paso a paso de cómo crear una página web gratuita en GitHub Pages.
En el post anterior aprendíamos a crear y alojar nuestra web en GitHub Pages y en este aprenderemos cómo configurarle un nombre de dominio propio.
Requisitos previos:
- Haber publicado una web en GitHub Pages siguiendo los pasos del post anterior.
- Comprar un nombre de dominio con alguna empresa registradora. Su coste suele rondar los 10 € anuales. Debes tener en cuenta que el coste del dominio se paga todos los años. Si dejas de pagarlo, dejarás de ser el propietario del dominio y quedará libre para que cualquier otro usuario pueda comprarlo.
Para nuestro ejemplo, hemos comprado el nombre de dominio “aprendeusabilidadyux.com”.
Paso 1: añadir una entrada de tipo CNAME en las DNS del dominio
El paso 1 y el paso 2 son intercambiables. Es decir, no es relevante cuál realices primero y cuál después.
Al crear una nueva entrada de tipo CNAME en el registro de DNS del dominio, lo que estamos haciendo es decirle a los navegadores y buscadores que cuando entren en www.aprendeusabilidadyux.com, realmente deben mostrar el contenido de nuestro repositorio de GitHub Pages.
Para ello debes entrar al panel de control que te habrá facilitado la empresa en la que has comprado el dominio y añadir una nueva entrada a los registros DNS.
Esta nueva entrada tendrá las siguientes propiedades:
- Host: www
- Tipo: CNAME
- Valor: [nombreusuario].github.io
Naturalmente sustituyendo [nombreusuario] por el correspondiente a nuestro proyecto. Si tienes dudas en este punto, vuelve a consultar la primera parte de este tutorial que se encuentra en un post anterior.
Aviso importante: aunque el cambio que acabas de realizar pueda estar visible en tu panel de control inmediatamente, la realidad es que las modificaciones a nivel de DNS pueden llegar a tardar entre 12 y 24 horas en propagarse a todo el mundo. A veces bastante menos otras veces incluso algunas horas más. Por lo que tendrás que esperar un tiempo hasta que GitHub Pages pueda detectar el cambio.
Paso 2: añadir cuatro entradas de tipo A en las DNS del dominio
De cara al óptimo posicionamiento en buscadores (SEO), no es conveniente que nuestra página web pueda ser consultada tanto con las “www” como sin ellas. Es decir, que pueda ser consultada tanto con el dominio raíz “aprendeusabilidadyux.com” como con el subdominio “www.aprendeusabilidadyux.com”. Ya que los buscadores considerarán que estamos sirviendo contenido duplicado. Para ellos el dominio raíz y el subdominio “www” son dos “direcciones de internet” diferentes.
Lo más conveniente es decantarse por una de las dos como la dirección canónica de nuestro sitio web. En mi caso, prefiero el subdominio “www” como dirección canónica. Preferencia que debo indicar en la configuración de GitHub Pages. Explico cómo en el paso 3.
Para que GitHub Pages nos redireccione correctamente los accesos sin "www" al subdominio con las "www", debemos dirigir el tráfico entrante en el dominio raíz a las cuatro IPs públicas y fijas del servicio de GitHub Pages. Para ello debes entrar al panel de control que te habrá facilitado la empresa en la que has comprado el dominio y añadir cuatro nuevas entradas a los registros DNS.
Estas cuatro nuevas entradas (una por cada IP pública de GitHub Pages) tendrán las siguientes propiedades:
- Host: dejarlo en blanco.
- Tipo: A.
- Valor: 185.199.108.153
- Host: dejarlo en blanco.
- Tipo: A.
- Valor: 185.199.109.153
- Host: dejarlo en blanco.
- Tipo: A.
- Valor: 185.199.110.153
- Host: dejarlo en blanco.
- Tipo: A.
- Valor: 185.199.111.153
De nuevo te recordamos que las modificaciones a nivel de DNS pueden llegar a tardar entre 12 y 24 horas en propagarse a todo el mundo.
Paso 3: configurar nuestro dominio personalizado en GitHub Pages
Para ello deberemos acceder a la pestaña “Settings” de nuestro repositorio y después entrar en la opción “Pages”.
Una vez dentro, debemos escribir el nombre de nuestro nombre de dominio personalizado que hayamos escogido como canónico en el formulario de “Custom domain” y pulsar en “Save”.
La acción de guardar lanzará a su vez tres procesos en GitHub Pages.
El primer proceso que se completará es el de añadir un commit automático a nuestro repositorio que incorporará un fichero nuevo llamado CNAME.
Este fichero contendrá en su interior el nombre de dominio personalizado que hayamos introducido en el formulario anterior.
Como ya habrás intuido, no debemos eliminar ni modificar este fichero CNAME por nuestra cuenta.
El segundo proceso que lanzará GitHub Pages será el de comprobar si el dominio que hemos introducido tiene una entrada CNAME correctamente configurada en sus registros DNS.
Si no ha transcurrido el tiempo suficiente para que la modificación de DNS se haya propagado, obtendremos un mensaje de error similar al siguiente:
En caso de error, deberemos esperar unas horas más y probar de nuevo con el botón “Check again”. Al final el proceso se completará correctamente y obtendremos un check verde de OK.
Paso 4: activar el protocolo HTTS para nuestro configurar nuestro dominio personalizado en GitHub Pages
El tercer y último proceso que se habrá lanzado tras pulsar el botón de “Save” del paso anterior habrá sido el de crear un certificado SSL gratuito para nuestro sitio web. GitHub Pages nos indicará el estado del proceso mediante una barra de progreso.
Cuando el proceso haya finalizado, nos permitirá chequear la casilla de “Enforce HTTPS”. La cual es más que recomendable que activemos para que nuestro sitio web se sirva encriptado y seguro.
Una vez completados todos los pasos anteriores y haber esperado los plazos necesarios para que los nuevos registros DNS se propaguen, podremos escribir el dominio en nuestro navegador y disfrutar de la web que hemos desarrollado.
En nuestro caso en https://www.aprendeusabilidadyux.com/
Y recuerda que si quieres actualizar el contenido de la página puedes hacerlo en cualquier momento subiendo los cambios al repositorio GitHub correspondiente. Tal y como lo explico en detalle en la primera parte de este post.
Nota: GitHub proporciona una completa documentación sobre cómo configurar un dominio propio en GitHub Pages.