El blog de Dani

Dani, para los que no lo saben, es mi chaval y tiene 9 años (y medio).

Es un chaval, como todos, inquieto, divertido, alegre y, como todos, pasa de lo que le diga su padre.Para nada le interesa la programación y la tecnología que no sea jugar con la tablet y hablar por videoconferencia con sus amigos de cromos, aunque las pocas veces que le he dicho de sentarse conmigo a trastear con Scratch o AppInventor lo ha hecho. Incluso se inventó un juego de cromos

Quiero decir con esto, que creo que es un chico normal. No tiene inquietudes tecnológicas más allá de la diversión inmediata que le pueda reportar.

Por eso me sorprendió que, tras varios meses sin comentarle que podía tener un blog donde contar sus cosas, esta vez me dijera que sí con buen ánimo. Probablemente sea cosa del confinamiento pero como no hay que dejar pasar las oportunidades me dispuse a crearle la infraestructura mínima y guiarle en el proceso de publicar su blog.

|| A día de hoy ha publicado 3 post y aunque no me hago ilusiones, espero que sean los primeros de muchos más. ||

Así pues he pensado que tal vez, si andas queriendo tener un blog simple y totalmente gratis, esta guía te sirva.Piensa que si un niño de 9 años es capaz de hacerlo no veo porqué tú no.

Objetivo

Publicar un blog de forma sencilla y cómoda, con un diseño agradable y personalizable pero simple. Que se pueda escribir texto (obvio), subir imágenes y/o vídeos.

Gastándose lo mínimo, rayando el cero.

Sin necesidad de conocimientos informáticos

NO se pretende tener un carrito de la compra, ni miles de widgets de integración con nada.

En esta fase no se permitirá que los lectores dejen comentarios o likes, pero sí querremos saber el impacto de las publicaciones

Requisitos

Tener una cuenta de correo electrónico

Crearse una cuenta en Gitlab. El usuario con el que crees la cuenta será parte de la url de tu blog, así por ejemplopara Dani creamos la cuenta de Gitalb danidorami y su blog se encuentra en http://danidorami.gitlab.io/

|| Existen 1000 formas diferentes de conseguir tener un blog con 1000 herramientas diferentes. En este post voy a contar las que he usado y comentaré brevemente porqué pero no quiere decir que sea la mejor ni la única. ||

Prefiero Gitlab sobre otras herramientas como el famoso Github principalmente porque Gitlab es open source (a la mayoríaeso os dará igual) y porque desde antes que Github o similares ya ofrecía desde hace muchos años una cuenta gratuita con funcionalidades como ejecutar pipelines y publicar páginas estáticas (justo las dos funcionalidades que vamos a usar en este caso)

Pasos

Lo primero es crear un proyecto desde la consola web de Gitlab.

El proyecto deberá llamarse TUSUARIO.gitlab.io , en el caso de Dani danidorami.gitlab.io

|| el proyecto debe incluir gitlab.io. La primera vez que lo intenté creí que esa parte no había que ponerla, sólo el nombre del usuario y no funcionó ||

Seleccionar Crear desde plantilla (Create from template) y elegir de la lista Pages/Hugo

Gitlab te creará un proyecto completo usando Hugo un generador de blog estático, lo cual no quiere decir que tu blog no pueda modificarse, sino que generará páginas HTML puras sin necesidad de un motor que las genere, base de datos etc por lo que Gitlab podrá servirlas sin problema ni requisitos extras como sucede por ejemplo con WordPress

Una vez que se haya generado el proyecto (unos segundos), tu consola web será algo parecido a

Y desde ahí seleccionaremos Web Ide para acceder al interface de Gitlab que te permite añadir y editar ficherosde una forma cómoda (y de un sólo commit, lo cual veremos más adelante que significa)

Configuración

En primer lugar vamos a configurar algunas cosas como el título. Seleccionamos el fichero config.toml y cambiamos algunos valores (ajusta a los tuyos):

• baseurl= "https://danidorami.gitlab.io"

• title= "Blog de Dani"

• subtitle= "DaniDorami"

y eliminamos algunas secciones de con url igual a page/xxxxx dejando unicamente la principal,about y tags

En la sección Author he quitado un montón de RRSS porque no las vamos a usar por ahora, pero tú puedes configurar las tuyas a tu gusto. Las que no tengas puedes eliminar la clave-valor

Estructura y formato

• content es el directorio de contenidos, donde crearemos los post

-  content/post será donde crearemos nuestros artículos 

-  content/_index.md es el fichero destinado para la página principal

• static es el directorio donde pondremos elementos como imágenes 

-  static/post será el directorio donde crearemos directorios para las imágenes

A grandes rasgos trabajaremos de forma cotidiana en los subdirectorios content/post y static/post

De content/post borraremos todos los ficheros que vienen de ejemplo (si quieres puedes estudiarlo primero y verás que son muy sencillos de seguir)

El formato principal a usar es Markdown. Este formato es texto plano con marcadores para que el interprete sepa quéqueremos expresar. Así de esta forma, en las primeras líneas del fichero podemos añadir, por ejemplo, una sección de atributosentre dos líneas con + donde pondremos el título, fecha y el estado del post (preview o publicado) o bienmediante una sintáxis determinada indicar que queremos que incluya una imagen, cree una lista de elementos, etc.

Primer post

En content/post crearemos un fichero primerpost.md (mediante un desplegable que aparece al lado del directoriopost) y escribiremos:

+++
title="Mi primer post"
date="2020-04-25"
+++

Hola, esta frase es la que se verá en la lista de post y sirve para indicar de qué vas a hablar

<!--more-->

El texto anterior, sirve para que el interprete sepa donde cortar la introducción.

A partir de aqui puedes escribir todo lo que quieras. Mira un tutorial de Markdown para aprender su sintaxis

E intentaremos poner una imagen con esta sintaxis

{{<figure src="primerpost.jpg">}}

Nosotros nos hemos puesto esta chuleta frente al ordenador para recordar lo básico:

En static/post subiremos un jpg primerpost.jpg usando el menu desplegable que aparece al lado del nombre deldirectorio

Una vez tengamos nuestro post a nuestro gusto, "subiremos" nuestros cambios haciendo "commit" (botón azul, abajo a laizquierda). Hasta que se coja soltura con los conceptos de git realizaremos un commit a la master en lugar de crearuna rama nueva

en cuanto hagamos el commit, veremos un mensaje en la barra inferior donde aparecerá un reloj en azul indicándonosque Gitlab ha comenzado a crear nuestro site con los últimos cambios.

Si todo ha ido bien dispondremos de nuestro blog en la url que se comentaba al principio (https://usuario.gitlab.io)

|| La primera vez tu web no estará disponible hasta pasados unos 10 minutos, mientras Gitlab aprovisiona elnombre, etc, pero las siguientes veces el cambio será casi inmediato (entre unos pocos segundos a menos de unminuto según la capacidad de los servidores de Gitlab en ese momento. Recuerda que estás usando una cuenta gratuita) ||

Día a día

Obviamente los primeros post he ayudado a Dani a encontrar dónde crear los ficheros, subir la imágen, nombre del fichero, etc. pero una vez que teníamos preparado el fichero le he dejado escribir a su manera (me sigo preguntando si debería revisarle todas las faltas de ortografía. Por ahora sólo intervengo si me pregunta o si la falta es demasiado escandalosa)

En el tercer post ya recuerda cómo hacer commit y esperar a que el pipeline indique que ha terminado para ir a su post y leerlo.

Pendientes

A todos nos gusta escribir para que nos lean (creo) y una de las primeras cosas que se echan en falta es un sistema donde los usuarios puedan reaccionar a nuestros artículos. Existen muchas herramientas pero por ahora no las voy a incluir para intentar que escriba por el placer de escribir y que la familia, amigos y allegados puedan leerle, pero si te interesa saber el impacto de tus artículos una forma fácil de saberlo es habilitando en el fichero config.tomlel id de una cuenta de Google Analytics que crees y así tener reports de visitas, países, etc

Aunque el editor web de Gitlab es muy sencillo pero potente me gustaría que comenzara a usar un editor local para tener mayor control de cuando y qué publicar, poder revisar en local antes, etc

Conclusión

Si realmente quieres tener un blog sencillo pero potente existen muchas formas de tenerlo sin tener que ceder elcontrol a terceros como Medium, o usando formatos propietarios como WordPress. Siguiendo estos pasos todo tu blog te pertenece en todo momento y podrás ir migrandolo a otros sistemas más potentes de una forma (más o menos) sencilla

Por la parte de Dani no sé cuanto podré hacer que le dure las ganas de contaros sus movidas pero con un poco de interés no veo porqué no vas a poder crear algo parecido. Y SI TU CHAVAL/CHAVALA se anima a tener el suyo que no dude en preguntarle a Dani para que le asesore ;)