Share
Esta es la primera parte de una pequeña serie sobre Middleman, "un generador de sitios estáticos que utiliza todos los accesos directos y herramientas en el desarrollo web moderno". Los primeros dos tutoriales cubrirán los aspectos básicos, después de lo cual pondremos en práctica lo que hemos aprendido con un proyecto práctico. Middleman requiere el uso de Ruby, pero no dudes en seguir leyendo si esto te es ajeno; esta serie es completamente amigable para los novatos.
¿Qué es todo el fuzz últimamente con los sitios estáticos? Bueno, son rápidos, bastante sencillos de configurar y ligeros. 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 muy afectadas por el tráfico también son un buen candidato. HealthCare.gov de la administración de Obama usó a Jekyll, otro generador de sitios estáticos, para su sitio. Si necesita algo rápido y fácil, que pueda escalar fuera de la caja, los sitios estáticos pueden ser increíbles. Especialmente porque puedes alojarlos gratis en GitHub Pages o Heroku.
Podría decirse que todo el hipness del sitio estático 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 co-fundadores de GitHub necesitaba una mejor forma de escribir blogs y se le ocurrió a Jekyll, este generador de sitios estáticos para "Blogging like a 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 Middleman. Podría ser justo decir que Middleman es un poco menos “consciente de los blogs” de la caja, pero no obstante es igualmente poderoso y de gran calidad..
Middleman usa Ruby, que ofrece un conjunto bastante extenso de características para construir cosas geniales. Si alguna vez has usado Rails o Sinatra, te sentirás como en casa. Parece que Middleman y Jekyll son las opciones para los sitios estáticos en la comunidad de Ruby. También he oído a más y más diseñadores argumentar que les gusta usarlos para crear prototipos y para configurar sus propias páginas personales. Lo que muchos de estos marcos de sitios estáticos tienen en común es que son bastante fáciles de usar.
En este artículo asumiré que eres al menos un poco Interesado en Ruby, y tenerlo instalado en su sistema. Si necesita ayuda, eche un vistazo a Ruby para principiantes: cómo instalar Ruby y cómo comenzar por Andrew Burgess.
Saber cómo tratar con RubyGems también es necesario y, nuevamente, Ruby for Newbies de Andrew Burgess: Trabajar con gemas te ayudará a comenzar si es necesario. Haré mi mejor esfuerzo para no pasar por alto tu cabeza con los conceptos de programación, pero no estaré cubriendo conceptos básicos de programación como bucles, bloques de código y demás. Para los novatos entre ustedes, no se preocupen, Middleman no tiene muchas partes móviles, y demostraré lo fácil que es aprender..
¿Así que tienes Ruby y RubyGems en tu cinturón? Genial, entonces estamos bien para ir.
Abre tu terminal y entra:
bash gem instalar intermediario
Si se le niega el permiso para hacerlo, deberá anteponer el comando con sudo e ingrese su contraseña de administrador del sistema. Después de que este proceso haya finalizado, podrá usar un par de comandos de intermediarios a través del indicador de comandos.
Este comando inicia un nuevo proyecto. Tendrá que proporcionarlo con el nombre de su aplicación, luego presionar enter.
bash middleman init your_fancy_app También toma argumentos adicionales como con qué plantilla quieres comenzar. Esto hace que sea realmente útil personalizar sus aplicaciones con plantillas desde el principio, ¡reduciendo bastante las tareas de configuración repetitivas! Discutiremos más sobre las plantillas en un tutorial posterior..
bash middleman init your_fancy_blog --template = blog
bash middleman init your_fancy_mobile_app --template = mobile
Middleman viene con un servidor local para su desarrollo. Iniciándolo te permite ver tu sitio en http: // localhost: 4567 / **. Si acaba de entrar ** intermediario sin ningún argumento adicional, esto también activará su servidor. Apague su servidor con CTRL-c.
Una vez que tenga algo que esté listo para poner en un servidor orientado a Internet, deberá construir Tú sitio. Esto significa que cualquier cosa que haya preparado en su /fuente carpeta será procesada y la salida final se enviará a la /construir carpeta que intermediario también crea para ti. Todos sus archivos que utilizan preprocesadores como Slim, Haml, Sass, CoffeeScript se procesarán en sus respectivos homólogos y se colocarán en su directorio / build.
Una vez que su sitio esté listo para enfrentar Internet, este comando implementa su /construir carpeta en su servidor web. Cada actualización que hagas pasará por este proceso..
Hazte un favor de inmediato y activa LiveReload para actualizar automáticamente tus páginas después de los cambios en tus archivos HTML, Sass o JS. Esto es de gran conveniencia durante el desarrollo, ¡no te arrepentirás! El intermediario en estos días ofrece LiveReload fuera de la caja-solo necesitas agregar
gema de rubí 'intermediario-livereload'
para usted Gemfile y descomenta la siguiente línea en config.rb:
ruby # Recarga el navegador automáticamente cada vez que se cambian los archivos, activa: livereload
Entonces atas al intermediario
paquete de bash #o intermediario exec paquete
Así que vamos a empezar con /fuente y /construir carpetas Entre ellos se encuentra la línea divisoria que separa las secciones de desarrollo y producción. Cuando usa su servidor web local para el desarrollo, / source se usa 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 compilación de intermediarios en tu linea de comando Por lo tanto, debe tener cuidado de no gastar accidentalmente su tiempo de codificación / compilación porque este trabajo desaparecerá después del proceso de compilación. En general, todo su desarrollo se supone que ocurre en / source.
El proceso de compilación crea los sitios estáticos que desea que aloje su servidor. Cada archivo en su /fuente carpeta será procesada y luego almacenada en /construir. Como se mencionó anteriormente, su Sass, CoffeeScript, Slim / Haml y sus parciales se procesarán en sus equivalentes confiables. Todos los diseños se juntarán también. Si ha activado la compresión para estos archivos, este es el momento en que también se "uglifican". Durante todo este shabang, la carpeta / build se descompone al deshacerse de los archivos que ya no tienen ninguna referencia en / source. Durante compilación de intermediarios, cualquier cambio que haya realizado en los archivos en / source desencadenará una regeneración de los nuevos archivos estáticos correspondientes para / build.
El proceso de despliegue es el último paso. Con el /construir directorio en su lugar, tiene todo lo que necesita para poner su aplicación allí. Mi recomendación es hacer esto temprano para evitar encontrar sorpresas..
Vamos a ver la estructura básica de una aplicación Middleman. Los componentes principales son:
Como se puede ver a continuación, la mayoría del Jazz entra en el /fuente carpeta. Lo que me gusta de las aplicaciones Middleman es su organización simple. Navegar por la estructura del documento es sencillo, incluso para principiantes.
Si no está satisfecho con la denominación de algunas de estas carpetas, puede cambiar eso en sus configuraciones (config.rb). Los mismos nombres serán utilizados para su acabado. /construir carpeta.
"ruby set: css_dir, 'custom_folder_name'
set: js_dir, 'custom_folder_name'
set: dir_imágenes, 'custom_folder_name "
Una vez que tenga su servidor en funcionamiento, puede ver otras opciones para configurar Middleman directamente en su navegador: http: // localhost: 4567 / __ middleman / config /. No todos ellos pueden tener sentido, o incluso es importante saberlo en esta etapa. Dale un vistazo y un marcador mental es totalmente suficiente por ahora..
Uno tu corres compilación de intermediarios puedes echar un vistazo a la /construir carpeta. Todos los archivos HTML, CSS y JS que necesita para servir a su sitio estático.
Eso es prácticamente todo lo que necesita saber para comenzar y orientarse..
Sugerencia: En este punto, tendría mucho sentido si usted mismo comienza a armar una aplicación de prueba. Mira a tu alrededor y experimenta cómo están organizadas las cosas y cómo encajan las piezas.
El término Front Matter proviene de la publicación de libros, y se refiere a la información al frente de un libro. En el caso de archivos de sitios 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 otro final. Por ejemplo, aquí está la parte superior de un archivo ficticio llamado: some.html.erb.
Diseño: Título del bono: Nombres de las chicas de bond favoritas Fecha: 2015-11-09 tags: bond, 007
some_secret: no seré renderizado hasta que me uses.
bond_girls: - Strawberry Fields - Jill Masterson - Tiffany Case
"
Las variables YAML se ven como un hash. Puede acceder a esos datos locales a través de página actual objeto:
ruby current_page.data.some_variable
A menudo lo utiliza para almacenar etiquetas, fechas, títulos y opciones de configuración, como el diseño que desea usar para páginas particulares. La materia delantera es una tienda YAML para sus variables. También puedes usar JSON si lo prefieres. Piense en ello como un lugar para colocar datos que normalmente podrían residir en una base de datos. Discutiré las diferentes opciones y usos a lo largo del camino cuando surjan..
Esta es una buena oportunidad para repasar brevemente ERB. ERB le permite crear plantillas dinámicas que tienen código incrustado en ellas. Sus nombres de archivo necesitan tener una .erb extensión y usted necesita poner su código en los siguientes dos "contenedores".
Para el código que se ejerce pero no se "imprime" en la página, use esto:
html <% %>
Piense en ello como "solo cálculo".
De lo contrario, para los valores de retorno que desea que aparezcan "impresos" en la página, también debe agregar un signo igual. Eso es.
html <%= %>
Los conceptos de layouts y parciales están estrechamente relacionados. Déjame darte una pequeña gira en caso de que no hayas jugado con Rails, Sinatra o similar antes. Creo que debería comenzar con diseños 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 tu trabajo. En lugar de escribir el mismo esqueleto HTML en todo el lugar, debe componer diseños para casos de uso particulares. Los ejemplos populares son dos diseños diferentes tanto para un administrador como para un usuario "normal". Por lo general, tienen una experiencia muy diferente al mirar la página "igual".
Cuando inicias una aplicación de intermediarios simple, obtendrás automáticamente un layout.erb presentar en fuente / diseños. Tenga en cuenta que este archivo termina en .erb y no .html.erb. Los diseños no deben representarse en HTML y Middleman emitirá un error si crea diseños con una extensión .html. Si utiliza un lenguaje de plantillas diferente como Slim o Haml, los diseños podrían tener sus extensiones. Como sugiere el valor predeterminado, debe colocar todos sus diseños en el / diseños carpeta en fuente.
Aquí hay un ejemplo de source / layouts / layout.erb:
"html
"
Este diseño predeterminado es bastante básico, pero proporciona todo lo que necesita para comenzar. Echemos un vistazo:
Y desde allí puede personalizar este diseño para cada una de sus necesidades. Un aspecto potencialmente confuso para los novatos de Ruby es el rendimiento palabra clave: esto solo significa que pasa por el resto del contenido que creas. En otras palabras, rendimiento es un marcador de posición para sus puntos de vista que se representarán en él. Si ese concepto es completamente ajeno a ti, recuerda no tocarlo por ahora o tu aplicación podría no funcionar como se esperaba. Cada vez que crees tus propios diseños, teniendo rendimiento allí es esencial, de lo contrario su contenido no se mostrará. Lo dominarás en poco tiempo, lo prometo.
Si creó diferentes diseños, puede especificar a través de la materia frontal qué diseño desea utilizar página por página. Digamos que tiene un diseño especial para dar la bienvenida a los usuarios, que es un poco más comercial. Aquí tenemos welcome.html.erb.
diseño: ventas -
"
Alternativamente, puede especificar diseños en su archivo config.rb.
página ruby "/welcome.html",: layout => "sales"
Si desea evitar hacer esto manualmente en cada página, puede recopilarlas en un solo lugar. Nuevamente, en config.rb, usas un comodín (** \ ***) para recoger un montón de páginas que utilizan el mismo diseño.
ruby page "/ sales / *",: layout => "sales"
Personalmente, me gusta poner esta información de diseño en la parte frontal. Es muy explícito y no demasiado repetitivo. Sin embargo, si tuviera un montón de ellos, preferiría usar el método de comodín.
Los parciales le brindan los medios para encapsular el código de vista que puede reutilizar donde lo necesite. Solo necesitas decirle a tu ver donde insertar un parcial y se procesa justo ahí. Los parciales son una técnica muy común para SECAR su código.
Los ejemplos más comunes incluyen barras de navegación, pies de página y secciones de encabezado, que no querría duplicar por todas partes. Los archivos para parciales comienzan con un guión bajo. Para empezar puedes colocarlos debajo. /fuente. Sus diseños son un buen lugar para comenzar con la recopilación de códigos para extraer en parciales. Cuando encuentre algo que necesite reutilizar, los parciales serán un amigo útil.
Aquí hay un ejemplo de /source/layouts/layout.erb.
"html
<%= partial "head" %> <%= partial "navbar" %> <%= yield %> <%= partial "footer" %>"
Y la fuente parcial / _head.html.erb:
"html
<%= stylesheet_link_tag “normalize”, “all” %> <%= javascript_include_tag “all” %>"
A veces querrá extraer un parcial, no solo para evitar la duplicación, sino también para que sus vistas sean más legibles. Con el tiempo, las secciones principales son conocidas por estar bastante cargadas, por ejemplo. Dentro de ellos puedes tener otro parciales que solo tratan con estilo o archivos JS.
Te darás cuenta de lo convenientes que son los parciales una vez que puedas aplicar los cambios que se extienden a través de toda tu aplicación, donde sea que incluyas el parcial. No hay necesidad de revisar un montón de archivos para aplicar el mismo cambio una y otra vez.
Los ayudantes son métodos que puede utilizar para muchas tareas diarias en sus vistas. Creo que esto fue pionero en Rails Land y rápidamente se convirtió en omnipresente para el desarrollo web moderno de la web. Ya has visto ayudantes que incluyen hojas de estilo y archivos JavaScript. Hay mucho más de donde viene esto, aunque.
Aquí está nuestra /source/_head.html.erb parcial de nuevo:
"html
<%= stylesheet_link_tag "normalize", "all" %> <%= javascript_include_tag "all" %>"
Estos ayudantes están diseñados para ayudarlo a escribir un código de vista más claro y conciso. En la lista de ayudantes a continuación encontrará muchas cosas útiles que salen de la caja. No estás limitado por estos sin embargo. 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 ayudantes Bloquea y coloca todos tus métodos de ayuda dentro. Eso es. Ahora tus vistas tienen acceso a ellas..
Ejemplo: /source/_navbar.erb.
"html
"
Y en config.rb:
"ayudantes de rubí hacen
def random_username "# lorem.first_name # lorem.last_name" fin
def random_image image_tag "# lorem.image ('30x40',: background_color => '333',: color => 'fff')" end
fin"
Estos ayudantes pueden ser útiles cuando rápidamente quiero crear un prototipo de algo y evitar la configuración de imágenes ficticias y texto por mi cuenta. En general, debe buscar el código que le gustaría que sea más conciso o que duplique una y otra vez. Los ayudantes son a menudo un buen hogar para eso..
Dentro de estos ayudantes personalizados, utilicé otros ayudantes de Middleman para crear img etiquetas a través etiqueta_imagen así como el lorem objeto para algunos nombres de usuario aleatorios y marcadores de posición de imagen. Estas cosas pueden ser un poco personalizadas para satisfacer sus necesidades.
Sin embargo, al utilizar el enfoque del módulo, necesita un archivo separado para su módulo. Cree un directorio "lib" en su carpeta raíz (el mismo nivel que "source" y "build") y cree un archivo para sus ayudantes.
Aquí tenemos /lib/helpers.rb:
"ruby module PrototypingHelpers def random_image image_tag" # lorem.image ('300x400',: background_color => '333',: color => 'fff') "end
def random_username "# lorem.first_name # lorem.last_name" end end "
Luego deberá informar a su archivo config.rb que desea usar estos ayudantes:
ruby require helpers 'lib / helpers' PrototypingHelpers
¡Auge! Estás listo para rodar. En general, me gustaría ir con el enfoque del módulo de inmediato. Me parece mucho más limpio, y además evitas contaminar tu archivo de configuración con demasiadas cosas..
También me gustaría mirar en ayudantes de salida y contenido_para en particular, ya que pueden ser un poco confusos para los novatos. Esto le permite capturar un montón de contenido que puede producir / reutilizar en otro lugar. Es una especie de miniatura parcial. Personalmente acudiría parcialmente la mayor parte del tiempo, pero de vez en cuando, cuando quiera aplicar más quirúrgicamente los cambios de encendido y apagado, es útil saberlo:
Aquí está index.html.erb:
"html <% content_for :navigation do %>
<% end %>
... "
Y admin_index.html.erb:
"html <% content_for :admin_navigation do %>
<% end %>
<% content_for :admin_javascript do %> <%= javascript_include_tag “admin” %> <%= javascript_include_tag “some_library” %> <% end %>
... "
Luego en layout.erb:
"html
<% if content_for?(:admin_javascript) %> <%= yield_content :admin_javascript %> <% else %> <%= javascript_include_tag "all" %> <% end %> <%= yield %> <%= partial "footer" %>"
La clave es usar contenido_contenido que es poner su contenido recopilado de la página individual en el diseño, si se encuentra. Tampoco es necesario utilizarlos solo con diseños. Cuando necesite hacer esto un poco más complicado, use contenido_para? para verificar bloques de contenido específicos antes de insertarlos. Es útil cuando desea realizar pequeñas adaptaciones para secciones que difieren solo un poco. Es fantástico que pueda guardar este contenido un poco como una configuración en las páginas relevantes y "activarlo" solo cuando sea necesario. Probablemente no deberías ponerte demasiado listo con estas cosas..
Una palabra sobre el enlace a ayudante que he usado anteriormente. Este es probablemente el que te encontrarás con más frecuencia. Básicamente, alimenta al método con un nombre y una url o ruta donde este enlace debe apuntar. Reemplazé la última parte con un marcador de posición por brevedad..
A continuación se muestra una descripción general de los ayudantes que están listos para usar a su disposición. Creo que la mayoría de los nombres se explican por sí mismos y no debería explicar en qué puede ayudarlos cada uno de ellos. Haga un marcador mental de lo que hay ahí fuera y verifique con la documentación si le dan algún problema..
Accentsconagua
etiquetaenlace ainput_tagfavicon_tagstylesheet_link_tagjavascript_include_tagcontenido_paracontenido_para?capture_htmlcontenido_contenidoconcat_contentform_tagetiquetaselect_tagsubmit_tagfield_set_tagtext_field_tagcheck_box_tagpassword_field_tagtruncarpluralizarajuste de líneaescape_htmlsimple_formatjs_escape_htmltime_ago_in_wordsdistance_of_time_in_wordslorem.datelorem.wordlorem.namelorem.emaillorem.imagelorem.wordslorem.sentencelorem.last_namelorem.paragraphlorem.first_namelorem.paragraphsCreo que esta es una buena base para comenzar a jugar con una aplicación de juguete. Debe tener un buen sentido de lo que ofrece Middleman y cómo navegar por el marco. En la siguiente parte de esta serie iremos más lejos y profundizaremos un poco más en el marco. El equipo de Middleman realmente ha hecho un gran trabajo diseñando la API y manteniendo las cosas simples.
Afortunadamente, ya puede ver por qué este marco ha ganado popularidad y por qué es una buena opción para todo tipo de proyectos estáticos..
