-
Notifications
You must be signed in to change notification settings - Fork 0
/
md_2024_09_08.html
265 lines (261 loc) · 20 KB
/
md_2024_09_08.html
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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Usando Lighthouse para construir el blog - prLázarus</title>
<meta name='Language' content='es' />
<meta name='Content-Language' content='es' />
<meta name="author" content="Carlos J. Peláez Rivas" />
<meta name="description" content="prLázarus - Blog de programación y diario de desarrollo" />
<meta name="keywords" content="lazarus,surazal,prlazarus,blog,programacion,coding,code,desarrollo,development,software,engineer,java,carlos,pelaez,cjpelaez,cjpelaezrivas,malaga,spain" />
<meta property="og:site_name" content="prLázarus" />
<meta property="og:title" content="prLázarus - Blog de programación" />
<meta property="og:description" content="prLázarus - Blog de programación y diario de desarrollo" />
<meta name="twitter:title" content="prLázarus - Blog de programación">
<meta name="twitter:description" content="prLázarus - Blog de programación y diario de desarrollo" />
<link rel="icon" type="image/x-icon" href="media/images/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="media/images/favicon.ico" />
<link rel="canonical" href="https://prlazarus.es/md_2024_09_08">
<link rel="stylesheet" href="static/lib/bootstrap-4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/lib/fontawesome-4.7/css/fontawesome.min.css" />
<link rel="stylesheet" type="text/css" href="static/lib/hint-2.5.1/css/hint.base.min.css" />
<link rel="stylesheet" type="text/css" href="static/lib/lightbox-2.10/css/lightbox.min.css" />
<link rel="stylesheet" type="text/css" href="static/lib/cookieconsent2-3.1.0/css/cookieconsent.min.css" />
<link rel="stylesheet" type="text/css" href="static/css/base.css" />
<link rel="stylesheet" type="text/css" href="static/css/main.css" />
<link rel="stylesheet" type="text/css" href="static/css/entry.css" />
<link rel="stylesheet" type="text/css" href="static/css/project.css" />
<link rel="stylesheet" type="text/css" href="static/css/toc.css" />
<link rel="stylesheet" type="text/css" href="static/css/code.css" />
<link rel="stylesheet" type="text/css" href="static/css/code-github.min.css" />
<link rel="stylesheet" type="text/css" href="static/css/print.css" media="print" />
<script src="static/lib/jquery-3.3.1/js/jquery.min.js"></script>
<script src="static/lib/bootstrap-4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="static/lib/stickytabs-1.2.0/js/stickytabs.js"></script>
<script src="static/lib/scrolltotop-1.0/js/scrolltotop.js"></script>
<script src="static/lib/lightbox-2.10/js/lightbox.min.js"></script>
<script>
lightbox.option({
'albumLabel': "Imagen %1 de %2",
'fadeDuration': 250,
'resizeDuration': 250,
'wrapAround': true,
'disable': true
})
</script>
<script src="lib/cookieconsent2-3.1.0/js/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function() {
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#d4d4d4",
"text": "#151515"
},
"button": {
"background": "#003379",
"text": "#ffffff"
}
},
"content": {
"message": "Este sitio web utiliza cookies propias y de terceros para que tengas la mejor experiencia de usuario posible. Si continuas navegando estás aceptando el uso de las mencionadas cookies y la política de cookies.",
"dismiss": "Cerrar mensaje",
"link": "Más información",
"href": "https://prlazarus.es/md_cookies_policy.html"
}
})
});
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PWTT0T2YZ0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-PWTT0T2YZ0');
</script>
</head>
<body>
<div class="container-fluid main-container">
<link rel="stylesheet" type="text/css" href="static/css/navbar.css" />
<div id="navbar">
<div id="zoneA">
<div class="content">
<a href="./">
<div id="logo"></div>
</a>
<h1 id="title">
prLázarus
</h1>
<h2 id="subtitle">
Blog sobre el desarrollo de proyectos, ingeniería software y tutoriales
</h2>
</div>
</div>
<div id="zoneB">
<div class="content">
<div id="menu">
<a class="menuItem" href="./"><i class="fa fa-home"></i><span class="text"> Página principal</span></a>
<a class="menuItem" href="./md_projects.html"><i class="fa fa-rocket"></i><span class="text"> Proyectos</span></a>
<a class="menuItem" href="https://cjpelaezrivas.dev"><i class="fa fa-user-circle"></i><span class="text"> Sobre mí</span></a>
</div>
</div>
</div>
</div>
<div class="fluid-row" id="header">
<h1 class="title toc-ignore ">Usando Lighthouse para construir el blog</h1>
<div class="date"><em>domingo, 8 de septiembre de 2024</em></div>
<div id="entry_section">
<div id="time_section"><b>Tiempo de lectura:</b> 5 minutos</div>
<div id="project_section"><b>Proyecto:</b> <a href="md_projects.html#blog">Actualización del blog</a></div>
</div>
<div id="tag_section">
<b>Etiquetas: </b>
<a class="tag" href="md_search.html?tag=Blog">Blog</a>
<a class="tag" href="md_search.html?tag=Diario de desarrollo">Diario de desarrollo</a>
</div>
</div>
<div class="section">
<p>Hola. <br>
Ha vuelto a pasar mucho tiempo desde que no escribo ninguna entrada nueva. Muchas cosas han pasado desde la última vez que escribí algunas líneas para este blog. He estado revisando algunas entradas a medias que tengo en el directorio de borradores, ahí está incluso el intento de crear la serie sobre patrones de diseño. Hacía meses que no revisaba ese trabajo a medias. Qué desastre... 🤦🏻♂️</p>
<p>Pero basta de actualizaciones cenizas, esta entrada la estoy escribiendo con ánimo de celebración. Ya comenté el cambio de paradigma en <a href="./md_2018_11_27.html">la entrada detallando la actualización del blog</a> en la que generaba el blog cómo sitio estático usando <em>R</em> y lo alojaba usando <em>Github pages</em>.</p>
<p>El tema es que uno de los motivos por el que no he podido actualizar el blog desde hace años ha sido por la dependencia que creé al usar <em>R</em> y <em>RMarkdown</em>. Resulta que no todo era tan ideal como pensé al inicio. Las dependencias han ido cambiando (entiendo que actualizándose) a lo largo del tiempo, y llegó el punto en el que el blog simplemente no se construía... He de confesar que intenté solucionar los problemas que encontré, y que finalmente fui capaz de generar el sitio web, pero cuál fue mi sorpresa cuando vi que el sitio web que se había generado no era el mismo que yo esperaba. Había códigos JavaScript inyectados, y cambios en los estilos CSS. Entiendo que parte de esos problemas serían debidos a la plantilla que se estaba usando, pero en esencia, lo que yo consideraba un proceso determinista, seguía siéndolo, pero con una salida distinta. Esa fue la gota que colmó el vaso.</p>
<p>Aquí me vi en la situación de buscar una solución, a ser posible a más largo plazo que retocar todo el blog y otro par de páginas que estaba generaba usando el mismo método. Tras mucho pensar, contemplar diversas opciones ya creadas y pensar varios diseños; me tiré a la piscina y nació: <strong><a href="https://github.com/cjpelaezrivas/Lighthouse">Lighthouse</a></strong>.</p>
<p>¿Qué es <em>Lighthouse</em>? Pues no es más que un generador de sitios web estáticos escrito en TypeScript. Sí, lo sé, es <em>casi</em> lo mismo que ya tenía. En realidad, ha heredado algunas características y configuraciones, pero se parece mucho menos de lo que parece a primera vista. En primer lugar no usa <em>R</em> como lenguaje de programación. La verdad que no he conocido a nadie que use este lenguaje desde que terminé los estudios hace ya algunos años, así que lo he descartado. Y para continuar, bueno, tengo el control sobre la aplicación y lo que se genera, por lo que no debería volver a tener el problema al construir el sitio web en el futuro.</p>
<p>Por supuesto sigo teniendo algunas dependencias, como por ejemplo el conversor de Markdown a HTML (<a href="https://github.com/markdown-it/markdown-it">markdown-it</a>); pero la lógica base, las plantillas y el código que se inyecta en las páginas generadas son controlados por completo por mi aplicación.</p>
<p>Con la solución anterior sentía que estaba <em>hackeando</em> un poco la herramienta. Inyectaba scripts escritos en <em>R</em> para generar parte del contenido de la aplicación. Funcionaba, pero incluir nuevas funciones al blog quizás podía no ser todo lo fácil que me habría gustado. Ahora esto acción es una característica básica de <em>Lighthouse</em>. Todas las etiquetas que se pueden usar para modificar el sitio web tiene el mismo formato, por lo que la sustitución de una variable o la inserción de un fichero de texto dentro de otro se realizan de manera similar.</p>
<p>Además, la parte más destacada de mi proyecto es la capacidad de ejecutar código escrito en JavaScript escrito por el usuario, desde la propia plantilla o desde cualquier de los ficheros que componen el sitio web. Esto permite realizar ciertas acciones o generar contenido dinámicamente mientras se construye el la página. Cómo ya he comentado, esto ya era algo que tenía antes, pero daba la sensación de que lo hacía no estaba permitido, al menos por la forma en la que debía hacerlo.</p>
<p>Por poner algunos ejemplos: la página principal de este blog esta construida con un script que itera todas las entradas, de modo que se actualiza automáticamente cuando se incluye una nueva. Y otras nuevas funciones como el tiempo de lectura para cada una de las entradas, también se hace usando un script que calcula el tiempo estimado en función del número de palabras que hay en una entrada. Ya existe una entrada explicando cómo se relacionan las entradas del blog, o lo botones de navegación que hay al final de cada una de ellas. Ese código ha sido traducido a JavaScript (y también simplificado).</p>
<p>La idea ahora es que usando un solo comando es posible generar el sitio web listo para subirlo al servicio que se desee. Existe un fichero de configuración, que permite indicar una gran cantidad de parámetros, la mayor parte de ellos basados en las necesidades de los proyectos en los que estoy usando <em>Lighthouse</em> por ahora, pero lo suficientemente genéricos para ser útiles para la mayoría de los usos que cualquiera podría tener al usar esta herramienta. Si hay alguien interesado, <a href="https://cjpelaezrivas.dev/Lighthouse/">aquí es posible encontrar el <em>readme</em> de la aplicación</a>, donde se explica cómo usarlo.</p>
<p>No he subido nada a la web hasta tener algo que cumpliera mis expectativas. Esto se traduce en generar las páginas que generaba en el pasado usando <em>R</em>: este blog y el sitio web de <a href="https://cjpelaezrivas.dev/ProjectCreationFX/">Project Creation FX</a>. Aunque ahora también uso <em>Lighthouse</em> para generar mi sitio web personal: <a href="https://cjpelaezrivas.dev/">cjpelaezrivas.dev</a>, en el que uso una única plantilla para español e inglés, lo que me permite incluir contenido mucho más fácil. Además de estos "tests", he creado una serie de escenarios que funcionan como tests funcionales para probar otros casos un poco más raros. Estos tests ofrecen una seguridad increíble a la hora de realizar modificaciones en el proyecto, porque puedes saber en un par de segundos si has roto algo con tus cambios. Todo un acierto.</p>
<p>También he de confesar que es más rápido que la solución anterior, generando este blog en 1,1 segundos. La velocidad no es que sea una prioridad en un proceso que se va a ejecutar de vez en cuando, solo cuando se construye el sitio, pero siempre gusta saber que ahora tarda menos.</p>
<p>En conclusión: quería actualizar el blog con una nueva entrada indicando que ahora estoy generándolo con una nueva herramienta, y he aprovechado la oportunidad para incluir alguna que otra funcionalidad nueva o modificar algunos detalles que no me terminaban de convencer. A simple vista no ha cambiado apenas nada, porque como he dicho, he usado mi versión online del blog para comprobar que la nueva herramienta generaba lo deseado, pero sí que hay algunos cambios un poco más invisibles si ves el código fuente de la página. En realidad, estos cambios me afectan a mi sobre todo, lo que me permitiría crear contenido de forma más cómoda. La verdad que no voy a prometer escribir más, ya que eso depende de muchas variables, pero al menos ahora tengo los medios para realizar cambios en caso de ser necesario.</p>
<p>Sin más, me despido hasta la próxima vez que nos volvamos a ver.</p>
<p>Muchas gracias por leerme,<br>
Lázarus Surazal.
</p>
</div>
<link rel="stylesheet" type="text/css" href="static/css/relations.css" />
<div id="relationsContainer">
<span class="relatedTitle">Entradas relacionadas</span>
<ul>
<li><a href="md_2018_03_21.html">Nuevo blog, nuevo alojamiento, nuevo comienzo</a></li>
<li><a href="md_2018_11_27.html">Nuevas actualizaciones en el blog</a></li>
<li><a href="md_2018_11_30.html">Relacionando las entradas del blog</a></li>
<li><a href="md_2018_12_18.html">Proceso de actualización del blog finalizado</a></li>
</ul>
</div>
<link rel="stylesheet" type="text/css" href="static/css/navigation.css" />
<hr>
<div id="navigationContainer">
<a class="navigateButton right navigateButtonInvisible" href="#">
Siguiente
<i class="fa fa-arrow-right"></i>
</a>
<a class="item hint--bottom-right navigateButton left" href="md_2020_09_30.html" data-hint="Patrones de diseño - Introducción">
<i class="fa fa-arrow-left"></i>
Anterior
</a>
<a class="navigateButton center" href="./">
<i class="fa fa-home"></i>
Volver a la página principal
</a>
</div>
<link rel="stylesheet" type="text/css" href="static/css/info.css" />
<div id="infoContainer">
<div id="infoProfile" class="info_block">
<div class="title">
<b>Perfil</b>
</div>
<div class="content">
<div class="part photo">
<img src="media/images/logo_b.png" width="90px" alt="prLázarus logo info" />
</div>
<div class="part description">
<h3 id="name">Carlos J. Peláez Rivas <em id="alias">(Lázarus Surazal)</em></h3>
Graduado y Máster en Ingeniería Informática por la Universidad de Málaga (España). También cursé un Experto en tecnologías de Blockchain. Actualmente trabajando como Software engineer en Málaga.<br>
Apasionado de los videojuegos, la música y la tecnología; siempre buscando cosas nuevas que aprender, hacer (y a veces romper).<br>
<a href="https://cjpelaezrivas.dev">Más sobre mi...</a>
</div>
</div>
</div>
<div id="infoContact" class="info_block">
<div class="title">
<b>Contacto</b>
</div>
<div class="content links">
<div class="item hint--bottom-right" data-hint="Perfil personal">
<a href="https://cjpelaezrivas.dev" style="font-size: 38px; line-height: 38px;"><i class="fa fa-user-circle"></i></a>
</div>
<div class="item hint--bottom-right" data-hint="prLázarus - RSS">
<a href="./feed.xml"><i class="fa fa-rss-square"></i></a>
</div>
<div class="item hint--bottom-right" data-hint="Enviar correo electrónico">
<a href="mailto:prlazarus.info@gmail.com"><i class="fa fa-envelope-square"></i></a>
</div>
<div class="item hint--bottom-right" data-hint="Perfil de GitHub">
<a href="https://github.com/cjpelaezrivas"><i class="fa fa-github-square"></i></a>
</div>
<div class="item hint--bottom-right" data-hint="Perfil de LinkedIn">
<a href="https://www.linkedin.com/in/cjpelaezrivas"><i class="fa fa-linkedin-square"></i></a>
</div>
</div>
</div>
</div>
<div id="commentsContainer" style="float:left; width:100%;">
<script src="https://utteranc.es/client.js" repo="cjpelaezrivas/prlazarus" issue-term="title" label="comments" theme="github-light" crossorigin="anonymous" async>
</script>
<noscript>
<div class="block warning icon fa-exclamation" style="margin-bottom:20px;">
Por favor, activa JavaScript para ver los comentarios.
</div>
</noscript>
</div>
<link rel="stylesheet" type="text/css" href="static/css/footer.css" />
<div id="footer_message">
¿Has encontrado algún error? <a href="mailto:prlazarus.info@gmail.com">Envía un correo electrónico</a> o <a href="https://github.com/cjpelaezrivas/prLazarus/issues">abre un nuevo <i>issue</i></a> para corregirlo. Gracias.
</div>
<div id="footer">
<div class="content">
<div id="logo_footer">
<a href="https://prlazarus.es"><img src="media/images/logo_c.png" alt="prLázarus logo footer" style="margin-top:10px;" /></a>
<!-- <span class="text" style="display:block; text-align:center; margin-top:-4px;">© 2012 - 2018</span> -->
</div>
<div id="right_column" class="text">
Escrito desde <a href="https://es.wikipedia.org/wiki/Espa%C3%B1a"><img src="media/images/spain.png" style="margin: -2px 2px 0 2px;" alt="Spain flag" /></a> con <i class="fa fa-heart" style="color:#cc0000"></i> por un humano (no IA) <i class="fa fa-child" style="font-size:18px"></i><br>
<i class="fa fa-plug"></i> Con la tecnología de <i><a href="https://cjpelaezrivas.dev/Lighthouse/">Lighthouse</a></i> y <i><a href="https://pages.github.com/">GitHub Pages</a></i><br>
<i><a href="./feed.xml">RSS</a></i>
|
<i><a href="md_cookies_policy.html">Política de cookies</a></i>
|
<i><a href="md_disclaimer.html">Limitación de responsabilidad</a></i><br>
<a href="mailto:prlazarus.info@gmail.com">prlazarus.info@gmail.com</a>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="static/css/progressBar.css" />
<div id="progressBarContainer">
<div class="progressBar">
</div>
</div>
<script src="js/progressBar.js"></script>
</div>
<!-- Default Statcounter code for prLázarus - Blog -->
<script type="text/javascript">
var sc_project = 12995152;
var sc_invisible = 1;
var sc_security = "7de2ea10";
</script>
<script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script>
<noscript>
<div class="statcounter">
<a title="Web Analytics" href="https://statcounter.com/" target="_blank"><img class="statcounter" src="https://c.statcounter.com/12995152/0/7de2ea10/1/" alt="Web Analytics" referrerPolicy="no-referrer-when-downgrade"></a>
</div>
</noscript>
<!-- End of Statcounter Code -->
</body>
</html>