Share
I del tre av denna serie kommer vi att få våra händer smutsiga och börja bygga en webbplats för en fiktiv podcasts webbplats: "Matcha Nerdz". Vi använder Middleman, Bourbon, Snygg och Bitter. Nu går vi!
Låt oss börja med en liten heads-up av var det här går. Under de kommande par artiklarna ska jag bygga en liten statisk plats för en fiktiv podcast som heter "Matcha Nerdz" - en podcast för människor som vill dyka in i allt pulveriserat grönt te. Den kommer att ha följande sidor:
Vi kommer att använda Middleman för att generera den statiska platsen och Bourbon-sviten för all styling. Jag hoppas att du har tittat på mina tidigare tutorials om Bourbon, Neat och Middleman innan du kom fram till denna punkt. Om inte, rekommenderar jag att du går och läser dem, såvida du inte känner dig tillräckligt säker i grunden redan.
För alla saker som rör styling har jag länge varit starkt beroende av Bourbon. Jag gräver egentligen den indragna Sass-syntaxen - jag föredrar det långt till .SCSS syntax. De .sass syntax är den enda (förmodligen) obekanta biten jag skulle vilja kasta på nybörjare, för jag tycker att det är verkligen värt att lära känna.
Låt oss initiera en ny app för vår podcasts webbplats genom att ange i terminalen:
bash middleman init matcha_nerdz och sedan byta till vår projektkatalog:
bash cd matcha_nerdz
Nu får vi Git att gå:
"bash git init
# => för att initiera nya Git repo
git add -all # => lägger till alla filer för uppspelning
git commit -m 'Initital commit' # => förbinder ändringar "
Nästa lägger vi till bloggmallen i mixen. Detta är en bra grund för vår podcasts webbplats. Senare justerar vi artiklarna för att visa podcasts ljudspår från SoundCloud. För nu är det bara en blogg.
Lägg till i Gemfile:
rubin pärla "mellanhuss blogg"
Då via terminalen:
bashbunt # eller bunt exec mellleman
bash middleman init - template = blog
Detta uppdaterar din "matcha_nerdz" -mapp. ".Config.rb" och din indexmall får en liten uppdatering också. Dessutom får du nya mallar för ditt flöde, etikettsida, kalendersida, en exempelartikel och en ny layout. Kontrollera utgången från terminalen:
bash identiska .gitignore uppdatering config.rb existera källa skapa källa / 2012-01-01-exempel-artikel.html.markdown skapa käll / kalender.html.erb skapa source / feed.xml.builder uppdatering source / index.html.erb skapa källa / layout.erb skapa källa / tag.html.erb finns källa / stylesheets existerar källa / javascripts existerar källa / bilder
Git:
bash git add --all git commit -m 'Lägger till bloggmall'
Nu kan du skapa nya artiklar via kommandoraden:
bash intermediary artikel "My new fancy second article" # => skapa källa / 2015-11-22-min-underbara-andra-artikel.html.markdown
Detta skapar en ny markeringsartikel under "/ source". Det här är inte optimalt lagringsvis men vi kommer dit. Avfyra din server för att se din första artikelbloggartikel:
bash mellanhänder # eller mellanhusserver
Nästa behöver vi ha lite hushållning att göra. Bloggmallen skapade en ny layout under "source / layout.erb". Vi måste ta bort den ursprungliga i "source / layouts / layout.erb" och flytta den nya till där. Så, via terminalen:
bash rm källa / layouter / layout.erb mv källa / layout.erb källa / layouter /
Vi behöver också uppdatera den nya "layout.erb" med saker som raderades i layoutfilen. Lägg till följande i din tagga i "källa / layouter / layout.erb":
"html
<%= stylesheet_link_tag “normalize”, “all” %> <%= javascript_include_tag “all” %>"
Viktigast av allt, detta säkerställer att dina JS- och stiltillgångar är tillgängliga.
Git
bash git rm source / layout.erb git add --all git commit -m 'Flyttar ny layout till / layouter Lägger till tillgångslänkar Tar bort gamla layout'
För att göra våra liv lite mer praktiska lägger vi till LiveReload i mixen. Vi måste ta tag i pärlan och aktivera den i vår "config.rb" -fil.
I vår Gemfile:
rubin pärla "mellanhänder-leverelad"
I terminalen:
bash bunt
Sedan i config.rb:
rubin #uncomment aktivera: leverbelastning
Och äntligen våra Git-kommandon:
bash git add --all git commit -m 'Aktiverar LiveReload'
Med det här aktiverade startar du om servern och din sida uppdateras automatiskt när du ändrar innehåll på sidan, stilar eller beteende. Livsuppehållare, lita på mig!
Uppmärksamhet! Ett försiktighetssvar: Om du har en annan lokal server som körs, kan LiveReload inte spela boll. Du måste döda den andra servern för nu.
När du ser var artiklar lagras just nu kommer du snabbt inse att den här organisationen direkt under "/ source" blir tråkig mycket snabbt. Publicera ett par artiklar och du kommer att drunkna i inlägg. Det finns inget behov av att vara så rörigt - istället låt oss skapa en dirctory under "/ source" för alla våra inlägg. Flytta din artikel (er) där inne och låt Middleman veta var de ska hitta dem.
bash mkdir källa / inlägg mv källa / 2012-01-01-exempel-artikel.html.markdown källa / inlägg / Sedan lägger vi till "/ inlägg" som en källa för bloggartiklarna. I config.rb:
ruby blog.sources = "inlägg /: år-: title.html"
Då våra Git kommandon:
"bash git rm source / 2012-01-01-example-article.html.markdown # Ta bort flyttad fil från repo
git add -all gco -m 'Lägger till ny mapp för inlägg och lägger till källa i config.rb "
Och det är allt. Ingenting borde ha förändrats och du borde se exemplet artikeln som tidigare. Lagring av inlägg är dock mycket mer sane. Vad som också är coolt är att om du skapar nya artiklar via kommandoraden kommer dina nya inlägg att lagras i "/ post" automatiskt:
bash middlemanartikel 'My awesome 3rd article' # => skapa källa / inlägg / 2015-my-awesome-3rd-article.html.markdown
För mig är det en lämplig lösning som jag trycker på statiska webbplatser på GitHub Pages, som jag inte vill ge dig genom att distribuera via Heroku eller Amazons S3-tjänst. Låt oss hålla det enkelt!
I Gemfile:
rubin pärla "mellanspelare"
Då i terminalen:
bash bunt
Vi måste lägga till ett deployeringsblock till "config.rb":
rubin aktivera: deploy do | deploy | deploy.method =: git deploy.branch = 'gh-sidor' deploy.build_before = true end
För att GitHub Pages ska kunna hitta dina CSS- och JS-tillgångar måste vi aktivera följande i config.rb:
ruby configure: build aktivera: relative_assets slut
Skapa sedan en repo på GitHub, lägg till fjärrkontrollen och distribuera:
"bash git remote add origin https://github.com/yourusername/repositoryname.git
mellanhandsanläggare "
bom! Din webbplats är under "yourusername.github.io/projectname" och dina tillgångar ska sorteras ut. Jag älskar den här processen - det kunde inte vara enklare och mer användarvänligt. Bra jobb GitHub!
bash git add --all gco -m 'Lägger till setup för GitHub Pages-implementering'
I det sista steget innan vi går in i Bourbon-uppläggningen, skulle jag vilja bli av med de stilar som följer med Middleman, och optimera våra tillgångar för bättre prestanda i webbläsares tillgångsminskning och sammanlänkning. Gå till "source / stylesheets / all.css" och ta bort innehållet. Håll bara första raden:
css @ charset "utf-8";
Git-kommandon:
bash git add -all git commit -m 'Ta bort unneccessary Middleman styles'
Nästa vill vi aktivera ett par alternativ för att optimera för prestanda i "config.rb":
ruby configure: build aktivera: asset_hash aktivera: minify_javascript aktivera: css aktivera: gzip end
Sedan, igen, Git kommandon:
bash git add --all git commit -m 'Aktiverar prestanda optimeringar'
Låt mig snabbt förklara vad vi gjorde här:
För närvarande är gzip den mest populära och effektiva komprimeringsmetoden. Dess komprimeringsalgoritm hittar liknande strängar i en fil och komprimerar dem. För HTML, som är fullt av vitt utrymme och matchande taggar, är detta mycket effektivt och minskar HTTP-responsstorleken med en hel del 70%. Aktivera detta inte bara gzips din HTML, men också CSS och JS-filer. Under en byggnad skapar Middleman dina filer som vanligt, men duplicerar dem också med en ".gz" -version. När en webbläsare kommer i kontakt med dina filer kan den välja om det föredrar att använda gzip-komprimerade filer eller vanliga. gzipping stöds kraftigt av web- och mobila webbläsare.
Denna process eliminerar all onödig skräppost från dina stilar och minskar deras filstorlek väsentligt. Kort sagt, din CSS blir en stor blob-optimerad för att läsas av en maskin. Definitivt inte vänlig på ögonen.
Detta är detsamma som minify_css, men lite mer involverad och sofistikerad.
Detta aktiverar hashing av dina tillgångar. Det betyder att dina filnamn för tillgångar ändras och får lite extra information (under byggprocessen) som informerar webbläsare om de behöver ladda ner tillgångar eller inte. Nu är namnet på en fil beroende av innehållet i den filen. Hashed-tillgångar blir cachade av webbläsare och dina webbplatser blir snabbare. Ett annat ord för detta är "fingeravtryck" eftersom det ger en enkel lösning för att informera webbläsare om två versioner av en fil är identiska eller ej. Utvecklingsdatumet spelar ingen roll - bara innehållet. Ta en titt nedan för hur hashed assets 'filer ser ut:
Skärm
Det här ser otäckt ut, men nu får dina bilder, stylesheets och JavaScript-filer ett unikt namn genom den här "slumpmässiga" koden: en (unik) hash. Varje gång du ändrar en tillgång och går igenom byggprocessen igen, ändras denna hash, vilket i sin tur signalerar till webbläsare som då och då bara måste de hämta den aktuella filen igen. Filen upphör då effektivt, en process som kallas "cache busting".
Också värt att nämna: du kan hänvisa till dina filer på samma sätt som tidigare men under byggnaden blir referenserna i din HTML uppdaterad för att använda dessa hashednamn. Ta en titt:
”/Build/index.html(.gz)”:
"html
Accentsconagua