Este post es un tanto off topic dentro de la temática de este blog, pero creo que puede ser de interés para aquellos de vosotros que queráis publicar una web de manera sencilla, rápida y gratuita.
GitHub, la archifamosísima plataforma de alojamiento de proyectos de software bajo el sistema de control de versiones Git, ofrece un sistema de alojamiento y publicación de páginas web completamente gratuito llamado GitHub Pages.
Existen decenas de tutoriales y guías en internet sobre cómo usar y configurar GitHub Pages. Mi aportación pretende ser un sencillo paso a paso para aquellos de vosotros que queráis ver publicada vuestra web en cuestión de minutos. Lo explicaré mediante un caso práctico.
Requisitos previos:
- Disponer de una cuenta de GitHub (es gratis).
- Tener Git instalado en tu equipo (es gratis).
- Saber lo básico sobre el uso de Git. Tienes cientos de tutoriales en internet para aprender, pero si Git no forma parte habitual de tu flujo de trabajo quizá GitHub Pages no es la mejor alternativa para alojar tu web.
- Saber lo básico sobre edición HTML y CSS. Nuevamente, si no estás mínimamente habituado a trabajar con HTML y CSS, GitHub Pages tampoco es la mejor solución para tu caso.
Supongamos que has escrito un libro titulado “Aprende usabilidad y experiencia de usuario”. Este libro lo tienes a la venta en la página web de la editorial que te lo ha publicado. Tú intención es desarrollar y publicar una landing page para promocionar su venta.
Paso 1: crear un repositorio en GitHub
Cuando en GitHub creas un repositorio con el mismo nombre que tu usuario de GitHub seguido de la expresión “.github.io” le estás diciendo a GitHub que lo que subas a ese repositorio lo publique como una web en la URL https://[nombreusuario].github.io
En nuestro ejemplo el nombre de usuario es “aprendeusabilidadyux”:
Paso 2: clonar el repositorio de GitHub a nuestro equipo
Para ellos ejecutaremos en el directorio local de nuestra elección el comando:
git clone https://[nombreusuario]@github.com/[nombreusuario]/[nombreusuario].github.io
Nos avisará de que el repositorio que hemos clonado está vacío, pero no pasa nada. Entraremos en el directorio que nos ha creado (en nuestro ejemplo “aprendeusabilidadyux.github.io”) y desarrollaremos nuestra landing dentro del mismo.
Paso 3: desarrollar la landing (en este caso mediante una plantilla gratuita)
Para no tener que empezar a desarrollar desde cero, localizas una buena plantilla HTML gratuita y lista para ser descargada. En este ejemplo nos quedaremos con la plantilla DevBook, que puedes descargar en este enlace.
Una vez descargada, descomprimiremos el contenido del ZIP en el directorio que alberga nuestro repositorio clonado de GitHub.
GitHub Pages no sólo sirve para alojar páginas web estáticas desarrolladas mediante HTML y CSS. Resulta que incluye uno de los generadores de sitios webs estáticos más veteranos de internet llamado Jekyll.
Jekyll es ideal para desarrollar sitios web estáticos sencillos y sobre todo para publicar un blog. De hecho, mi blog, este en el que te encuentras ahora, está generado con Jekyll y GitHub Pages. Pero para no complicar este ejemplo, dejaremos el tema de cómo usar Jekyll para un futuro post.
Paso 4: añadir un fichero .nojekyll a la landing
Como no queremos complicar el ejemplo con Jekyll, le tenemos que decir a GitHub Pages que no procese nuestra página web mediante el motor de Jekyll. Para ello debemos añadir un fichero de texto plano vacío con el nombre “.nojekyll” a la raíz del proyecto.
Paso 5: subir a GitHub la web para probar que se publica correctamente
Como la plantilla que hemos descargado ya tiene un contenido de ejemplo, antes incluso de personalizarla, vamos a subirla a GitHub y comprobar cómo se visualiza en forma de página web.
Para ello ejecutaremos los siguientes comandos de Git:
git branch -M main
git add --all
git commit -m "Commit inicial"
git push -u origin main
Y accederemos mediante el navegador a la URL correspondiente.
En nuestro caso a https://aprendeusabilidadyux.github.io/
Si todo ha funcionado correctamente estaremos viendo nuestra web. En caso contrario, conviene entrar a la raíz del repositorio en nuestra cuenta de GitHub y nos indicará si GitHub Pages ha encontrado algún error al tratar de publicar la web.
Paso 6: ir personalizando el contenido y subiendo los cambios
A partir de este punto lo que nos toca es ir personalizando el contenido de la plantilla a nuestra conveniencia. Cada vez que queramos ver cómo se refleja en internet un cambio que hayamos hecho en local, deberemos “commitearlo” y “pushearlo” al repositorio de GitHub con los siguientes comandos de Git:
git add --all
git commit -m "Contenidos reales de la web (primera parte)"
git push -u origin main
Y accediendo a la URL correspondiente visualizaremos los cambios.
En nuestro caso en https://aprendeusabilidadyux.github.io/
Próximo paso: asignarle un dominio propio
Una vez que hayamos personalizado completamente el contenido de nuestra página web, podemos querer contratar un nombre de dominio propio y asignárselo a nuestra web. De modo que en lugar de https://[nombreusuario].github.io podamos tener publicada la web en, por ejemplo, www.aprendeusabilidadyux.com.
GitHub Pages permite que podamos configurar un nombre de dominio propio que tengamos comprado. Te explico cómo se hace en la segunda parte de este post.