lunes, 13 de enero de 2025

Web estática con Jekyll

Posted by q3it on lunes, enero 13, 2025 in ,

Cuando se nos viene a la cabeza ¿Cómo crear una página web? lo normal es que pensemos en WordPress, joomla, drupal, magento, etc. Y luego nos preguntamos si necesitamos saber programación o tener conocimientos técnicos muy avanzados. En este post voy a resolver esas dudas y voy a implementar un servicio web en nuestro Ubuntu Server. 
 
Lo primero que debemos tener claro es ¿Qué voy a enseñar al mundo?. Con esto me refiero, al tipo de interacción va a tener el usuario con mi página, si necesita un registro o sólo va a visualizar el contenido de esta. Aquí hay dos opciones: páginas estáticas o páginas dinámicas. Estas dos difieren en que la primera solo entrega contenido para su visualización y en la segunda el usuario interactúa con la página. Para tener este concepto más claro, el usuario interacciona con una base de datos ¿Cómo?, en forma de registro, subida de archivos, modificación de registros, etc.  
 
La pregunta que más nos hacemos ¿Necesito saber programar? La repuesta corta es ¡No!, si lo que queremos es algo desatendido cómo arrastrar y soltar. Pero si lo que buscamos es algo más personalizado el cual requiera crear y modificar ficheros, la repuesta es ¡Sí!. Pero hay herramientas híbridas que te permiten habilitar módulos y luego modificarlos a tú agrado. 
 
Ahora, volviendo a nuestro proyecto SOHO hoy voy a crear una página web con Jekyll. Esta herramienta toma texto escrito en lenguaje de marcado y lo usa para crear diseños web estáticos. Puedes modificar la apariencia del sitio, las URL, los datos que se muestran en la página y más.
 
Para empezar nos vamos al sitio oficial de Jekyll e instalamos los requisitos.
 
 
Muy bien ya ha finalizado la instalación de Jekyll, así que vamos a crear nuestro proyecto, para eso escribimos en la posición dónde estemos jekyll new webProject
 
 
Entramos al fichero que se acaba de crear...
 
 
Estos serían los archivos que nos ha creado Jekyll y lo necesario para poder utilizar nuestra página web. Ahora, arrancamos el servicio así ... bundle exec jekyll serve --host 192.168.210.145.
 

Ponemos --host 192.168.210.145 porque estamos conectados a una máquina virtual, y desde el navegador de mi computadora entramos a la web. 
 
 
Aquí tenemos la página, básicamente esto es Jekyll funcionando. Clickando en Welcome to Jekyll nos lleva a un post de ejemplo.
 
 Para editar la página se debe utilizar Markdown que es un lenguaje de marcado ligero que trata de conseguir la máxima legibilidad y facilidad de publicación tanto en su forma de entrada como de salida. Su popularidad se debe a que es sencillo y fácil de aprender por parte de aquellas personas que no tienen un perfil técnico. 
 
Para la configuración veremos una serie de ficheros y directorios, pero en especial una carpeta que es donde se trabajarán los post y dentro de esta se encuentra un fichero de ejemplo con extensión .md "mardown".
 
 
Aquí es donde vamos a colocar los post, directamente podemos empezar a editar, si yo pongo "esto es una prueba".
 
 
Guardo los cambios y reinicio el servidor para ver los cambios.
 
 Uno de los archivos más importantes que necesitamos editar es _config.yml, este archivo contiene configuraciones básicas de la página.
 

Una vez realizados los cambios reiniciamos el servicio.
 

Los cambios se han aplicado sobre el contenido personal. Con esto ya tendríamos una idea de como cambiar el contenido de nuestra página. Ahora veamos como instalar otras plantillas. En los recursos que nos ofrece la web oficial de Jekyll descargamos el que más nos guste.
 
Vamos a probar con el theme yat. Descargamos o clonamos el repositorio y accedemos a el, una vez dentro instalamos los requerimientos para que funcione la página.
 
 
Ejecutamos bundle exec jekyll serve --host 192.168.210.145 y entramos desde el navegador.
 
Pues básicamente es descargar el proyecto, acceder la carpeta, instalar los plugins que vienen establecidos en el fichero y ejecutarlo. Tendríamos exactamente el mismo servidor que hemos visto en el primer ejemplo y a partir de aquí podemos empezar a crear tus post.
 
Probemos con otro proyecto, por ejemplo jekynewage
 
 
A partir de aquí ya es cosa nuestra empezar a crear, editar y adaptar la página a nuestro estilo. Ahora, teniendo claro como es el funcionamiento básico de esta herramienta, podemos instalar un Nginx para que se conecte a una base de datos y que los usuarios puedan registrarse y consumir contenido. Y si tenemos conocimientos avanzados sobre desarrollo web no hay límites para transformar este tipo de tecnologías. 

¡Bueno! Con esto termino, hasta la próxima 👋😉.