1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
|
---
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"
```
### 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][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
|