Crea tu sitio web en texto plano

2021-03-23

Quiero compartirles un tutorial para que puedan construir su propio sitio web en texto-plano utilizando el mismo template de Jekyll que desarrollé para mi propio sitio.

Jekyll es un software que nos permite construir sitios web estáticos de manera muy sencilla, especialmente orientado a mantener blogs. Jekyll nos permite armar nuestro sitio web editando únicamente un archivo de configuración y creando contenido en Markdown, un lenguaje Markup muy sencillo de utilizar. Este programa parte del archivo de configuración y unas plantillas HTML y CSS, convierte tus archivos Markdown a HTML y compila el sitio web listo para su publicación.

Lo que les comparto es un repositorio git (https://git.texto-plano.xyz/santisoler/website-template) que contiene un template con el cual podés armar tu sitio web tal y como está construido el mio, sin necesidad de editar más que el archivo de configuración y agregar tu contenido en archivos Markdown.

Pueden leer el README.md alojado en el repositorio o bien seguir el tutorial que copio a continuación:

Clonar el repositorio

Comenzamos por clonar este repositorio utilizando git. Si estamos dentro de texto plano podemos clonarlo con:

git clone -b main /var/www/cgit_repos/santisoler/website-template.git mi-sitio-web

O si estamos en una máquina propia con:

git clone -b main https://git.texto-plano.xyz/santisoler/website-template mi-sitio-web

Entramos a la carpeta en la que clonamos el repositorio:

cd mi-sitio-web

Dentro de esta carpeta encontramos el código fuente para construir nuestro sitio web.

Configurando el sitio

Primero vamos a editar r el archivo _config.yml. Vamos a configurar el título del sitio y el nickname del autor:

title: ~santisoler
author: ~santisoler

Dado que nuestro sitio en texto-plano no está alojado en el root del website, es necesario configurar el baseurl, que en general debe ser igual a una barra (/) seguida de nuestro nombre de usuario con el tilde:

baseurl: /~santisoler

Luego podemos editar el index.md para agregar contenido al home de nuestro sitio. Por ejemplo, podemos escribir algo acerca de nosotros y listar nuestros perfiles en la red.

Añadiendo contenido

Podemos añadir contenido a nuestro sitio web a través de archivos Markdown. Por ejemplo, si queremos añadir una nueva entrada a nuestro blog, debemos crear un archivo en _posts cuyo nombre esté compuesto por la fecha de publicación y luego un nombre sencillo, por ejemplo:

touch _posts/2021-03-22-mi-primer-posteo.md

Cada entrada del blog debe tener un header (en YAML) y luego el contenido (en Markdown). Por ejemplo:

---
title: Mi primer posteo
layout: post
excerpt: |
    Este es un resumen de mi posteo
---

Acá puedo escribir mi entrada del blog usando Markdown.
Puedo armar listas:

- un elemento
- otro elemento

O listas numeradas:

1. Primer elemento
2. Segundo elemento


Con enlaces, por ejemplo a [Wikipedia](https://www.wikipedia.org).

O bien podemos crear código:

```
echo "Aguante texto-plano"
```

Clasificar los posts en categorias

Este template nos permite clasificar nuestras entradas de blogs en categorías o secciones. Por ejemplo, supongamos que vamos a mantener dos categorías: Blog personal y Tutoriales. A la hora de escribir una nueva entrada del blog, vamos a especificar la categoría a la cual este pertenece a través del parámetro categories. Por ejemplo, creamos un post para nuestro Blog personal:

---
title: Mi primer posteo
layout: post
categories: Blog personal
excerpt: |
    Este es un resumen de mi posteo
---

Y otro para la sección Tutoriales:

---
title: ¿Cómo usar Jekyll?
layout: post
categories: Tutoriales
excerpt: |
    Este es mi tutorial
---

No nos olvidemos de editar nuestro _config.yml, activando las categorías en el home:

# Split the blog posts in categories
show_categories: true

Cuando construyamos el sitio, nuestro home mostrará todos los posts del blog, pero divididos en sus correspondientes categorías.

Construir el sitio

Una vez que generamos contenido nuevo, vamos a proceder a construir el sitio web. Esto lo debemos hacer a través de Jekyll. Si estamos dentro de texto-plano, podemos ejecutar:

jekyll26 build

Si instalaste jekyll a través de bundler en tu computadora, podés usar:

bundle exec jekyll build

Estos comandos generarán una carpeta _site que contiene todos los archivos necesarios para servir nuestro sitio web.

Servir el sitio localmente

Si estás modificando tu sitio desde tu computadora, podés ver una cómo va quedando sirviéndolo localmente con:

bundle exec jekyll serve

Jekyll te dará una url a través de la cual vas a poder visualizar tu sitio web.

Servir el sitio en texto-plano

Lo único que queda es publicar el sitio web para que todes puedan acceder a él. Para ello debemos copiar todos los archivos de la carpeta _site en ~/public_html/:

cp -r _site/* ~/public_html/

A veces será necesario quitar el sitio web viejo que está siendo servido y reemplazarlo por el nuevo:

USAR ESTE COMANDO CON CUIDADO!

rm -r ~/public_html/*
cp -r _site/* ~/public_html/

Recuerda que cada vez que creemos una nueva entrada de nuestro blog o hagamos cualquier modificación a nuestro sitio, lo haremos en los archivos ubicados en mi-sitio-web. Mientras que el contenido de ~/public_html solo será aquel que cree automáticamente Jekyll.

Es por eso que es importante que guardes copias de la carpeta mi-sitio-web. Si sabes usar git para gestionar repositorios, puedes utilizarlo para gestionar los cambios de tu sitio web.

Licencia

El template se encuentra bajo Licencia Creative Commons Atribución 4.0 Internacional.

Comentarios

Si encontraste algún error, los pasos anteriores no te funcionaron, tuviste alguna dificultad o te gustaría colaborar con el template, sentite libre de escribirme a santisoler arroba texto-plano.xyz