From 9a702e61eba038901103b810bfc993718a8f0c53 Mon Sep 17 00:00:00 2001 From: santisoler Date: Tue, 23 Mar 2021 22:44:35 +0000 Subject: Add blog entry: website-template --- _posts/2021-03-23-website-template-texto-plano.md | 190 ++++++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 _posts/2021-03-23-website-template-texto-plano.md diff --git a/_posts/2021-03-23-website-template-texto-plano.md b/_posts/2021-03-23-website-template-texto-plano.md new file mode 100644 index 0000000..9b41e99 --- /dev/null +++ b/_posts/2021-03-23-website-template-texto-plano.md @@ -0,0 +1,190 @@ +--- +title: Crea tu sitio web en texto plano +layout: post +excerpt: | + Cómo construir tu sitio web en texto-plano con Jekyll, utilizando el mismo + template que uso para texto-plano.xyz/~santisoler +--- + +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" + ``` + +### 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][cc-by]. + +[cc-by]: https://creativecommons.org/licenses/by/4.0/deed.es + +## 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 -- cgit v1.2.3