El desarrollo web hoy en día se ha vuelto muy complicado gracias a los creadores de miles de nuevas formas de hacer lo mismo. En los primeros días del desarrollo web, tenía PHP y jQuery, que hacían prácticamente todo lo que necesitábamos. Pero bueno, las cosas han cambiado ahora.

Larga historia corta

Entonces, estaba buscando una manera de crear mi sitio web personal. Lo cual hubiera tenido algunos blogs y mi proyecto mostraría eso es todo, no es gran cosa, ¿verdad? Bueno, aunque también lo mismo. Entonces, mi pensamiento inicial fue usarlos como mi pila tecnológica

• Reaccionar
• Firebase/Supabase
• CSS de viento de cola
• Páginas de Cloudflare para implementar

Bueno, este podría ser el final feliz pero... ?

Como ya dije, necesitaré una sección de blog e, irónicamente, blogs y reacciones no combinan bien. Dado que React es básicamente para crear aplicaciones web, no sitios web basados ​​en contenido. Ahora los que no saben porque aquí les dejo un resumen de chatGPT

Por qué React no es adecuado para sitios basados ​​en contenido

ChatGPT dijo,

React no es ideal para sitios basados ​​en contenido principalmente porque depende de la representación del lado del cliente, lo que puede afectar negativamente al SEO y a los tiempos de carga inicial de la página. Los sitios basados ​​en contenido se benefician de la representación del lado del servidor (SSR) o la generación de sitios estáticos (SSG), que React no maneja de forma inmediata. Herramientas como Next.js o Gatsby, que amplían React, se adaptan mejor a estas necesidades.

Próximo objetivo: NextJs

Bueno, es obvio que necesito SSR para el sitio de blogs, ya que quería una buena indexación por parte de los motores de búsqueda y vistas previas profesionales de enlaces de redes sociales. NextJs podría darme ambas cosas, pero todavía hay un problema, y ​​es algo personal.

Mira, siempre me encantó usar las páginas de Cloudflare y quería seguir con eso, además quería que el enrutamiento de correo electrónico gratuito de Cloudflare tuviera una dirección de correo electrónico personalizada adjunta a mi dominio, reduciendo así el costo.

SiguienteJS en Cloudflare

Intenté implementar el sitio nextJS en páginas de Cloudflare a través de su documentación oficial. Bueno, las cosas no salieron bien. No pude implementarlo allí. Intenté durante horas encontrar una solución y nada funcionó. Digamos que nextJS y Cloudflare no me fueron bien juntos. Entonces, si alguien de Vercel o Cloudflare lee esto, corríjame si me falta algo.

Bueno, en este punto no tenía esperanza y la última opción que tenía era SSG.

Siguiente solución: SSG

Ahora SSG es bueno y entiendo la importancia aquí. El problema es que nunca antes había trabajado con SSG y hay varias rutas para atravesarlo. Hay cosas como Hugo, Gatsby, Astro, bla, bla. Y probablemente más. Ahora no estaba familiarizado con ninguno de ellos y en ese momento estaba tan frustrado que no estaba dispuesto a invertir ni un poco en aprender una nueva herramienta para una aplicación de blog simple. Así que pensé: "A la mierda, haré lo mío".

Creando mi propio generador de sitios estáticos.

Algunos puntos por los que decidí desarrollar mi propio generador de sitios estáticos

1. Me sentí frustrado (por supuesto jajaja)
2. Dado que estoy creando mi propia herramienta, tendré el control total sobre cómo se generarán las páginas. ¿Cómo se verán?
3. Me gusta reinventar.
4. Tuve tiempo libre para gastar.

El Plan

El plan era crear un sitio web a la antigua usanza. Los artículos separados tendrán sus propias páginas html.

Aquí está el resumen completo:

1. Estaré escribiendo en archivos Palin Markdown
2. Utilice Python para analizar la rebaja en HTML simple
3. Ya tendré una plantilla donde se inyectarán dinámicamente diferentes secciones.
4. También tendré un archivo de configuración correspondiente al artículo. Entonces la jerarquía de archivos se verá así

articles/
├── art-1
│   ├── art.md
│   └── config.json
├── art-2
│   ├── art.md
│   └── config.json
├── art-3
│   ├── art.md
│   └── config.json
└── art-4
    ├── art.md
    └── config.json

Por lo tanto, cada publicación tendrá su propia carpeta y la carpeta tendrá config.json y art.md. El script de Python tomará template.html e insertará contenidos dinámicos en esa plantilla HTML, por ejemplo, el título de la publicación. slug, miniaturas del archivo de configuración y artículo principal del archivo de rebajas analizado. Lo más importante es que generará metaetiquetas dinámicamente para SEO y redes sociales. Luego, escribirá los cambios en un archivo llamado art/.html para que el enlace de la publicación sea example.com/art/slug. &&&]

fit ya sabes como en F it. Tiene los siguientes comandos u opciones:

$ ./fit --help
fit: also known has f**k it build system
A build system for my personal site developed by Shazin

USAGE
     fit 
COMMANDS
    init                Creates a new post template at articles/art-[n]
    build art-       Builds the specified article
    sync                Syncs the global articles index to homepage
    uploader            Launches the GTK GUI image uploader
    upload   Uploads the specified file to firebase
    deploy              Deploys local changes to remote repository
    help, -h, --help    Displays this help menu