Share
En la tercera parte de esta serie, nos ensuciaremos las manos y comenzaremos a construir un sitio para un sitio de podcast ficticio: "Matcha Nerdz". Usaremos Middleman, Bourbon, Neat y Bitters. Vamonos!
Vamos a empezar con un poco de heads-up de 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 personas que quieren sumergirse en todo lo que sea el té verde en polvo. Tendrá las siguientes páginas:
Usaremos 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, te recomiendo que vayas a leerlos, a menos que ya te sientas lo suficientemente seguro en lo básico..
Para todas las cosas relacionadas con el estilo, he estado confiando en Bourbon durante bastante tiempo. Además, realmente me gusta la sintaxis de Sass con sangría, ahora la prefiero .scss sintaxis. los .hablar con descaro a la sintaxis es la única (probablemente) parte desconocida que me gustaría lanzar a los novatos, porque creo que realmente vale la pena conocerla.
Iniciemos una nueva aplicación para nuestro sitio de podcast, ingresando en el terminal:
bash middleman init matcha_nerdz y luego cambiando a nuestro directorio de proyectos:
bash cd matcha_nerdz
Ahora vamos a poner en marcha Git:
"bash git init
# => para iniciar un nuevo repositorio de Git
git add -all # => agrega todos los archivos para la puesta en escena
git commit -m 'Initital commit' # => confirma cambios "
A continuación agregamos la plantilla de blog a la mezcla. Esta es una buena base para nuestro sitio de podcast. Más adelante 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:
gema rubí "intermediario-blog"
Luego a través de la terminal:
bash bundle # o bundle exec middledleman
bash middleman init --template = blog
Esto actualizará su carpeta "matcha_nerdz". ".Config.rb" y su plantilla de índice también se actualizan un poco. Además, obtienes nuevas plantillas para tu feed, página de etiquetas, página de calendario, un artículo de ejemplo y un nuevo diseño. Compruebe la salida del terminal:
bash idéntico .gitignore update config.rb existe source create source / 2012-01-01-example-article.html.markdown create source / calendar.html.erb create source / feed.xml.builder actualización source / index.html.erb crear fuente / layout.erb crear fuente / tag.html.erb existe fuente / hojas de estilo existe fuente / javascripts fuente / imágenes
Git:
bash git add --all git commit -m 'Agrega una plantilla de blog'
Ahora puedes crear nuevos artículos a través de la línea de comando:
Bash Middleman article "My new fancy second article" # => create source / 2015-11-22-my-wonderful-second-article.html.markdown
Esto crea un nuevo artículo de rebajas en "/ source". Esto no es óptimo en cuanto al almacenamiento, pero lo lograremos. Encienda su servidor para ver su primer artículo de blog de ejemplo:
bash middleman #or middleman server
A continuación tenemos que hacer algunas tareas de limpieza. La plantilla del blog creó un nuevo diseño en "source / layout.erb". Necesitamos eliminar el original en "source / layouts / layout.erb" y mover el nuevo a allí. Así, a través de la terminal:
bash rm source / layouts / layout.erb mv source / layout.erb source / layouts /
También necesitamos actualizar el nuevo "layout.erb" con las cosas que se eliminaron en el archivo de diseño. Agregue lo siguiente a su etiqueta en "source / layouts / layout.erb":
"html
<%= stylesheet_link_tag “normalize”, “all” %> <%= javascript_include_tag “all” %>"
Lo más importante es que esto garantiza que sus activos de estilo y JS estén disponibles..
Git
bash git rm source / layout.erb git add --todo git commit -m 'Mueve el nuevo diseño a / layouts Agrega enlaces de activos Elimina el diseño antiguo'
Para hacer nuestras vidas un poco más convenientes, agregaremos LiveReload a la mezcla. Necesitamos agarrar la gema y luego activarla en nuestro archivo "config.rb".
En nuestro Gemfile:
gema de rubí 'intermediario-livereload'
En la terminal:
paquete de bash
Luego en config.rb:
ruby #uncomment active: livereload
Y finalmente nuestro Git ordena:
bash git add --all git commit -m 'Activa LiveReload'
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, confia en mi!
Atención! Una advertencia: si tiene otro servidor local en ejecución, LiveReload puede no jugar a la pelota. Tendrás que matar a ese otro servidor por ahora.
Cuando mire dónde se almacenan los artículos en este momento, rápidamente se dará cuenta de que esta organización directamente debajo de "/ source" se vuelve tediosa muy rápidamente. Publica un par de artículos y te ahogarás en las publicaciones. No es necesario que sea tan desordenado; en lugar de eso, vamos a crear un directorio bajo "/ source" para todas nuestras publicaciones. Mueva su (s) artículo (s) allí y déjele saber a Middleman dónde encontrarlos.
bash mkdir source / posts mv source / 2012-01-01-example-article.html.markdown source / posts / Luego agregamos "/ posts" como fuente para los artículos del blog. En config.rb:
ruby blog.sources = "posts /: year-: title.html"
Entonces nuestro Git ordena:
"bash git rm source / 2012-01-01-example-article.html.markdown # Elimina el archivo movido del repositorio
git add -all gco -m 'Agrega una nueva carpeta para publicaciones y agrega una fuente en config.rb "
Y eso es. Nada debería haber cambiado y debería ver el artículo de ejemplo como antes. El almacenamiento de mensajes, sin embargo, es mucho más sano. Lo que también es bueno es que si crea nuevos artículos a través de la línea de comandos, sus nuevas publicaciones se almacenarán automáticamente en "/ post":
Bash Middleman article 'My awesome 3rd article' # => create source / posts / 2015-my-awesome-3rd-article.html.markdown
Para mí, el envío de sitios estáticos a GitHub Pages es una solución tan conveniente que no quiero ponerle en práctica a través de Heroku o el servicio S3 de Amazon. Seamos sencillos!
En el Gemfile:
gema rubí "intermediario-despliegue"
Luego en la terminal:
paquete de bash
Necesitamos agregar un bloque de despliegue a "config.rb":
ruby activar: desplegar hacer | desplegar | deploy.method =: git deploy.branch = 'gh-pages' deploy.build_before = true end
Para que las páginas de GitHub encuentren sus activos de CSS y JS también debemos activar lo siguiente en config.rb:
ruby configure: construir hacer activar: relative_assets end
Luego, cree un repositorio en GitHub, agregue el control remoto y despliegue:
"bash git remoto agregar origen https://github.com/yourusername/repositoryname.git
despliegue de intermediarios "
¡Auge! Su sitio está activo en "yourusername.github.io/projectname" y sus activos deben estar ordenados. Me encanta este proceso, no podría ser más fácil y más fácil de usar. Buen trabajo GitHub!
bash git add --all gco -m 'Agrega configuración para la implementación de GitHub Pages'
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 de recursos del navegador. Vaya a “source / stylesheets / all.css” y elimine su contenido. Solo mantén la primera línea:
css @charset "utf-8";
Git comandos:
bash git add --all git commit -m 'Elimina estilos de intermediarios innecesarios'
A continuación, queremos activar un par de opciones para optimizar el rendimiento en "config.rb":
ruby configure: construir hacer activar: asset_hash activar: minify_javascript activar: css activar: gzip end
Entonces, de nuevo, Git ordena:
bash git add --all git commit -m 'Activa las optimizaciones de rendimiento'
Déjame explicarte rápidamente lo que hicimos aquí:
Por el 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 espacios en blanco y etiquetas coincidentes, esto es muy efectivo y generalmente reduce el tamaño de la respuesta HTTP en un 70%. Al activar esto no solo gzips tu 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 archivos comprimidos con gzip o archivos regulares. gzipping es soportado en gran medida por los navegadores web y móviles.
Este proceso elimina toda la basura innecesaria de sus estilos y reduce significativamente el tamaño de sus archivos. En resumen, su CSS se convierte en un gran blob optimizado para ser leído por una máquina. Definitivamente no es amistoso en los ojos..
Esto es lo mismo que minify_css, Pero un poco más complicado y sofisticado..
Esto activa el hashing de sus activos. Significa que los nombres de sus archivos de activos cambian y reciben información adicional (durante el proceso de compilación) que informa a los navegadores si necesitan volver a descargar los activos o no. Ahora, el nombre de un archivo depende de los contenidos de ese archivo. Los recursos hash se almacenan en caché por los navegadores y sus sitios se procesan más rápido. Otra palabra para esto es "huella digital" porque proporciona una solución simple para informar a los navegadores si dos versiones de un archivo son idénticas o no. La fecha de despliegue no importa solo los contenidos. Mire a continuación cómo se ven los archivos de hash activo:
Capturas de pantalla
Esto parece desagradable, pero ahora sus imágenes, hojas de estilo y archivos de JavaScript obtienen un nombre único a través de este código "aleatorio" agregado: un hash (único). Cada vez que cambia un activo y vuelve a realizar el proceso de compilación, este hash cambia, lo que a su vez señala a los navegadores que, y solo entonces, necesitan volver a descargar ese archivo en particular. A continuación, el archivo caduca efectivamente, un proceso conocido como "almacenamiento en caché".
También vale la pena mencionar: puede referirse a sus archivos de la misma manera que antes, pero durante la compilación, las referencias en su HTML se actualizan para usar estos nombres de hash. Echar un vistazo:
"/Build/index.html(.gz)":
"html
Accentsconagua