FLASH SALE! Up to 40% off on unlimited courses, tutorials and creative asset downloads SAVE NOW
Advertisement
  1. Web Design
  2. Middleman
Webdesign

Proyecto: Construya un Sitio Web completo con Middleman

by
Length:LongLanguages:
This post is part of a series called Building Static Websites with Middleman.
Working With Data, Assets, and Templates in Middleman
Project: Continuing Our Website Build With Middleman

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

En la parte tres de esta serie vamos a ensuciar nuetras manos y comenzaremos a construir un sitio para un sitio de podcasts ficticio: "Matcha Nerdz". Utilizaremos Middleman, Bourbon, Neat y Bitters. ¡Empecemos!

En Este Artículo 

  • Mapa de ruta
  • Configuración Básica del Blog
  • LiveReload
  • Organizando Publicaciones
  • Implementación de Páginas GitHub
  • Activos más Inteligentes
  • Configuración de Bourbon
  • Normalize y jQuery

Mapa de Ruta

Comencemos con una pequeña introducción de hacia dónde va esto. En el próximo par de artículos voy a construir un pequeño sitio estático para un podcast ficticio llamado "Matcha Nerdz"— un podcast para las personas que quieren sumergirse en todo lo relacionado con el té verde en polvo. Tendrá las siguientes páginas:

  • Una página para cada etiqueta
  • Una página de detalle para cada episodio
  • Una página de índice para podcasts anteriores

Utilizaremos Middleman para generar el sitio estático y la suite Bourbon para todo el estilo. Espero que haya echado un vistazo a mis tutoriales anteriores sobre Bourbon, Neat y Middleman antes de llegar a este punto. Si no, le recomiendo que vaya y los lea, a menos que se sienta suficientemente confiado en las bases.

Para todas las cosas relacionadas con el estilo, he estado dependiendo mucho de Bourbon durante bastante tiempo. Además, realmente escudriñé en la sintaxis sangrada de Sass—yo la prefiero mucho más a la sintaxis .scss. La sintaxis .sass es el único pedazo (probablemente) desconocido que me gustaría lanzar a los principiantes, porque siento que realmente vale la pena conocerla.

Configuración Básica del Blog

Iniciemos una nueva aplicación para nuestro sitio de podcast, ingresando en la terminal:

y luego cambiando a nuestro directorio de proyectos:

Ahora vamos a iniciar Git:

A continuación, agregamos la plantilla de blog a la mezcla. Esta es una buena base para nuestro sitio de podcast. Posteriormente ajustaremos los artículos para mostrar las pistas de audio de podcast de SoundCloud. Por ahora, sin embargo, es solo un blog.

En el Gemfile agregar:

A continuación, a través de la terminal:

Esto actualizará su carpeta "matcha_nerdz". ".config.rb" y su plantilla de índice ontendrá una pequeña actualización también. Además de eso, obtendrá nuevas plantillas para su feed, página de etiquetas, página de calendario, un artículo de ejemplo y un nuevo diseño. Compruebe la salida de la terminal:

Git:

Creación de Nuevos Artículos

Ahora puede crear nuevos artículos a través de la línea de comandos:

Esto crea un nuevo artículo markdown en "/ source". Esto no es óptimo en cuanto al almacenamiento, pero llegaremos allí. Lance su servidor para ver su primer ejemplo de artículo de blog:

Limpiando las cosas

Luego necesitamos hacer algunas tareas domésticas. La plantilla de blog creó un nuevo diseño bajo "source/layout.erb". Necesitamos borrar el original en "source/layouts/layout.erb" y mover el nuevo hacia allá. Así, a través de la terminal:

También necesitamos actualizar el nuevo "layout.erb" con lo que que se eliminó en el archivo de diseño. Agregue lo siguiente a su etiqueta <head> en "source/layouts/layout.erb":

Lo más importante, esto asegura que su JS y los activos de estilo estén disponibles.

Git

LiveReload

Para hacer nuestras vidas un poco más convenientes, añadiremos LiveReload a la mezcla. Necesitamos tomar la gema y luego activarla en nuestro archivo "config.rb".

En nuestro Gemfile:

En la terminal:

Luego en config.rb:

Y finalmente nuestros comandos Git:

Con esto activado, reinicie su servidor y su página se actualizará automáticamente cada vez que cambie el contenido de la página, los estilos o el comportamiento. ¡Salvavidas, confíe en mí!

¡Atención! Una palabra de precaución: Si tiene otro servidor local en ejecución, LiveReload no puede jugar a la pelota. Tendrás que matar a ese otro servidor por ahora.

Organizar Publicaciones

Cuando mire dónde están almacenados los artículos en este momento, rápidamente se dará cuenta de que esta organización directamente bajo "/source" se vuelve tediosa muy rápidamente. Publique un par de artículos y se ahogará en ellos. No hay necesidad de ser tan desordenado-en su lugar vamos a crear un directorio bajo "/source" para todos nustras publicaciones. Mueva su(s) artículo(s) allá y deje que Middleman sepa dónde encontrarlos.

A continuación, agregamos "/posts" como fuente para los artículos del blog. En config.rb:

Luego nuestros comandos Git:

Y eso es todo. Nada debería haber cambiado y debería ver el artículo de ejemplo como antes. El almacenamiento de publicaciones, sin embargo, está mucho más sano. Lo que también es genial es que si crea nuevos artículos a través de la línea de comandos, los nuevos mensajes se almacenarán en "/post" automáticamente:

Implementación de Páginas GitHub

Para mí, empujar los sitios estáticos a las páginas de GitHub es una solución tan conveniente que no quiero ponerle a usted a implementar a través de Heroku o el servicio S3 de Amazon. ¡Vamos a mantenerlo simple!

En el Gemfile:

Luego en la terminal:

Necesitamos agregar un bloque de despliegue a "config.rb":

Para que GitHub Pages encuentre sus recursos CSS y JS, también deberemos activar lo siguiente en config.rb:

Luego, cree un repo en GitHub, agregue el control remoto y despliegue:

¡Boom! Su sitio está en en vivo bajo "suusuario.github.io/nombreproyecto" y sus activos deberían estar ordenado. Me encanta este proceso, no podría ser más fácil y más fácil de usar. ¡Buen trabajo GitHub!

Activos más inteligentes

En el último paso antes de entrar en la configuración de Bourbon, me gustaría deshacerme de los estilos que vienen con Middleman y optimizar nuestros activos para un mejor rendimiento en la minificación y concatenación del navegador. Vaya a "source/stylesheets/all.css" y elimine su contenido. Sólo mantenga la primera línea:

Comandos Git:

A continuación, queremos activar un par de opciones para optimizar el rendimiento en "config.rb":

Luego, de nuevo, los comandos Git:

Permítame explicarle rápidamente lo que hicimos aquí:

  • :gzip

En este momento, gzip es el método de compresión más popular y efectivo. Su algoritmo de compresión encuentra cadenas similares dentro de un archivo y las comprime. Para HTML, que está lleno de espacio en blanco y etiquetas de coincidencia, esto es muy eficaz y por lo general, reduce el tamaño de respuesta HTTP en un increíble 70%. La activación de este no sólo comprime su HTML, sino también los archivos CSS y JS. Durante una compilación, Middleman crea sus archivos como de costumbre, pero también los duplica con una versión ".gz". Cuando un navegador se pone en contacto con sus archivos, puede elegir si prefiere servir gzip archivos comprimidos o regulares. gzipping está soportado en gran medida por navegadores web y móviles.

  • :minify_css

Este proceso elimina todos los desperdicios innecesarios de sus estilos y reduce significativamente su tamaño de archivo. En resumen, su CSS se convierte en una gran mancha—optimizado para ser leído por una máquina. Definitivamente no es amable a los ojos.

  • :minify_javascript

Esto es lo mismo que minify_css, pero un poco más complicado y sofisticado.

  • :asset_hash

Esto activa el hashing de sus activos. Esto significa que sus nombres de archivo de activos cambian y reciben información adicional (durante el proceso de compilación), lo que informa a los navegadores si necesitan volver a descargar los activos o no. Ahora, el nombre de un archivo depende del contenido de ese archivo. Los recursos con hash son almacenados en caché por los navegadores y sus sitios se procesan más rápido. Otra palabra para esto es "fingerprinting", ya que proporciona una solución simple para informar a los navegadores si dos versiones de un archivo son idénticas. La fecha de despliegue no importa, sólo el contenido. Eche un vistazo a cómo se ven los archivos de los recursos con hash:

Capturas de pantalla

file
file
file

Esto parece desagradable, pero ahora tus imágenes, hojas de estilo y archivos JavaScript obtienen un nombre único a través de este código "aleatorio" agregado: un hash (único). Cada vez que cambia un activo y pasa por el proceso de construcción de nuevo, este hash cambia, lo que a su vez indica a los navegadores que entonces, y sólo entonces, necesitan volver a descargar ese archivo en particular. El archivo se expira efectivamente, un proceso conocido como "cache busting".

También vale la pena mencionar: puede referirse a sus archivos de la misma manera que antes, pero durante la construcción de las referencias en su HTML actualícese para utilizar estos nombres hash. Eche un vistazo:

“/build/index.html(.gz)”:

En su carpeta "/build", los archivos JS y CSS son referenciados automáticamente con los nombres de los elementos hash. Como resultado de este negocio de hash, cuando se mueve por diferentes páginas en la misma sesión o vuelve a visitar una página más tarde, estos activos se han almacenado en caché y no es necesario volver a solicitarlos—hasta que usted cambie algo. Este proceso reduce su número de solicitudes por una cantidad asombrosa. ¿No es eso genial? Todo eso con una línea de código en "config.rb" y alguna magia de Sprockets. ¡Booyakasha!

La clave con todas estas técnicas de optimización de activos es minimizar el número de solicitudes y el tamaño de solicitud de sus archivos y activos. Middleman ofrece un gran aumento de rendimiento directamente de paquete, con poco trabajo por su parte.

Nota: GitHub Pages ha minimizado y comprimido todo por defecto. Pero no hace daño asegurarse de que todo está en su lugar, especialmente si después decide alojar su aplicación en otro lugar.

Echemos un vistazo a nuestra etapa actual. Su página de índice debe verse bastante simple ahora:

file

Configuración de Bourbon

Para este proyecto quiero usar tres gemas de Bourbon:

  • Bourbon
  • Neat
  • Bitters

Vamos a agregarlas a nuestro Gemfile y paquete:

En la terminal:

Bourbon y Neat ahora están listos (casi). Bitters necesita instalar algunas cosas primero. Necesitamos cambiar en el directorio de hojas de estilo y activar un generador que coloca gran cantidad de archivos Bitters en una carpeta "/base".

Eche un vistazo a lo que tenemos después de esto:

Captura de pantalla

file

Bitters es algo así como una línea de base para sus diseños. Le da un par de diseños limpios para elementos de interfaz de usuario como botones, tipografía, formularios, mensajes de error y así sucesivamente. Bitters también prepara un archivo "configuración de rejilla" para su cuadrícula Neat que también tenemos que configurar descomentando la siguiente línea en "source/stylesheets/base/_base.scss":

Para completar nuestra configuración de Bourbon por ahora, me gustaría añadir las siguientes variables a nuestra configuración de cuadrícula. Establecen las bases para dimensionar nuestra cuadrícula y activar una rejilla visual que nos ayuda a alinear mejor nuestro diseño.

En "/source/stylesheets/base/_grid-settings.scss":

El último paso para realizar este trabajo es cambiar el nombre de "/stylesheets/all.css" a "/stylesheets.all.sass" e importar nuestros archivos Bourbon.

Nota: Puesto que cambiamos a la sintaxis de Sass sangrado, también necesitamos matar el punto y coma al final de la línea @charset.

"all.css.scss":

Importamos el archivo básico de Bitters aquí justo después de Bourbon porque necesitamos acceso al archivo de configuración de cuadrícula de Neat (que está en la carpeta "/base") antes de importar Neat.

Git:

¡Echemos un vistazo! Usted puede ver la rejilla visual roja y, también gracias a Bitters, nuestra tipografía ha mejorado un poco más allá de los valores predeterminados del navegador. Eche un vistazo a una captura de pantalla:

file

Normalize y jQuery

Middleman viene con un archivo Normalize que se importa en "all.css" de forma predeterminada. Esta es una solicitud de recurso innecesaria de la que podemos deshacernos fácilmente, así que cambie el nombre de "source/stylesheets/normalize.css" a "source/stylesheets/_normalize.css.scss" primero. Ahora tenemos un parcial que tenemos que importar a la derecha en la parte superior después de @charset en "source/stylesheets/all.sass":

Una cosa que no debemos pasar por alto es el enlace a nuestras hojas de estilo en nuestro diseño. Ya que estamos usando parciales de Sass que se importan todas en una hoja de estilo final, "global", ya no necesitamos un enlace para normalize.css—un enlace a all.sass es suficiente.

En "source/layouts/layout.erb":

Y luego Git:

Finalmente, antes de tomar un descanso, debemos añadir jQuery que necesitaremos más adelante. En el Gemfile:

Y en la terminal:

Como quiero usar CoffeeScript para este proyecto, necesitamos cambiar el nombre de "source/javascripts/all.js" a "source/javascripts/all.coffee". Allí necesitamos jQuery para Sprockets/Asset Pipeline y estamos listos.

En all.coffee:

Nuestros comandos Git:

Y desplegamos:

Después de implementar, abra su sitio en las páginas de GitHub para ver si todo funciona como se esperaba. ¡Buen trabajo!

Descanso

¡Uf! Tomemos un descanso. Nos las arreglamos para sacar bastantes pasos de instalación aburrida fuera del camino con esto. Esperamos que se le dio una idea clara de lo que necesita para una base sólida cuando se inicia un nuevo proyecto de Middleman. A continuación vamos a ampliar lo que hemos construido aquí y seguir trabajando hacia un sitio decente para nuestro podcast.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.