summaryrefslogtreecommitdiffstats
path: root/_posts/2021-03-23-website-template-texto-plano.md
blob: 9b41e99ac4d0462c8ec33a3ec015bb8c419698a8 (plain) (blame)
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
---
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
Un proyecto texto-plano.xyz