Otra Rebuild de Sitio Web

Esta publicación fue traducida por una IA y solo se verificó superficialmente mediante traducción inversa.

Rompiendo Terreno... Otra Vez

Ha pasado un tiempo desde que actualicé mi sitio web por última vez. He estado probando muchas configuraciones diferentes. Durante un tiempo estuve usando Hugo Academic, luego cambié a Bay donde he estado un tiempo sin tocar nada. En algún momento estuve experimentando con Flask, pero nunca me comprometí completamente con ello. A medida que me acerco al final de mi doctorado, pensé que sería un buen momento para actualizar mi sitio web a algo más moderno y comenzar a publicar contenido real.

Al hacerlo, he llegado a algunos criterios que quería cumplir:

Primero, quería algo que ya estuviera bien construido con características modernas. Una de las principales dificultades que he tenido con sitios web anteriores es que les faltaban algunas necesidades como diseños reactivos, un tema claro/oscuro y una barra de búsqueda. También quería una estética agradable. Eso es sorprendentemente difícil de encontrar gratis; la mayoría de las plantillas gratuitas parecen anticuadas, son de estilo hacker o no están diseñadas para un sitio web personal.

En segundo lugar, quería algo que pudiera entender la mayor parte del código de backend. Puedo manejar JavaScript, HTML y CSS, pero no soy un experto en ninguno de ellos. Como biólogo interdisciplinario, paso la mayor parte de mi tiempo de programación trabajando en R y Python con scripts y herramientas de línea de comandos, aunque también me he enseñado Rust solo para tener un lenguaje de bajo nivel en mi repertorio. Hugo está escrito en Go y Jekyll en Ruby. Una vez que conoces un lenguaje, puedes aprender otros; sin embargo, no quiero que mi sitio web personal se convierta en un proyecto de codificación sustancial. El objetivo es tener un sitio web simple donde pueda compartir mis ideas y potencialmente proporcionar recursos para que otros aprendan. Al usar un lenguaje con el que ya estoy familiarizado, puedo revisar rápidamente el código para agregar cualquier funcionalidad que necesite o encontrar soluciones a los problemas que enfrento.

Tercero, quería algo con una superficie de ataque baja. WordPress es una forma agradable y de bajo código para construir un sitio web, pero es famoso por ser vulnerable a ataques. Si la idea es construir un sitio web de bajo mantenimiento, no quiero tener que preocuparme por la seguridad del servidor en el que se está ejecutando. Estos problemas existen si decidiera armar mi propio sitio web desde cero a través de un marco dinámico como Flask. Aunque sería agradable tener un editor visual y contenido dinámico, siento que puedo obtener muchos de los beneficios solo usando un marco sólido de markdown. Cualquier característica dinámica que quiera probablemente se pueda agregar jugando con JavaScript. Si eso no es suficiente, siempre puedo redirigir a un sitio dinámico en un subdominio.

Configurando la pila

Zola - Un generador de sitios estáticos rico en características

Zola cumple con todos mis requisitos. Está escrito en Rust, que es un lenguaje con el que ya estoy familiarizado. También es un generador de sitios estáticos, lo que significa que no requiere una base de datos o servidor para funcionar. Aunque su adopción parece ser menor que la de Hugo, Jekyll o cualquier otra de las soluciones principales, encontré algunos temas agradables ya adaptados a él. Terminé usando Blow

Zola también viene con algunas características que no he visto en otros generadores de sitios estáticos. Además de la búsqueda integrada (que requiere algo de soporte de JavaScript del tema), también tiene soporte multilingüe. Estoy emocionado de intentar usar esto para alcanzar una audiencia más grande de la que tendría si tuviera que ceñirme a un solo idioma. También me gusta el modo de servidor de línea de comandos con recarga en vivo. Es una buena manera de ver cómo se ve y cambia tu sitio a medida que realizas cambios en tu contenido. Esto me permite iterar rápidamente y ver los resultados de mis cambios, aunque el sitio eventualmente será estático.

Encontré que la documentación de configuración de Zola era excelente. Si me estás siguiendo, puedes encontrarla aquí. Estoy en Arch Linux, así que seguí estos pasos:

# Para Arch Linux
$ sudo pacman -S zola
$ cd ~/code/  # o donde quieras almacenar tu sitio web
$ zola init nombre_del_sitio
$ cd nombre_del_sitio
$ git init
$ git submodule add https://github.com/tchartron/blow.git themes/blow
$ zola serve

Además de bloguear y promocionar algunas de mis herramientas, también quiero usar mi sitio web como un acortador de URL conveniente sobre el que tengo control. Este es un espacio para el que Zola tiene menos soporte incorporado. Esta es una característica valiosa ya que tengo contenido fuera de mi blog. También puedo usar el mismo motor de blog para dirigir a las personas a una lista de mis herramientas. Pude implementar esto utilizando un shortcode.

<div {% if class %}class="{{class}}" {% endif %}>
    <p><a href="http://{{loc | safe}}">Redirigir</a></p>
    <script>
        window.location.href = "http://{{loc | safe}}";
    </script>
</div>

Después de agregar esto a templates/shortcodes/redirect.html, puedo configurar redirecciones que incluso funcionan con mis analíticas.

Apaciguando a la UE con Umami

Cada vez que visito un sitio web, me recibe un popup que oscurece el contenido de la página. Ese popup me molesta para que vea la política de cookies y seleccione mis preferencias. A veces ni siquiera se me permite hacer eso, el sitio web simplemente me obliga a aceptar. Otras veces, tengo que esperar un período arbitrariamente inflado donde el sitio web 'configura socios de cookies' o algo así. En lugar de someter a mis espectadores a esto, decidí usar un servicio de analíticas compatible con GDPR. Decidí usar Umami. Aún quiero poder rastrear las vistas de página y ver qué páginas están recibiendo atención (especialmente si configuro esto con redirecciones para un código QR de un cartel o charla). Umami me permite rastrear mis analíticas sin tener que preocuparme por los banners de cookies. También tienen un nivel gratuito que debería ser suficiente para mí a menos que me vuelva viral o algo así.

Plausible es una gran alternativa a Umami y vale la pena mencionarlo aquí. La razón por la que decidí usar Umami es que ofrece un nivel gratuito como parte de su servicio alojado. Puedes usar una versión comunitaria de Plausible de forma gratuita, pero tienes que alojarlo tú mismo para hacer esto. Quería evitar eso por las razones mencionadas anteriormente.

Configurar Umami fue realmente sencillo. Solo necesitaba agregar una etiqueta de script a la cabecera de mi HTML y estaba listo para empezar. Esto se explicó durante el proceso de creación de la cuenta. No estoy seguro de si me quedaré con Umami a largo plazo, pero esta integración de una sola línea significa que puedo cambiar a otro proveedor de análisis con un esfuerzo mínimo.

Alojamiento Estático Gratuito con Cloudflare Pages

Hay muchos proveedores de alojamiento estático gratuitos por ahí. Cuando empecé a usar un generador de sitios estáticos, usé Netlify. Ese fue un gran servicio, pero ya estoy usando Cloudflare como parte de mi sitio web personal para filtrar bots y estoy feliz de quedarme con ellos. Más recientemente, mi sitio web ha sido alojado directamente usando GitHub Pages. Sin embargo, GitHub ha tenido algunos problemas recientes con repositorios privados que en realidad son accesibles públicamente, y probablemente no mantendré mi suscripción a GitHub Pro después de que expire mi licencia educativa. Además, GitHub tiene una limitación en la cantidad de datos que puedes almacenar en un repositorio. Tengo algunas ideas interesantes para publicaciones de blog que podrían requerir más de unos pocos cientos de kilobytes en bruto, y sería bueno poder gestionar mi estructura de datos de una manera que mantenga mi sitio web y los datos juntos. Tengo un buen plan de redundancia de datos en marcha (otro post de blog para otro día), así que me siento cómodo gestionando mis datos de esta manera.

Cloudflare Pages es genial porque puedes subir directamente tu sitio estático a su servicio. Esto evita tener que usar algo como Github CI o preocuparse por algún complicado proceso de lanzamiento de API. Creo que podría ser posible integrar redirecciones directamente en Cloudflare, lo que me permitiría evitar tener que incorporar esa función en Zola. En este momento, Cloudflare Pages es gratuito y no parece tener límites en los datos que puedes almacenar. También tiene funciones sin servidor integradas, así que podría usar eso para agregar más funcionalidad a mi sitio web estático. Tengo demasiadas ideas para proyectos personales, así que adaptarme a la plataforma de Cloudflare también me prepara para proyectos futuros.

Primero, necesito construir mi sitio usando Zola. Para hacer esto, estoy usando el comando zola build. Esto creará una carpeta llamada public en mi directorio de proyecto. Por ahora, estoy manejando el proceso de carga manualmente. Simplemente crea una cuenta de Cloudflare si no tienes una y navega a la sección de Workers & Pages de tu panel de control. Haz clic en la pestaña de Pages, nombra tu nuevo proyecto y sube la carpeta public. Si no tienes un dominio, te darán un subdominio para usar. Eventualmente automatizaré el proceso de carga. La documentación para hacer eso está aquí

Vale la pena mencionar que en el momento de escribir esto, Cloudflare Pages tiene un error persistente para usuarios de Firefox. Al subir contenido, por alguna razón incluye metadatos adicionales que cambian la forma en que Cloudflare maneja las páginas, de modo que solo muestran el HTML sin procesar. Podría haber una forma de hacer esto automáticamente, pero esto se puede solucionar agregando un archivo extra "_headers" en la raíz de tu carpeta "public/".

/*
! X-Content-Type-Options

Planes Futuros

Estoy seguro de que esta no será la última vez que haga un rediseño completo de mi sitio web. Espero que hayas encontrado valiosa mi justificación detrás de mis decisiones de alguna manera. Creo que a pesar de cuánto tiempo han estado disponibles los generadores de sitios web estáticos, todavía hay mucho espacio para desarrollos futuros. Me interesa cómo podría construir una experiencia más interactiva a través de JavaScript embebido o aprovechando las funciones sin servidor. No tengo dudas de que podrías construir aplicaciones bastante impresionantes con un sitio web estático y funciones sin servidor.

En un futuro cercano, quiero aprovechar muchas de las características que Zola tiene para ofrecer. No estoy completamente satisfecho con la búsqueda y el soporte de idiomas que esta combinación ofrece de manera predeterminada. Probablemente comenzaré agregando contenido en idiomas adicionales y luego veré cómo hacer que la búsqueda funcione completamente. A partir de ahí, tengo varias ideas diferentes para el blog que creo que serán útiles para los estudiantes de posgrado actuales y futuros en el espacio de la biología sintética. También creo que este sitio web servirá como una buena plataforma de lanzamiento para algunas de las herramientas que he construido. Más que nada, estoy emocionado de finalmente tener una configuración cohesiva y comenzar a crear contenido, algo que he querido hacer durante mucho tiempo.