Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Middleman
Webdesign

Cómo configurar un sitio web estático 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

Spanish (Español) translation by Claudia Márquez (you can also view the original English article)

Esta es la primera parte de una pequeña serie sobre Middleman, "un generador de sitios estáticos que usa todos los accesos directos y herramientas en el desarrollo web moderno". Los primeros dos tutoriales cubrirán lo básico, después de lo cual pondremos en práctica lo que hemos aprendido con un proyecto práctico. Middleman sí requiere el uso de Ruby, pero no dude en seguir leyendo si esto le resulta extraño; esta serie es completamente amigable para novatos. 

Middleman y Páginas estáticas 

¿Qué es todo la confusión últimamente con sitios estáticos? Bueno, son rápidas, bastante sencillas de configurar y livianos. Como no está sirviendo nada relacionado con la base de datos, los sitios estáticos son bastante confiables y rápidos HTML, CSS y, si es necesario, JS, eso es todo.

Muchas personas usan sitios web estáticos para configurar sus blogs y páginas personales.  Las páginas de destino que son afectadas fuertemente por el tráfico también son un buen candidato.  HealthCare.gov de la administración Obama usó el famoso Jekyll, otro generador de sitios estáticos, para su sitio. Si necesita algo rápido y fácil, que pueda escalar de la caja, los sitios estáticos pueden ser sorprendentes.  Especialmente ya que puedes alojarlos gratis en GitHub Pages o Heroku

file

Podría decirse que todo el sitio estático de moda comenzó hace unos años cuando apareció Jekyll. Por supuesto, los sitios estáticos son tan antiguos como el primer "¡Hola mundo!" De Sir Tim Berners-Lee, pero en los últimos 15 años, las aplicaciones respaldadas por bases de datos se convirtieron en "todo lo que importaba".  Hace un par de años, uno de los cofundadores de GitHub necesitaba una mejor forma de escribir blogs y se le ocurrió Jekyll, este generador de sitio estático y moderno para "Bloguear como un hacker".  Lo he usado en un par de ocasiones y solo tengo cosas buenas que informar.  El equipo central también es increíble. De todos modos, para esta serie, mi editor y yo acordamos que sería más interesante cubrir a Middleman.  Podría ser justo decir que Middleman es un poco menos "consciente del blog"  fuera de lo comun, pero igualmente igual de poderoso y de gran calidad. 

file

Ruby 

Middleman utiliza Ruby, que ofrece un conjunto bastante amplio de características para construir cosas interesantes.  Middleman utiliza Ruby, que ofrece un conjunto bastante amplio de características para construir cosas interesantes. Parece que Middleman y Jekyll son las opciones de acceso para sitios estáticos en la comunidad de Ruby.  I have also heard more and more designers argue that they like using them for prototyping and for setting up their own personal pages.  Lo que muchos de estos marcos de sitio estáticos tienen en común es que son bastante sencillos de usar.

En este artículo, supondré que al menos estás un poco interesado en Ruby y lo tienes instalado en tu sistema. Si necesita ayuda, eche un vistazo a Ruby for Newbies: Instalando Ruby y Comenzando por Andrew Burgess. 

También es necesario saber cómo lidiar con RubyGems, y, de nuevo, Ruby for Newbies: Working with Gems de Andrew Burgess lo ayudará a comenzar si es necesario.   Haré mi mejor esfuerzo para no pasar por alto con los conceptos de programación, pero no cubriré los conceptos básicos de programación como bucles, bloques de código y demás.  Para los novatos que hay entre ustedes, no se preocupen, Middleman no tiene tantas partes móviles, y les demostraré lo fácil que es aprender. 

 Instalación y primeros pasos

¿Entonces tienes a Ruby y RubyGems en tu poder? Genial, entonces estamos listos para irnos. 

Abre tu terminal e ingresa: 

Si se te niega el permiso para hacerlo, deberás anteponer el comando a sudo e ingresar la contraseña de administrador del sistema. Después de que este proceso haya finalizado, podrá usar un par de comandos prácticos de intermediarios a través del símbolo del sistema. 

file

middleman init

Este comando inicia un nuevo proyecto. Deberá proporcionar el nombre de su aplicación, luego presionar enter.

También se necesitan argumentos adicionales como la plantilla con la que desea comenzar. Esto hace que sea realmente útil personalizar sus aplicaciones con plantillas desde el principio, reduciendo un poco las tareas de configuración repetitivas. Discutiremos más sobre plantillas en un tutorial posterior.

middleman server 

Middleman viene con un servidor local para su desarrollo.  Iniciarlo le permite ver su sitio en https://localhost:4567 **. Si solo ingresa ** middleman sin ningún argumento adicional, esto también activará su servidor. Cierre su servidor con CTRL-c.

middleman build

Una vez que tiene algo que está listo para poner en un servidor de Internet, necesita build su sitio. Esto significa que lo que haya preparado en su carpeta /source se procesará y la salida final se enviará a la carpeta  /build que el intermediario también crea para usted. All your files which use preprocessors like SlimHamlSassCoffeeScript will be processed into their respective counterparts and put into your /build directory.

middleman deploy

Una vez que su sitio esté listo para enfrentar Internet, este comando implementa su carpeta /build en su servidor web. Cada actualización que realice pasará por este proceso. 

 livereload

Hágase un favor de inmediato y active LiveReload para actualizar automáticamente sus páginas después de los cambios en sus archivos HTML, Sass o JS. Esto es de gran conveniencia durante el desarrollo, ¡no te arrepentirás! Middleman en estos días ofrece LiveReload fuera de la caja, solo necesita agregar

a su Gemfile y descomente la siguiente línea en config.rb:

Luego, agrupas a Middleman 

Source vs. Build vs. Deploy 

Así que vamos a conseguir empezar con carpetas /source y /build. Entre ellos está la línea divisoria que separa tus secciones de desarrollo y producción. Cuando utiliza su servidor web local para el desarrollo, / source se utiliza para servir su aplicación. La carpeta /build es utilizada por sus servidores no locales para servir sus páginas estáticas. /build se crea cada vez que usas middleman build en tu línea de comando. Por lo tanto, debe tener cuidado de no gastar accidentalmente su tiempo de codificación en /build porque este trabajo desaparecerá después del proceso de compilación. En general, se supone que todo su desarrollo ocurre en /source.

El proceso de compilación crea los sitios estáticos que desea que el servidor aloje. Cada archivo en su carpeta /source será procesado y luego almacenado en  /build. Como se mencionó anteriormente, el Slim de Sass, CoffeeScript, Haml y parciales se proceso en sus contrapartes deplyable. Todos los diseños se unirán también. Si ha activado la compresión de estos archivos, este es el momento en que también se "uglifican"  Durante todo este shabang, la carpeta /build se rejuvenece al deshacerse de los archivos que ya no tienen referencia en /source. Durante middleman build, cualquier cambio que hayas realizado en los archivos en /source activará una regeneración de los nuevos archivos estáticos correspondientes para /build.

El proceso de implementación es el último paso.  Con el directorio /build en su lugar, tiene todo lo que necesita para poner su aplicación allí. Mi recomendación es hacer esto desde la planeación para evitar tener estas sorpresas.

Un nuevo sitio 

Vamos a ver la estructura básica de una aplicación de Middleman.  Los principales componentes son:

  • /images
  • /javascripts
  • /layouts
  • /stylesheets
  • config.rb
  • Un archivo index.html.erb
  • Un Gemfile 

Como puede ver a continuación, la mayoría de los Jazz entran en la carpeta /source. Lo que me gusta de las aplicaciones de Middleman es su organización simple. Navegar por la estructura del documento es sencillo, incluso para principiantes. 

file

Si no está satisfecho con el nombre de algunas de estas carpetas, puede cambiar eso en sus configuraciones (config.rb). Se usarán los mismos nombres para su carpeta de finalización /build.

Una vez que tenga su servidor en ejecución, puede verificar otras opciones para configurar Middleman directamente en su navegador: http://localhost:4567/__middleman/config/. No todos ellos pueden tener sentido, o es importante saberlo en esta etapa. Dale un vistazo y un marcador mental es totalmente suficiente por ahora.

Una vez que ejecutas middleman build, puedes echar un vistazo a la carpeta  /build. Todos los archivos HTML, CSS y JS simples que necesita para servir su sitio estático.

file

Eso es todo lo que necesita saber para comenzar y orientarse. 

Sugerencia: En este punto, tendría mucho sentido si usted mismo prepara una aplicación de prueba. Mire a su alrededor y sienta cómo se organizan las cosas y cómo encajan las piezas. 

Front Matter

El término Front Matter proviene de la publicación de libros, y se refiere a la información en el frente de un libro. En el caso de archivos de sitio web estáticos, se refiere a bloques de información que se almacenan en YAML.  Cada página le permite tener variables que se pueden almacenar en la parte superior dentro de un guión triple inicial y uno final. Por ejemplo, aquí está la parte superior de un archivo ficticio llamado: some.html.erb.

Las variables YAML se ven como un hash. Puede acceder a esos datos locales a través del objeto current_page:

A menudo lo usa para almacenar etiquetas, fechas, títulos y opciones de configuración, como qué diseño desea usar para páginas particulares.  Front matter es una tienda YAML para sus variables. También puede usar JSON si lo prefiere. Piense en ello como un lugar para colocar datos que normalmente podrían residir en una base de datos. Discutiré las diversas opciones y los usaré en el camino cuando aparezcan. 

ERB 

Esta es una buena oportunidad para revisar brevemente ERB.  ERB le permite crear plantillas dinámicas que tienen código incrustado en ellas.  Sus nombres de archivo deben tener una extensión .erb y debe colocar su código en los siguientes dos "contenedores".

Para el código que se ejecuta pero no se "imprime" en la página, se usa esto: 

Piénselo como "solo computación".

De lo contrario, para que los valores de retorno que desea ver aparezcan "impresos" en la página, debe agregar un signo igual. Eso es todo.

Layouts

Los conceptos de diseños y parciales están estrechamente relacionados.  Permíteme darte un pequeño recorrido por el torbellino en caso de que no hayas jugado con Rails, Sinatra o similares antes.  Creo que debería comenzar con los layouts primero. 

Los diseños le proporcionan la estructura para compartir el marcado común entre diferentes páginas, que pertenecen a la misma "familia" de páginas. Es una herramienta para evitar la duplicación y acelerar su trabajo.  En lugar de escribir el mismo esqueleto HTML en todos los lugares, compones diseños para casos de uso particulares.  Los ejemplos populares son dos diseños diferentes para un administrador y un usuario "normal". Por lo general, tienen una experiencia muy diferente al mirar la "misma" página. 

Cuando inicie una aplicación simple de intermediario, obtendrá automáticamente un archivo layout.erb en source/layouts. Tenga en cuenta que este archivo termina en .erb y no en .html.erb.  Los diseños no se deben representar en HTML y Middleman arrojará un error si crea diseños con una extensión .html.  Si usa un lenguaje de plantillas diferente como Slim o Haml, los diseños podrían tener sus extensiones en su lugar. Como lo sugiere el valor predeterminado, debe colocar todos los diseños en la carpeta /layouts en la source.

Aquí hay un ejemplo de source / layouts / layout.erb:

Este diseño predeterminado es bastante simple, pero proporciona todo lo que necesita para comenzar. Echemos un vistazo: 

  • Un poco de metainformación.
  • Un título de página dinámico que lee datos del contenido principal de cada página.
  • Métodos de ayuda que incluyen archivos de estilo y JavaScript. 
  • Y finalmente una etiqueta corporal para envolver su contenido que se "cede" en el diseño a través de  <% = yield%>.

Y desde allí puede personalizar este diseño para todas sus necesidades.  Un aspecto potencialmente confuso para Ruby newbies es la palabra clave yield, esto solo significa que pasa a través del resto del contenido que usted crea. En otras palabras, el yield es un marcador de posición para sus puntos de vista que se renderizarán en él. Si ese concepto es completamente ajeno a ti, recuerda no tocarlo por el momento o tu aplicación podría no funcionar como se esperaba. Cada vez que cree sus propios diseños, tener yield allí es esencial; de lo contrario, su contenido no se mostrará.  Lo entenderás en poco tiempo, lo prometo. 

Si creó diseños diferentes, puede especificar a través de la página principal qué diseño desea usar página por página. Supongamos que tiene un diseño especial para darles la bienvenida a los usuarios que es un poco más dependiente. Aquí tenemos welcome.html.erb.

Alternativamente, puede especificar diseños en su archivo config.rb.

Si desea evitar hacerlo manualmente para cada página, puede recopilarlos en un solo lugar. De nuevo, en config.rb, usa un comodín  (** \ ***) para recopilar un grupo de páginas que usan el mismo diseño.

Personalmente me gusta poner esta información de diseño en el frente. Es muy explícito y no demasiado repetitivo. Sin embargo, si tuviera un montón de ellos, preferiría usar el enfoque comodín.

Parciales

Los parciales le proporcionan los medios para encapsular código de vista que puede reutilizar donde lo necesite. Solo necesita decirle a su punto de vista dónde insertar un parcial y se procesa allí mismo.  Los parciales son una técnica muy común para SECAR tu código.

Los ejemplos más comunes incluyen barras de navegación, pies de página y secciones de la cabeza, que no le gustaría duplicar en todas partes.  Los archivos para parciales comienzan con un guión bajo.  Para empezar, puedes colocarlos debajo de  /source. Sus diseños son un buen lugar para comenzar a recopilar código para extraer en parciales. Siempre que encuentres algo que necesites reutilizar, los parciales serán un buen amigo.

Aquí hay un ejemplo de /source/layouts/layout.erb. 

Y la fuente source/_head.html.erb:

Algunas veces querrá extraer un parcial, no solo para evitar la duplicación, sino para hacer que sus vistas sean más legibles.  Con el tiempo, las secciones de la cabeza son famosas por estar bastante cargadas, por ejemplo.  Dentro de ellos puede tener otros parciales que solo se ocupen de estilo o archivos JS.

Te darás cuenta de cuán convenientes son los parciales una vez que puedas aplicar los cambios que se extienden por toda tu aplicación, donde sea que hayas incluido el parcial.  No hay necesidad de revisar un montón de archivos para aplicar el mismo cambio una y otra vez. 

Helpers 

Los ayudantes son métodos que puede usar para muchas tareas cotidianas en sus vistas.  Creo que esto fue pionero en la tierra de Rails y rápidamente se hizo omnipresente para el desarrollo web moderno de la web.  Ya has visto ayudantes que incluyen hojas de estilo y archivos JavaScript.  Sin embargo, hay mucho más de donde viene esto.

Aquí está nuestro /source/_head.html.erb parcial nuevamente: 

Estos ayudantes están destinados a ayudarlo a escribir un código de vista más claro y conciso. En la lista de ayuda a continuación, encontrarás muchas cosas útiles que salen de la caja. Sin embargo, no estás limitado por estos. Escriba sus propios métodos de ayuda en config.rb o recójalos por separado en un módulo

Funciona así: en tu config.rb creas un bloque de helpers y colocas todos tus métodos de ayuda dentro. Eso es.  Ahora sus puntos de vista tienen acceso a ellos. 

Ejemplo: /source/_navbar.erb.

Y en config.rb:

Estos ayudantes pueden ser útiles cuando quiero prototipar algo rápidamente y quiero evitar crear imágenes ficticias y enviar un texto por mi cuenta. En general, debe buscar el código que le gustaría ser más conciso o duplicar una y otra vez. Los ayudantes son a menudo un buen hogar para eso. 

Dentro de estos helpers personalizados utilicé otros ayudantes de Middleman para crear etiquetas img a través de image_tag, así como el objeto lorem para algunos nombres de usuario aleatorios y marcadores de posición de imágenes. Estos lorem thingrem pueden ser un poco personalizados para satisfacer sus necesidades.

Sin embargo, al usar el enfoque de módulo, necesita un archivo separado para su módulo. Cree un directorio "lib" en su carpeta raíz (el mismo nivel que "fuente" y "compilación") y cree un archivo para sus ayudantes.

Aquí tenemos /lib/helpers.rb:

Luego deberá dejar que su archivo config.rb sepa que desea usar estos ayudantes:

Boom! Estás listo para comenzar. En general, me gustaría ir con el enfoque de módulo de inmediato. Me parece mucho más limpio, además de evitar contaminar tu archivo de configuración con demasiadas cosas.

También me gustaría buscar ayudantes de salida y content_for en particular, ya que pueden ser un poco confusos para los novatos. Esto le permite capturar un montón de contenido que puede ceder / reutilizar en otro lugar. Es una especie de miniatura parcial. Personalmente, me quedaría con un parcial la mayor parte del tiempo, pero de vez en cuando, cuando desea aplicar los cambios de encendido y apagado más quirúrgicamente, es útil saber:

Aquí está index.html.erb:

Y admin_index.html.erb:

Luego en layout.erb:

content_for?

La clave es usar yield_content, que está colocando el contenido recopilado de la página individual en el diseño, si se encuentra. No hay necesidad de usarlos solo con diseños tampoco. Cuando necesite hacer esto un poco más complicado, use content_for? para verificar bloques de contenido específicos antes de insertarlos. Es útil cuando quieres hacer pequeñas adaptaciones para secciones que difieren solo ligeramente. Es genial que pueda guardar este contenido como una configuración en las páginas relevantes y "activarlo" solo cuando sea necesario. Sin embargo, probablemente no deberías ser demasiado inteligente con estas cosas.

link_to

A word about the link_to helper I used above. Este es probablemente el que te encontrarás más a menudo. Básicamente le das al método un nombre y una url o ruta a la que debe apuntar este enlace. Reemplacé la última parte con un marcador de posición para abreviar.

A continuación se muestra una visión general de qué ayudantes están listos para usar. Creo que los nombres son en su mayoría autoexplicativos y no debería repasar con qué puede ayudar cada uno de ellos. Haga un marcador mental de lo que hay disponible y vuelva a consultar la documentación si le causan problemas.

Tag Helpers

  • tag
  • link_to
  • input_tag
  • favicon_tag
  • stylesheet_link_tag
  • javascript_include_tag

Output Helpers

  • content_for
  • content_for?
  • capture_html
  • yield_content
  • concat_content

Form Helpers

  • form_tag
  • label_tag
  • select_tag
  • submit_tag
  • field_set_tag
  • text_field_tag
  • check_box_tag
  • password_field_tag

Format Helpers

  • truncate
  • pluralize
  • word_wrap
  • escape_html
  • simple_format
  • js_escape_html
  • time_ago_in_words
  • distance_of_time_in_words

Lorem Helpers

  • lorem.date
  • lorem.word
  • lorem.name
  • lorem.email
  • lorem.image
  • lorem.words
  • lorem.sentence
  • lorem.last_name
  • lorem.paragraph
  • lorem.first_name
  • lorem.paragraphs

Conclusiones finales

Creo que esta es una buena base para empezar a jugar con una aplicación de juguetes. Debería tener una buena idea de lo que ofrece Middleman y cómo navegar el framework. En la próxima parte de esta serie, vamos a ir más allá y profundizar un poco más en el framework. El equipo de Middleman realmente ha hecho un gran trabajo al diseñar la API y mantener las cosas simples.

Con suerte, ya puede ver por qué este framework ha ganado popularidad y por qué es una buena opción para todo tipo de proyectos estáticos.

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.