Share
Det här är del en av en liten serie om Middleman, "en statisk webbplatsgenerator med alla genvägar och verktyg i modern webbutveckling". De första två handledningarna kommer att täcka grunderna, varefter vi lägger fram vad vi har lärt oss till handling med ett praktiskt projekt. Middleman kräver användningen av Ruby, men tveka inte att läsa om det här är främmande för dig. serien är helt nybörjevänlig.
Vad är det senaste med statiska sidor? Tja, de är snabba, ganska lätta att sätta upp och lätta på. Eftersom du inte serverar något databasrelaterat är statiska webbplatser ganska pålitliga och snabba. HTML, CSS och om det behövs JS-det är allt.
Många använder statiska webbplatser för att skapa sina bloggar och personliga sidor. Landningssidor som drabbas av trafik kraftigt är också en bra kandidat. HealthCare.gov från Obama administrationen använde famously Jekyll, en annan statisk webbplats generator, för deras webbplats. Om du behöver något snabbt och enkelt, som kan skala ut ur lådan, kan statiska platser vara fantastiska. Särskilt som du kan vara värd dem gratis på GitHub Pages eller Heroku.
Förmodligen började hela den statiska platsen hipness några år tillbaka när Jekyll kom med. Naturligtvis är statiska platser lika gamla som den första "Hello World!" Från Sir Tim Berners-Lee men under de senaste 15 åren blev databas-backade apps "allt som spelade roll". Ett par år tillbaka behövde en av grundarna av GitHub ett bättre sätt att skriva bloggar och han kom upp med Jekyll - den här hip static-generatorn för "Blogging like a hacker". Jag har använt det vid ett par tillfällen och har bara bra saker att rapportera. Kärnteamet är också fantastiskt. Hur som helst, för den här serien kom min redaktör och jag med om att det skulle vara mer intressant att täcka Middleman. Det kan vara rättvist att säga att Middleman är lite mindre "bloggmedveten" ur lådan, men likväl lika kraftfull och bra kvalitet.
Middleman använder Ruby, som erbjuder en ganska omfattande uppsättning funktioner för att bygga coola saker. Om du någonsin har använt Rails eller Sinatra känner du dig riktigt hemma. Det verkar Middleman och Jekyll är go-to-alternativen för statiska platser i Ruby-samhället. Jag har också hört fler och fler designers hävdar att de tycker om att använda dem för prototyper och för att skapa egna sidor. Vad många av dessa statiska ramverk har gemensamt är att de är ganska enkla att använda.
I den här artikeln antar jag att du är minst en bit intresserad av Ruby, och har den installerad på ditt system. Om du behöver hjälp, ta en titt på Ruby for Newbies: Installera Ruby och Komma igång av Andrew Burgess.
Att veta hur man hanterar RubyGems är också nödvändigt, och igen, Andrew Burgess 'Ruby for Newbies: Att arbeta med Gems hjälper dig att komma igång om det behövs. Jag gör mitt bästa för att inte gå över huvudet med programmeringskoncept, men jag kommer inte att täcka programmeringsgrunder som loopar, kodblock och så vidare. För nybörjare bland dig, oroa dig inte, Middleman har inte så många rörliga delar, och jag ska visa hur lätt det är att lära.
Så har du Ruby och RubyGems under ditt bälte? Bra, då är vi bra att gå.
Öppna din terminal och skriv in:
bash gem install intermedleman
Om du nekas tillstånd att göra det måste du förbeställa kommandot med sudo och ange ditt systemadministratörslösenord. Efter att processen har slutförts kan du använda ett par praktiska mellankommandon via kommandotolken.
Detta kommando initierar ett nytt projekt. Du måste ange namnet på din app och tryck sedan på Enter.
bash middleman init your_fancy_app Det tar också ytterligare argument som vilken mall du vill börja med. Det gör det väldigt praktiskt att anpassa dina appar med mallar redan från början, och skära ner på upprepade installationsuppgifter ganska lite! Vi diskuterar mer om mallar i en senare handledning.
bash middleman init your_fancy_blog --template = blog
bash middleman init your_fancy_mobile_app --template = mobile
Middleman kommer med en lokal server för din utveckling. Genom att starta kan du se din webbplats på http: // localhost: 4567 / **. Om du bara skriver in ** mellanhand utan ytterligare argument, kommer detta också att skjuta upp din server. Stäng ner din server med CTRL-c.
När du har någonting är du redo att sätta på en server med internet som du behöver bygga din sida. Det betyder att vad du än har förberett i din /källa mappen kommer att behandlas och den slutliga utmatningen kommer att matas ut till /bygga mapp vilken mellanhand skapar också för dig. Alla dina filer som använder preprocessorer som Slim, Haml, Sass, CoffeeScript kommer att behandlas till sina respektive motsvarigheter och läggas i din / bygga katalog.
När din webbplats är redo att möta internet, använder detta kommando din /bygga mapp på din webbserver. Varje uppdatering du gör kommer att gå igenom den här processen.
Gör dig själv en tjänst direkt och aktivera LiveReload för att automatiskt uppdatera dina sidor efter ändringar i dina HTML-, Sass- eller JS-filer. Detta är mycket bekvämt under utveckling - du kommer inte ångra det! Middleman erbjuder dessa dagar LiveReload ut ur rutan - du behöver bara lägga till
rubin pärla "mellanhänder-leverelad"
till din Gemfile och uncomment följande linje in config.rb:
rubin # Ladda om webbläsaren automatiskt när filerna ändras aktiveras: leverans
Då bunter du Middleman
bashbunt # eller bunt exec mellleman
Så låt oss komma igång med /källa och /bygga mappar. Mellan dem är delningen som skiljer dina utvecklings- och produktionssektioner. När du använder din lokala webbserver för utveckling, används källan till att tjäna din app. Mappen / build används av dina icke-lokala servrar för att betjäna dina statiska sidor. / byggnad skapas varje gång du använder mellanhuss byggnad i din kommandorad. Därför bör du vara försiktig så att du inte oavsiktligt spenderar din kodningstid i / bygga eftersom det här arbetet kommer att försvinna efter byggprocessen. I allmänhet ska hela din utveckling ske i / källa.
Byggprocessen skapar de statiska sidorna som du vill att din server ska vara värd för. Varje fil i din /källa mappen kommer att behandlas och sedan lagras i /bygga. Som tidigare nämnts kommer din Sass, CoffeeScript, Slim / Haml och partials att bearbetas i deras deplyerbara motsvarigheter. Alla layouterna kommer också att pieced tillsammans. Om du har aktiverat komprimering för dessa filer, är det här det ögonblick som de blir "uglified" också. Under hela shabang blir / build-mappen rejuvinated genom att bli av med filer som inte har någon referens i / källa längre. Under mellanhuss byggnad, Alla ändringar som du har gjort till filer i / källa kommer att utlösa en regenerering av nya motsvarande statiska filer för / bygga.
Utvecklingsprocessen är det sista steget. Med /bygga katalog på plats har du allt du behöver för att lägga din app där ute. Min rekommendation är att göra detta tidigt för att undvika att gå in i några överraskningar.
Låt oss kolla in grundstrukturen för en Middleman-app. Huvudkomponenterna är:
Som du kan se nedan går mest jazz in i /källa mapp. Vad jag gillar om Middleman apps är deras enkla organisation. Navigering i dokumentstrukturen är rakt framåt, även för nybörjare.
Om du är missnöjd med namnet på några av dessa mappar kan du ändra det i dina konfigurationer (config.rb). Samma namn kommer att användas för din färdiga /bygga mapp.
rubinuppsättning: css_dir, 'custom_folder_name'
set: js_dir, 'custom_folder_name'
set: images_dir, 'custom_folder_name'
När du har kört servern kan du kolla andra alternativ för att konfigurera Middleman direkt i din webbläsare: http: // localhost: 4567 / __ middleman / config /. Inte alla av dem kan vara meningsfulla, eller är även viktiga att veta i detta skede. Ge det en blick och en mental bokmärke är helt tillräcklig för nu.
En du kör mellanhuss byggnad du kan kika in i /bygga mapp. Alla vanliga HTML-, CSS- och JS-filer du behöver för att betjäna din statiska webbplats.
Det är ganska mycket allt du behöver veta för att komma igång och att orientera dig själv.
Förslag: Vid denna pont skulle det ge mycket mening om du börjar sätta ihop en testapp själv. Titta runt och få en känsla hur sakerna är organiserade och hur bitarna passar ihop.
Begreppet Främre materia kommer från bokförlag, och det refererar till informationen på framsidan av en bok. När det gäller statiska webbplatsfiler hänvisar den till informationsblock som lagras i YAML. Varje sida kan du ha variabler som kan lagras högst upp i en ledande och en efterföljande trippel. Till exempel, här är toppen av en fiktiv fil som heter: some.html.erb.
layout: Bond titel: Favorit bond girl name datum: 2015-11-09 Taggar: bond, 007
some_secret: Jag kommer inte bli gjord förrän du använder mig.
bond_girls: - Strawberry Fields - Jill Masterson - Tiffany Väska
"
YAML-variablerna ser ut som en hash. Du kan komma åt den lokala data via nuvarande sida objekt:
rubin current_page.data.some_variable
Du använder ofta detta för att lagra taggar, datum, titlar och konfigurationsalternativ - som vilken layout du vill använda för vissa sidor. Främre är en YAML-butik för dina variabler. Du kan också använda JSON om du föredrar det. Tänk på det som en plats för att sätta data som normalt bor i en databas. Jag kommer att diskutera de olika alternativen och användningarna längs vägen när de kommer upp.
Detta är ett bra tillfälle att kort gå över ERB. ERB låter dig skapa dynamiska mallar som har inbäddad kod i dem. Dina filnamn måste ha en .erb förlängning och du måste sätta din kod i följande två "behållare".
För kod som får exektuted men inte "skrivs ut" på sidan använder du det här:
html <% %>
Tänk på det som "beräkning endast".
Annars, för returvärden som du vill se visas "tryckt" på sidan, måste du också lägga till ett lika tecken. Det är allt.
html <%= %>
Begreppen layout och partial är nära besläktade. Låt mig ge dig en liten virvelvindsturné om du inte har spelat med Rails, Sinatra eller liknande tidigare. Jag tror att jag bör börja med layouter först.
Layouts ger dig strukturen för att dela gemensamt markup bland olika sidor - som tillhör samma "familj" av sidor. Det är ett verktyg för att undvika dubbelarbete och för att påskynda ditt arbete. I stället för att skriva samma HTML-skelett överallt där du komponerar layouter för speciella användningsfall. Populära exempel är två olika layouter för både en administratör och en "normal" användare. De brukar ha en mycket annorlunda upplevelse på "samma" sida.
När du initierar en enkel mellanhandsprogram får du automatiskt en layout.erb filen in source / layouter. Observera att den här filen slutar i .erb och inte .html.erb. Layouts ska inte göras till HTML och Middleman kommer att kasta ett fel om du skapar layouter med en .html-tillägg. Om du använder ett annat templerande språk som Slim eller Haml kan layouter ha sina tillägg istället. Som standard föreslår bör du lägga alla dina layouter i / layouter mapp i källa.
Här är ett exempel på källa / layouter / layout.erb:
"html
"
Denna standardlayout är ganska barebones, men ger allt du behöver för att komma igång. Låt oss ta en titt:
Och därifrån kan du anpassa denna layout till alla dina behov. En potentiellt förvirrande aspekt för Ruby newbies är avkastning sökord - det betyder bara att det passerar resten av innehållet du skapar. Med andra ord, avkastning är en platshållare för dina åsikter som kommer att bli gjorda i den. Om det här konceptet är helt främmande för dig, kom ihåg bara att inte röra det för tillfället eller din app kanske inte fungerar som förväntat. När du skapar dina egna layouter har du avkastning där är viktigt, annars kommer ditt innehåll inte att visas. Du kommer hänga på det på nolltid, jag lovar.
Om du skapade olika layouter kan du ange via den främre delen vilken layout du vill använda på en sida vid sida. Låt oss säga att du har en speciell layout för att välkomna användare som är lite mer försäljningsfulla. Här har vi welcome.html.erb.
layout: försäljning -
"
Alternativt kan du ange layouter i din config.rb-fil.
ruby sida "/welcome.html",: layout => "sales"
Om du vill undvika att göra detta för varje sida manuellt kan du samla dem på ett ställe. Återigen, i config.rb, använder du ett jokertecken (** \ ***) för att samla en massa sidor som använder samma layout.
ruby sida "/ sales / *",: layout => "sales"
Jag personligen gillar att lägga denna layoutinformation i frågan. Det är mycket explicit och inte för repetetivt. Om jag hade en hel massa av dem, skulle jag hellre använda wildcard-tillvägagångssättet.
Partier ger dig möjlighet att inkapsla visningskod som du kan återanvända vart du än behöver. Du behöver bara berätta för dig se var att sätta in en partiell och det blir gjord rätt där inne. Delar är en mycket vanlig teknik för DRYing upp din kod.
Mycket vanliga exempel är navbars, sidfot och huvudavsnitt, som du inte vill duplicera överallt. Filer för partials börjar med ett understreck. Till att börja med kan du placera dem under /källa. Din layout är ett bra ställe att börja med att samla in kod för att extrahera till partiklar. När du hittar något du behöver återanvända, kommer partials vara en praktisk vän.
Här är ett exempel på /source/layouts/layout.erb.
"html
<%= partial "head" %> <%= partial "navbar" %> <%= yield %> <%= partial "footer" %>"
Och den dela källan / _head.html.erb:
"html
<%= stylesheet_link_tag “normalize”, “all” %> <%= javascript_include_tag “all” %>"
Ibland vill du extrahera en del inte bara för att undvika dubbelarbete, men för att göra dina synpunkter mer läsbara. Över tiden är huvudavsnitt berömda för att bli ganska laddade, till exempel. Inom dem kan du ha andra partials som endast handlar om stil eller JS-filer.
Du förstår hur praktiska partier är när du kan tillämpa ändringar som krusningar genom hela appen, var du inkluderade den partiella. Det finns ingen anledning att gå igenom en massa filer för att tillämpa samma förändring om och om igen.
Hjälpare är metoder som du kan använda för många dagliga uppgifter i dina åsikter. Jag tror att detta var banbrytande i Rails land och blev snabbt allestädes närvarande för webb-modern webbutveckling. Du har redan sett hjälpare som innehåller stylesheets och JavaScript-filer. Det finns mycket mer där detta kommer ifrån.
Här är vår /source/_head.html.erb partiell igen:
"html
<%= stylesheet_link_tag "normalize", "all" %> <%= javascript_include_tag "all" %>"
Dessa hjälpmedel är avsedda att hjälpa dig skriva renare och mer koncis visningskod. I hjälplistan nedan hittar du många användbara saker som kommer ut ur lådan. Du är dock inte begränsad av dessa men. Skriv egna hjälpar metoder i config.rb eller samla dem separat i en modul.
Det fungerar så här: I din config.rb skapar du en hjälpare blockera och sätt in alla dina hjälpar metoder inuti. Det är allt. Nu har dina åsikter tillgång till dem.
Exempel: /source/_navbar.erb.
"html
"
Och i config.rb:
"Ruby hjälpare gör
def random_username "# lorem.first_name # lorem.last_name" slut
def random_image image_tag "# lorem.image ('30x40',: background_color => '333',: färg => 'fff')" slutet
slutet"
Dessa hjälpare kan komma till nytta när jag snabbt vill prototypa någonting och vill undvika att skapa dummybilder och text själv. Sammantaget bör du se upp för kod som du vill vara mer koncis eller att du duplicerar om och om igen. Hjälpare är ofta ett bra hem för det.
Inuti dessa anpassade hjälpare använde jag andra medhjälpare för att skapa img taggar genom image_tag så väl som lorem objekt för några slumpmässiga användarnamn och bildhållare. Dessa lorem thingies kan vara lite anpassade för att passa dina behov.
Med modulmodellen behöver du dock en separat fil för din modul. Skapa en "lib" -katalog i din rotmapp (samma nivå som "source" och "build") och skapa en fil för dina hjälpare.
Här har vi /lib/helpers.rb:
rubinmodul PrototypingHjälpar def random_image image_tag "# lorem.image ('300x400',: background_color => '333',: color => 'fff')" slutet
def random_username "# lorem.first_name # lorem.last_name" slutänden "
Då måste du låta din config.rb-fil veta att du vill använda dessa hjälpare:
rubin kräver "lib / helpers 'helpers PrototypingHelpers
bom! Du är redo att rulla. I allmänhet skulle jag gå direkt med modulmodulen. Det känns mycket renare för mig, plus du undviker att förorena din config-fil med alltför mycket grejer.
Jag skulle också vilja titta på utgående hjälpare och content_for i synnerhet eftersom de kan vara lite förvirrande för nybörjare. Detta låter dig fånga en massa innehåll som du kan ge / återanvända någon annanstans. Det är en minature partiell av sorter. Jag skulle personligen gå med en del större delen av tiden, men nu och då när du vill tillämpa on-off förändringar mer kirurgiskt är det här praktiskt att veta:
Här är index.html.erb:
"html <% content_for :navigation do %>
<% end %>
... "
Och 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 %>
... "
Sedan i layout.erb:
"html
<% if content_for?(:admin_javascript) %> <%= yield_content :admin_javascript %> <% else %> <%= javascript_include_tag "all" %> <% end %> <%= yield %> <%= partial "footer" %>"
Nyckeln använder yield_content som sätter ditt samlade innehåll från den enskilda sidan i layouten - om den hittas. Det finns ingen anledning att bara använda dem bara med layouter heller. När du behöver göra det lite mer involverat, använd content_for? att söka efter specifika innehållsblock innan du sätter in dem. Det är praktiskt när du vill göra små anpassningar för sektioner som bara skiljer sig något. Det är fantastiskt att du kan spara innehållet lite som en konfiguration på relevanta sidor själva och "aktivera" den bara vid behov. Du borde förmodligen inte bli för smart med dessa saker.
Ett ord om anknyta till hjälpen jag använde ovan. Det här är sannolikt det du kommer oftast på. Du matar väsentligen metoden ett namn och en URL eller sökväg där den här länken ska peka på. Jag ersatte den sista delen med en platshållare för korthet.
Nedan följer en översikt över vilka hjälpmedel som finns till din förfogande. Jag tror att namnen är mest självförklarande och jag borde inte gå över vad vart och ett av dem kan hjälpa dig med. Gör ett mentalt bokmärke av vad som finns där ute och kolla tillbaka med dokumentationen om de ger dig några problem.
Accentsconagua
märkaanknyta tillinput_tagfavicon_tagstylesheet_link_tagjavascript_include_tagcontent_forcontent_for?capture_htmlyield_contentconcat_contentform_taglabel_tagselect_tagsubmit_tagfield_set_tagtext_field_tagcheck_box_tagpassword_field_tagstympapluralizeword_wrapescape_htmlsimple_formatjs_escape_htmltime_ago_in_wordsdistance_of_time_in_wordslorem.datelorem.wordlorem.namelorem.emaillorem.imagelorem.wordslorem.sentencelorem.last_namelorem.paragraphlorem.first_namelorem.paragraphsJag tror att det här är en bra grund att börja leka med en leksakapp. Du borde ha en bra känsla av vad Middleman erbjuder och hur man navigerar i ramverket. I nästa del av denna serie tar vi saker vidare och dyker lite djupare in i ramen. Middleman-laget har verkligen gjort ett bra jobb med att utforma API och med att hålla saker enkelt.
Förhoppningsvis kan du se nu varför denna ram har blivit populär och varför det är ett bra val för alla slags statiska projekt.
