Almacenamiento de Fragmentos de Código en AWS S3

En el capítulo anterior, escribimos código HTML que nos permite alimentar a la tortuga, y en este código, usamos una imagen que subimos a AWS S3 en un bucket público. Pero puede que hayas notado que leer el código desde allí era bastante incómodo debido a la gran cantidad de estilos.

Estoy llevando a que también podemos subir ciertos fragmentos de código a AWS S3, al igual que las imágenes. Por ejemplo, en nuestro caso, sería conveniente subir estilos CSS para nuestras páginas HTML o aplicaciones a AWS para ahorrar espacio en el código.

Nota

Estos estilos serán bastante fáciles de gestionar porque si necesitamos cambiar los estilos en todos los lugares donde se usan, simplemente modificamos unas pocas líneas de código en el archivo en S3, cambiando así los estilos en todas las páginas** donde hemos referenciado el enlace. ¡Muy conveniente!

Echemos un vistazo al archivo de estilo que quiero subir al almacenamiento:

Nota

Estos estilos están ubicados en la pestaña index.css. Asegúrate de seleccionar la pestaña correcta.

Para agregar un archivo con estilos a AWS S3, primero necesitamos crear este archivo y subirlo a nuestro bucket público:

Ahora, para usar estos estilos CSS en el código HTML, necesitamos usar una sintaxis muy simple:

En el caso de enlazar nuestros estilos, esta línea se verá así:

Veamos cuánto se reducirá nuestro código después de nuestros cambios y cómo se verá ahora:

Si haces clic y sigues este enlace, verás el contenido de este archivo, es decir, los estilos que escribí anteriormente. De esta manera, tanto nosotros como los usuarios de nuestro sitio web podemos ver qué estilos están almacenados en AWS y pueden querer tomarlos prestados de nosotros.

También vale la pena mencionar que también podemos subir scripts de JavaScript a S3. Esto no es la mejor práctica porque los scripts a menudo necesitan edición y trabajar con ellos, pero en nuestro caso, estamos aprendiendo, ¡así que hagámoslo y simplifiquemos aún más nuestro código!

A continuación se muestra el script que subiremos a nuestro bucket público:

Ahora, necesitamos subir el archivo de script de JavaScript a nuestro bucket público:

Y ahora necesitamos usar la siguiente sintaxis para agregar el script al código a través del enlace:

Después de agregar el script desde AWS S3, nuestro código para la tortuga se verá así:

Nota

Por cierto, puedes ver nuevamente el script directamente a través del enlace.

El código se ve bien, ¿verdad?

En los próximos capítulos, aprenderemos cómo alojar páginas HTML completas y crear sitios web de varias páginas usando AWS S3, ¡así que mantente atento!