Introducción

GitHub ofrece alojamiento web estático para vos y tus apps, esto se llama GitHub Pages. Podés usar markdown (jekyll) o simplemente HTML. Por ejemplo, para este blog genero todos los archivos con Hugo.io y eso se despliega en GitHub Pages. La configuración es bastante simple como veremos en el siguiente ejemplo (la configuración de este blog).

GitHub Pages ofrece algunos ejemplos muy buenos que son fáciles de seguir, pero si querés saber cómo configuré todo para este blog, seguí leyendo :), si te gusta o tenés algún comentario, podés usar el cuadro de disqus al final de la página.

Pages

El primer paso para usar GitHub Pages es crear un repositorio (suponiendo que ya tenés una cuenta) con el siguiente nombre: username.github.io, en mi caso es kainlite.github.io, como podés ver en la siguiente captura de pantalla: Este repositorio ya tiene los archivos del blog, pero como con cualquier repositorio de GitHub, verás los comandos predeterminados para subir algo. El siguiente paso es configurar las páginas en sí. Para eso, tenés que ir a Settings (asegurate de reemplazar username en el enlace), luego desplazate hasta la sección de GitHub Pages. Se verá algo así:

Como podés ver, la configuración es bastante sencilla. Elegís la rama que se va a usar para servir el sitio. Incluso podés elegir un tema si vas a usar Jekyll, y también podés tener un dominio personalizado y https. En este caso, como subo los archivos HTML estáticos a la rama master, seleccioné esa rama. Podés usar cualquier rama que quieras, pero es común usar gh-pages.

DNS

Para el dominio personalizado tenés que crear las siguientes entradas en tu DNS con dig techsquad.rocks. Podés encontrar estas IPs en esta página:

techsquad.rocks.        300     IN      A       185.199.110.153
techsquad.rocks.        300     IN      A       185.199.111.153
techsquad.rocks.        300     IN      A       185.199.108.153
techsquad.rocks.        300     IN      A       185.199.109.153

Después de unos minutos debería empezar a funcionar, y lo que tengas en ese repositorio se servirá como archivos estáticos. Hay algunos límites, pero son bastante altos, así que probablemente podés comenzar tu sitio o blog sin preocuparte mucho por eso. Si querés saber cuáles son esos límites, mirá aquí. Actualmente, el límite de tamaño del repositorio es de 1 GB, y hay un límite suave de ancho de banda de 100 GB por mes, además de 10 compilaciones por hora.

Go Hugo

Ahora vamos a la parte interesante. Hugo te permite configurar y personalizar varios aspectos de los archivos generados. Primero, asegurate de instalar Hugo con tu gestor de paquetes o con Go. Los pasos para crear un blog son bastante simples:

hugo new site testing-hugo
# OUTPUT:
# Congratulations! Your new Hugo site is created in /home/kainlite/Webs/testing-hugo.
#
# Just a few more steps and you're ready to go:
#
# 1. Download a theme into the same-named folder.
#    Choose a theme from https://themes.gohugo.io/, or
#    create your own with the "hugo new theme <THEMENAME>" command.
# 2. Perhaps you want to add some content. You can add single files
#    with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
# 3. Start the built-in live server via "hugo server".
#
# Visit https://gohugo.io/ for quickstart guide and full documentation.

Como mostré en el artículo sobre tmux, me gusta tener 2 paneles: un panel pequeño donde puedo ver los archivos siendo reconstruidos en cada guardado y otro panel con Vim para editar el código fuente. Podés iniciar el servidor web de Hugo para desarrollo con hugo serve -D y escuchará por defecto en el puerto 1313. Es muy común usar temas, así que podés ir a la página de temas y empezar tu proyecto con uno de ellos. Hay varias formas de instalar los temas, y podés ver los pasos de instalación en la página del tema. Por ejemplo, para el blog, empecé con Sustain, pero luego lo modifiqué para que se ajuste a mis necesidades.

Publicar con git push

La parte más interesante de esta configuración es la simple automatización que uso para publicar con git push. Creé el siguiente hook en el repositorio del blog: .git/hooks/pre-push:

#!/bin/bash

COMMIT_MESSAGE=`git log -n 1 --pretty=format:%s ${local_ref}`

hugo -d ~/Webs/kainlite.github.io
ANYTHING_CHANGED=`cd ~/Webs/kainlite.github.io && git diff --exit-code`
if [[ $? -gt 0 ]]; then
    cd ~/Webs/kainlite.github.io && git add . && git commit -m "${COMMIT_MESSAGE}" && git push origin master
fi

Lo que hace este simple hook es verificar si hubo algún cambio y subir los cambios con el mismo mensaje de commit que en el repositorio original. Primero obtenemos el mensaje de commit del repositorio original y luego verificamos si algo cambió con git. Si hubo cambios, simplemente añadimos todos los archivos y subimos eso al repositorio. Eso desencadenará una compilación en GitHub Pages y, una vez completada, nuestra página se actualizará y será visible (a veces puede tardar unos segundos, pero en general es bastante rápido).

Y así es como se configuró este blog. En los próximos artículos te mostraré cómo alojar tu sitio web estático con S3 y servirlo con Cloudflare. Después, usaremos una función lambda de Go para enviar el formulario de correo electrónico. Déjame saber cualquier comentario o si hay algo sobre lo que te gustaría que escriba.

Entorno de Pages

Si prestaste atención a la primera captura de pantalla, probablemente notaste que dice 1 Environment, eso significa que GitHub Pages ya ha sido configurado, y si hacemos clic en eso, podemos ver algo como esto:

Para sitios HTML estáticos es poco probable que veas un fallo, pero puede pasar si usás Jekyll, por ejemplo, y hay algún error de sintaxis.

Errata

Si encontrás algún error o tenés alguna sugerencia, por favor enviame un mensaje para que lo corrija.