Share
În partea a treia a acestei serii, vom mânca mâinile și vom începe să construim un site pentru un site fictiv podcast: "Matcha Nerdz". Vom folosi Middleman, Bourbon, Neat și Bitters. Sa mergem!
Să începem cu un mic heads-up de unde mergem. În următoarele câteva articole voi construi un mic site static pentru un podcast fictiv numit "Matcha Nerdz" - un podcast pentru persoanele care doresc să se scufunde în toate ceaiul verde pulverizat. Va avea următoarele pagini:
Vom folosi Middleman pentru a genera site-ul static și suita Bourbon pentru tot stilul. Sper că ați aruncat o privire la tutorialele mele anterioare despre Bourbon, Neat și Middleman înainte de a ajunge la acest punct. Dacă nu, vă recomand să mergeți și să le citiți, cu excepția cazului în care vă simțiți destul de încrezători în elementele de bază deja.
Pentru toate lucrurile legate de stil, m-am îndreptat foarte mult pe Bourbon de ceva timp. De asemenea, eu chiar săpat sintaxa Sass indentată - eu o prefer cu mult .SCSS sintaxă. .Sass sintaxa este singurul bit (probabil) necunoscut pe care aș vrea să-l arunc la începători, pentru că simt că merită să fiu cunoscut.
Să inițiem o nouă aplicație pentru site-ul nostru podcast, prin intrarea în terminal:
bash intermediar init matcha_nerdz și apoi schimbarea în directorul nostru de proiecte:
bash cd matcha_nerdz
Acum îl vom face pe Git:
"bash git init
# => pentru a iniția un nou Git repo
git add -all # => adaugă toate fișierele pentru stadializare
git commit -m 'Initial commit' # => comite modificări "
Apoi adăugăm șablonul blogului la mix. Aceasta este o bază bună pentru site-ul nostru podcast. Mai târziu, vom regla articolele pentru a afișa piese audio podcast de la SoundCloud. Pentru moment, totuși, este doar un blog.
În Gemfile adăugați:
rubin bijuterie "broker-blog"
Apoi, prin terminal:
bash bundle # sau bundle exec middleman
bash intermediar init --template = blog
Aceasta va actualiza dosarul "matcha_nerdz". ".Config.rb" și șablonul dvs. de index obține o mică actualizare, de asemenea. În plus, veți obține șabloane noi pentru feedul dvs., pagina de etichete, pagina calendarului, un articol exemplu și un aspect nou. Verificați ieșirea de la terminal:
bash identic .gitignore actualizare config.rb există sursă creare sursă / 2012-01-01 -exemplu-article.html.markdown crea sursă / calendar.html.erb crea sursă / feed.xml.builder update source / index.html.erb crea sursa / layout.erb crea sursa / tag.html.erb exista sursa / stiluri exista sursa / javascripts exista sursa / imagini
git:
bash git add - tot git commit -m 'Adaugă șablonul de blog'
Acum puteți crea articole noi prin linia de comandă:
bash articol intermediar "Noul meu articol al doilea fantezie" # => creare sursă / 2015-11-22-my-minus-second-article.html.markdown
Acest lucru creează un nou articol de marcare sub "/ sursă". Acest lucru nu este optim pentru depozitare, dar vom ajunge acolo. Porniți-vă serverul pentru a vedea primul exemplu de blog articol:
bash intermediar # sau server intermediar
În continuare avem nevoie de ceva gospodărie. Șablonul de bloguri a creat un nou aspect în "sursa / layout.erb". Trebuie să ștergeți versiunea originală din "sursa / layouts / layout.erb" și să mutați-o pe cea nouă. Deci, prin terminal:
bash rm sursa / layouts / layout.erb mv sursa / layout.erb sursa / layouts /
De asemenea, trebuie să actualizăm noul "layout.erb" cu chestii care au fost șterse în fișierul de aspect. Adăugați următoarele la dvs. tag în "sursa / layouts / layout.erb":
„html
<%= stylesheet_link_tag “normalize”, “all” %> <%= javascript_include_tag “all” %>"
Cel mai important, acest lucru vă asigură că activele JS și stilul dvs. sunt disponibile.
git
bash git rm sursă / layout.erb git add - tot git commit -m 'Mută noul layout în / layouts Adăugă link-uri de active Îndepărtează layout-ul vechi'
Pentru a ne face viața mult mai convenabilă, vom adăuga LiveReload la mix. Trebuie să luăm bijuteria și apoi să o activăm în fișierul "config.rb".
În Gemfile noastre:
ruby gem "intermediar-livereload"
În terminal:
bash bundle
Apoi, în config.rb:
ruby #uncomment activa: livereload
Și, în sfârșit, comenzile noastre Git:
bash git adăuga -all git comite -m 'Activează LiveReload'
Cu această opțiune activată, reporniți serverul și pagina dvs. se va actualiza automat ori de câte ori modificați conținutul paginii, stilurilor sau comportamentului. Salvatorul vieții, crede-mă!
Atenţie! Un cuvânt de precauție: Dacă aveți un alt server local care rulează, LiveReload nu poate juca mingea. Va trebui să-l omori pe celălalt server de acum.
Când vă uitați în cazul în care articolele sunt stocate chiar acum, veți realiza rapid că această organizație se află direct în "/ source" devine plictisitoare foarte repede. Publicați câteva articole și veți fi înecate în postări. Nu este nevoie să fie acel dezordonat - în loc să creăm o diratură sub "/ source" pentru toate postările noastre. Mutați-vă articolul (e) acolo și lăsați-l pe Middleman să știe unde să-i găsească.
bash mkdir sursă / posturi mv source / 2012-01-01-example-article.html.markdown source / posts / Apoi adăugăm "/ posts" ca sursă pentru articolele din blog. În config.rb:
ruby blog.sources = "mesaje /: an-: title.html"
Apoi comenzile noastre Git:
"bash git rm source / 2012-01-01-example-article.html.markdown # Îndepărtează fișierul mutat din repo
git add -all gco -m "Adaugă un dosar nou pentru postări și adaugă sursă în config.rb"
Si asta e. Nimic nu ar fi trebuit să se schimbe și ar trebui să vedeți exemplul de articol ca înainte. Stocarea posturilor, cu toate acestea, este mult mai sănătoasă. Ce este de asemenea cool este că, dacă creați articole noi prin linia de comandă, postările dvs. noi vor fi stocate în "/ post" automat:
bash articol intermediar "Articolul meu minunat 3" # => crea sursa / posturi / 2015-my-awesome-3rd-article.html.markdown
Pentru mine, împingerea site-urilor statice către paginile GitHub este o soluție atât de convenabilă încât nu vreau să vă pun în aplicare prin intermediul serviciilor Heroku sau Amazon S3. Să o păstrăm simplu!
În Gemfile:
rubin bijuterie "mijlocul-deploy"
Apoi, în terminal:
bash bundle
Trebuie să adăugăm un bloc de implementare la "config.rb":
ruby activa: implementare | implementare | deploy.method =: git deploy.branch = 'gh-pagini' deploy.build_before = sfârșitul adevărat
Pentru ca paginile GitHub să găsească activele dvs. CSS și JS, va trebui să activați și următoarele în config.rb:
ruby configure: construiți nu activați: end relative_sets
Apoi, creați un repo pe GitHub, adăugați telecomanda și implementați:
"bash git adăugați la distanță originea https://github.com/yourusername/repositoryname.git
agentul intermediar desfășoară "
Boom! Site-ul dvs. este live sub "yourusername.github.io/projectname" și activele dvs. ar trebui sortate. Îmi place acest proces - nu ar putea fi mai ușor și mai ușor de utilizat. GitHub!
bash git add - toate gco -m 'Adaugă setări pentru implementarea paginilor GitHub'
În ultimul pas înainte de a intra în configurația Bourbon, aș vrea să scap de stilurile care vin împreună cu Middleman și să optimizez activele pentru o performanță mai bună în minificarea și concatenarea activelor browser-ului. Mergeți la "source / stylesheets / all.css" și ștergeți conținutul. Mențineți doar prima linie:
css @ harset "utf-8";
Comenzi Git:
bash git add - tot git commit -m 'Îndepărtează stilurile inconștientului Middleman'
În continuare vrem să activam câteva opțiuni pentru a optimiza performanța în "config.rb":
ruby configure: construi nu activa: activ_hash activa: minify_javascript activa: css activa: gzip end
Apoi, din nou, comenzile Git:
bash git add - tot git commit -m "Activează optimizarea performanțelor"
Permiteți-mi să explic rapid ceea ce am făcut aici:
În prezent, gzip este metoda cea mai populară și eficientă de compresie. Algoritmul său de comprimare găsește niște șiruri similare într-un fișier și le comprimă. Pentru HTML, care este plin de spațiu alb și etichete de potrivire, acest lucru este foarte eficient și de obicei reduce dimensiunea răspunsului HTTP cu un procent de 70%. Activând acest lucru, nu numai gzip HTML, dar și fișiere CSS și JS. În timpul construirii, Middleman creează fișierele ca de obicei, dar le copiază și cu o versiune ".gz". Când un browser intră în contact cu fișierele dvs., acesta poate alege dacă preferă să servească fișiere comprimate gzip sau cele obișnuite. gzipping este susținut puternic de browserele web și mobile.
Acest proces elimină orice junk inutil din stilurile dvs. și reduce semnificativ dimensiunea fișierului. Pe scurt, CSS devine unul mare pentru optimizarea citirii de către o mașină. Cu siguranta nu este prietenos pe ochi.
Acest lucru este la fel ca minify_css, dar un pic mai implicat și mai sofisticat.
Aceasta activează hash-ul activelor tale. Aceasta înseamnă că numele fișierelor de active se modifică și primesc câteva informații suplimentare (în timpul procesului de construire) care informează browserele dacă au nevoie să reîncarce active sau nu. Acum, numele unui fișier depinde de conținutul acelui fișier. Activele scoase din cache sunt accesate în cache de browsere și site-urile dvs. devin redate mai repede. Un alt cuvânt pentru aceasta este "amprentarea" deoarece oferă o soluție simplă pentru a informa browserele dacă două versiuni ale unui fișier sunt identice sau nu. Data de desfășurare nu contează, ci doar conținutul. Aruncați o privire mai jos în ce mod arată fișierele de materiale:
Imagini
Acest lucru pare a fi urât, dar acum imaginile, foile de stil și fișierele JavaScript obțin un nume unic prin acest cod "aleatoriu" adăugat: hash (unic). De fiecare dată când schimbați un material și treceți prin procesul de construire din nou, acest hash se schimbă, ceea ce semnalează la rândul său browserelor și numai atunci trebuie să re-descarce acel fișier. Fișierul este apoi expirat efectiv, un proces cunoscut sub numele de "busting cache".
De asemenea, merită menționat: puteți să vă referiți la fișierele dvs. la fel ca înainte, dar în timpul construirii referințelor din codul HTML obțineți-vă actualizări pentru a utiliza aceste nume cu șir. Aruncati o privire:
„/Build/index.html(.gz)“:
„html
Accentsconagua