120 - Crear un sitio web estático en cuatro pasos

120 - Crear un sitio web estático en cuatro pasos

¿Quieres crear una página web de forma sencilla, rápida y sin complicaciones? En este episodio del podcast te cuento como crear un sitio web estático

1:25
-3:15

No se si sabes que atareao.es está construido sobre WordPress. El CMS mas extendido a día de hoy. Pero no siempre ha sido así… Joomla, Drupal,…Incluso en un momento determinado estuve pensando en migrar a un sitio web estático, en particular a Pelican. Mis gracias, como siempre que hablo o escribo de markdown a Joe di castro, que fue el que me introdujo a estas dos tecnologías. Tanto markdown como Pelican.

En mi caso fue por conseguir mas rapidez. Sin embargo, al final, me quedé en WordPress. Y no me arrepiento de haberme quedado en WordPress. Sinceramente amo WordPress, me encanta las posibilidades que te ofrece. Y con unos mínimos conocimientos de programación las opciones que te ofrece son infinitas….

Sin embargo, WordPress, no siempre es la mejor solución, o la solución mas óptima. En este sentido, probablemente una página web descase mejor sobre un sitio estático. O no… esto depende de cada uno.

Lo que si te aseguro, que lo importante, no es tanto el CMS o la plataforma que estés utilizando. Lo verdaderamente importante, es sin lugar a dudas, es el contenido. Y en este sentido, si la plataforma te impide o dificulta el generar contenido, simplemente cambia de plataforma. Si te sientes mas a gusto con una plataforma, y esto te facilita para generar mas contenido, esta es tu plataforma

Así, en el episodio de hoy, te voy contar como puedes crear un sitio web estático, para alojar tu blog, o lo que tu consideres, utilizando Pelican, y en apenas tres pasos.

Crear un sitio web estático

Cómo crear tu sitio web estático en cuatro pasos

En que ando metido…

Artículos

Esta semana he publicado dos interesantes artículos. El primero de los artículos es como puedes colorear y personalizar la línea de comandos para que te muestre información relevante

El segundo de los artículos es el capítulo 6 del tutorial sobre docker, en el que te cuento de forma detallada, como conseguir que tus imágenes se generen de forma automática. De forma automática sin que tu tengas que hacer absolutamente nada

Aplicaciones

Respecto a las aplicaciones, llevo unas semanas de actividad frenética actualizando aplicaciones. Y no solo actualizando aplicaciones, también añadiendo nuevas características, y cambios estéticos para adaptarlas a la guía de diseño de GNOME, siempre en la medida de lo posible. Así, las últimas que he actualizado son,

  • GQRCode. Te permite generar códigos QR en Ubuntu.
  • My-Weather-Indicator. Aquí estoy mejorando algunas ventajas, así como haciendo visible las fases de la luna en una ventana. Estoy revisando los widgets, en particular uno que me ha enviado Juan Angel de la Buhardilla Geek, a ver si es posible incorporarlo también en los widgets por defecto.
  • LPlayer. Mi reproductor de audio minimalista. Incluso, como te comentaré en un futuro podcast, me atrevería a decir, el mejor y mas atractivo reproductor de audio minimalista.

Python3

He abierto un caso con los chicos de Ubuntu por un problema entre Python3 y Nautilus. Actualmente las extensiones, al menos las mías, no están funcionando en Ubuntu 19.10. A ver como queda la cosa…

WordPress

He hecho algunos ligeros cambios en la estética de la página. Son cambios menores, pero poco a poco voy mejorando.

Entre los cambios, he introducido una mejora que seguro que te resultará muy util. Así ahora si quieres ver cualquier podcast tan solo tienes que dirigirte a la url…

https://www.atareao.es/podcast/numero-del-episodio

Al turrón… Tu sitio web estático

Que necesitas….

  • Git
  • un editor
  • una cuenta en GitLab

Conocimientos de markdown y en su caso de git… Aunque de esto segundo tampoco lo necesitas… Simplemente con que conozcas las dos instrucciones básicas, que yo te indicaré es mas que suficiente.

Opcionalmente y si quieres, por aquello de dar mas posibilidades a tu página, también puedes comenzar a aprender

  • Python3
  • pelican

Sin embargo, como te digo, no es necesario, solo para futuras ampliaciones de tu sitio. Con saber de markdown y aprender las tres instrucciones básicas de git, es mas que suficiente.

Sobre el generador del sitio web estático

En principio yo he optado por Pelican porque utiliza Python para generar el sitio estático, pero hay muchas mas opciones disponibles en GitLab. Así, simplemente tienes que elegir la que mejor se adapte a tus

Simplemente tienes que ir a Gitlab.com/pages seleccionar el proyecto que mas te gusta y hacer un fork…. Esto de hacer un fork, si no tienes conocimientos de Git, no es nada del otro mundo. Tan solo tienes que hacer clic en el botón Fork que aparece en la parte superior derecha de GitLab/pages y el proyecto elegido

Una vez realizado este Fork, deberías quitar la relación de Fork con el proyecto principal. Siempre y cuando no vayas a contribuir en él. Esto va a ser lo mas normal, al menos en el caso que te ocupa. Quiero decir, que al final, vas a crear una página estática que nada tiene que ver con Pelican.

Configuración > General > Eliminar la relación del fork

Una vez realizado esto, y si quieres que tu página en GitLab sea ejemplo https://atareao.gitlab.io. Tienes que cambiar la ruta para que ponga. Esto se hace desde

Configuración > General > Cambiar la ruta

https://gitlab.com/atareao/atareao.gitlab.io

Ahora en tu equipo, tienes que hacer un clon del fork que acabas de realizar… Para esto simplemente tienes que ejecutar la instrucción,

Recuerda que hay dos opciones con ssh y https

git clone git@gitlab.com:atareao/mkdocs.git

Ahora tienes que hacer varias cosillas que solo harás la primera vez.

  • Seleccionar un tema
    • En Pelican Themes tienes un buen puñado de temas donde elegir. Selecciona el que quieras y simplemente lo clonas dentro de un directorio llamado themes. De esta manera la estructura te quedará algo como,
    • atareao.gitlab.io/themes/tema-seleccionado/
  • Modifica la configuración
    • Archivo pelicanconf.py. Modificas algunos parámetros como
      • AUTHOR
      • SITENAME
      • SITEURL = ‘https://atareao.gitlab.io’
      • THEME = ‘themes/flex’
      • TIMEZONE = ‘Europe/Madrid’
      • DEFAULT_LANG = ‘es’
    • Archivo publishconf.py
      • SITEURL = ‘https://atareao.gitlab.io’

Ahora añade una página a tu blog. Esto es lo que tendrás que hacer en cada ocasión. Para esto simplemente crea un nuevo archivo en formato markdown y con extensión md.

El interior del archivo tendrá el siguiente aspecto,

Title: Introducción
Date: 2019-10-27
Category: GitLab
Tags: pelican, gitlab
Slug: introduccion

Para terminar simplemente ejecuta las siguientes instrucciones,

git add .
git commit -m "Un mensaje"
git push

Aquí comienza la magia. Si vas a tu proyecto de GitLab, y entras en CI/CD, verás que hay un Pipeline en ejecución… esto si te das un poco de prisa. Por que si el proceso es rápido, a lo mejor ni lo ves.

Cuando el proceso haya terminado te diriges a ‘https://atareao/gitlab.io’ y podrás ver tu página en producción, junto con el nuevo artículo que has escrito.

A partir de aquí a crear contenido sin parar….

Si no me he explicado bien, o quieres tener un ejemplo, simpre puedes hacer un fork o clonar el repositorio que he utilizado para poner de ejemplo en este podcast. Ahí he hecho algunos cambios mas, pero todos muy, pero que muy básicos… como tu mismo podrás comprobar…

En resumen

Partiendo de que ya tienes tu cuenta de GitLab, los pasos son los siguientes,

  • Hacer un fork de Pelican y quitar la relación con el proyecto original
  • Seleccionar un tema y copiarlo en la carpeta /themes/ de tu proyecto
  • Configurar el proyecto y escribir tu primera entrada
  • Publicarlo

A partir de aquí, cada vez que escribas un nuevo artículo, no tienes mas que hacer un git commit -am «mensaje» && git push y aparecerá publicado de inmediato en tu página de GitLab.


Imagen de portada de Nicolas Picard en Unsplash

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *