Share
In deel drie van deze serie gaan we onze handen vies maken en beginnen met het bouwen van een site voor een fictieve podcast-site: "Matcha Nerdz". We gebruiken Middleman, Bourbon, Neat en Bitters. Laten we gaan!
Laten we beginnen met een beetje heads-up van waar dit naartoe gaat. In de volgende paar artikelen ga ik een kleine statische site bouwen voor een fictieve podcast genaamd "Matcha Nerdz" - een podcast voor mensen die willen duiken in alles wat gepoederde groene thee is. Het heeft de volgende pagina's:
We zullen Middleman gebruiken voor het genereren van de statische site en de Bourbon-suite voor alle styling. Ik hoop dat je mijn vorige tutorials over Bourbon, Neat en Middleman hebt bekeken voordat je op dit punt arriveerde. Zo niet, dan raad ik je aan om ze te gaan lezen, tenzij je al genoeg zelfvertrouwen hebt in de basis.
Voor alles wat met styling te maken heeft, vertrouw ik al geruime tijd zwaar op Bourbon. Ook graai ik echt de ingesprongen Sass-syntaxis - ik geef er de voorkeur aan .SCSS syntaxis. De .sass syntaxis is de enige (waarschijnlijk) onbekende bit die ik graag zou willen gooien naar nieuwkomers, omdat ik vind dat het echt de moeite waard is om te leren kennen.
Laten we een nieuwe app starten voor onze podcast-site door in de terminal in te voeren:
bash middleman init matcha_nerdz en verander dan naar onze projectdirectory:
bash cd matcha_nerdz
Nu krijgen we Git op gang:
"bash git init
# => om een nieuwe Git-repo te starten
git add -all # => voegt alle bestanden voor enscenering toe
git commit -m 'Initital commit' # => legt wijzigingen vast "
Vervolgens voegen we de blogsjabloon toe aan de mix. Dit is een goede basis voor onze podcast-site. Later zullen we de artikelen aanpassen om podcast-audiotracks van SoundCloud weer te geven. Voor nu is het echter slechts een blog.
Voeg in het Gemfile toe:
robijn edelsteen "tussenpersoon-blog"
Dan via de terminal:
bash bundle # of bundel exec tussenpersoon
bash middleman init --template = blog
Hiermee wordt je map "matcha_nerdz" bijgewerkt. ".Config.rb" en je indexsjabloon krijgt ook een kleine update. Daarbovenop krijg je nieuwe sjablonen voor je feed, tagspagina, kalenderpagina, een voorbeeldartikel en een nieuwe lay-out. Controleer de output van de terminal:
bash identieke .gitignore update config.rb exist source create source / 2012-01-01-example-article.html.markdown maak source / calendar.html.erb maak source / feed.xml.builder update source / index.html.erb maak bron / layout.erb maak bron / tag.html.erb bestaat bron / stylesheets bestaan bron / javascripts bestaan bron / afbeeldingen
Git:
bash git add --all git commit -m 'Voegt blogsjabloon toe'
U kunt nu nieuwe artikelen maken via de opdrachtregel:
bash middelpunt artikel 'Mijn nieuwe mooie tweede artikel' # => maak bron / 2015-11-22-my-wonderful-second-article.html.markdown
Dit maakt een nieuw markdown-artikel onder "/ source". Dit is niet optimaal qua opslag, maar we komen wel. Start uw server op om uw eerste voorbeeldblogartikel te bekijken:
bash middleman #or middleman-server
Vervolgens moeten we wat huishoudelijk werk doen. De blogsjabloon heeft een nieuwe lay-out gemaakt onder "source / layout.erb". We moeten de originele verwijderen in "source / layouts / layout.erb" en de nieuwe daar naartoe verplaatsen. Dus, via de terminal:
bash rm source / layouts / layout.erb mv source / layout.erb source / layouts /
We moeten ook de nieuwe "layout.erb" bijwerken met dingen die in het lay-outbestand zijn verwijderd. Voeg het volgende toe aan uw tag in "source / layouts / layout.erb":
"html
<%= stylesheet_link_tag “normalize”, “all” %> <%= javascript_include_tag “all” %>"
Het belangrijkste is dat dit ervoor zorgt dat uw JS- en stijlactiva beschikbaar zijn.
Git
bash git rm source / layout.erb git add --all git commit -m 'Verplaatst nieuwe layout naar / layouts Voeg asset links toe Verwijdert oude layout'
Om ons leven een beetje comfortabeler te maken, zullen we LiveReload aan de mix toevoegen. We moeten de edelsteen pakken en deze activeren in ons "config.rb" -bestand.
In onze Gemfile:
robijn edelsteen 'tussenpersoon-livereload'
In de terminal:
bashbundel
Vervolgens in config.rb:
ruby #uncomment activate: livereload
En ten slotte onze Git-commando's:
bash git add --all git commit -m 'ActiveReload activeert'
Activeer hiermee uw server opnieuw en uw pagina wordt automatisch vernieuwd wanneer u inhoud op de pagina, stijlen of gedrag wijzigt. Life saver, trust me!
Aandacht! Een waarschuwing: als u een andere lokale server heeft, kan LiveReload mogelijk geen bal spelen. Je zult die andere server voorlopig moeten doden.
Wanneer u nu kijkt waar artikelen op dit moment worden opgeslagen, zult u snel merken dat deze organisatie direct onder "/ source" erg snel vervelend wordt. Publiceer een aantal artikelen en je verdrinkt in berichten. Het is niet nodig om zo rommelig te zijn - laten we in plaats daarvan een dirctory maken onder "/ source" voor al onze berichten. Verplaats uw artikel (en) daar binnen en laat Middleman weten waar u ze kunt vinden.
bash mkdir source / posts mv source / 2012-01-01-example-article.html.markdown bron / berichten / Vervolgens voegen we '/ posts' toe als bron voor de blogartikelen. In config.rb:
ruby blog.sources = "berichten /: jaar-: title.html"
Dan bevelen onze Git:
"bash git rm source / 2012-01-01-example-article.html.markdown # Verplaatst verplaatst bestand van repo
git add -all gco -m 'Voegt een nieuwe map toe voor berichten en voegt bron toe in config.rb "
En dat is het. Er had niets moeten veranderen en u zou het voorbeeldartikel als voorheen moeten zien. Het opslaan van berichten is echter veel gezonder. Wat ook leuk is, is dat als je nieuwe artikelen maakt via de opdrachtregel, je nieuwe berichten automatisch in "/ post" worden opgeslagen:
bash middleman article 'My awesome 3rd article' # => create source / posts / 2015-my-awesome-3rd-article.html.markdown
Voor mij is het duwen van statische sites naar GitHub Pages zo'n handige oplossing dat ik je niet wil laten implementeren via Heroku of Amazon's S3-service. Laten we het simpel houden!
In de Gemfile:
robijn edelsteen "tussenpersoon-deploy"
Vervolgens in de terminal:
bashbundel
We moeten een implementatieblok toevoegen aan "config.rb":
ruby activeren: deploy do | deploy | deploy.method =: git deploy.branch = 'gh-pages' deploy.build_before = true end
Om GitHub Pages uw CSS- en JS-assets te laten vinden, moeten we ook het volgende in config.rb activeren:
ruby configure: build do activate: relative_assets end
Maak vervolgens een repo op GitHub, voeg de afstandsbediening toe en implementeer:
"bash git remote add origin https://github.com/yourusername /repositoryname.git
tussenpersoon deploy "
Boom! Uw site staat onder "uwgebruikersnaam.github.io/projectnaam" en uw bezittingen moeten worden opgezocht. Ik ben dol op dit proces - het kan niet eenvoudiger en gebruiksvriendelijker. Goed gedaan GitHub!
bash git add --all gco -m 'Voegt instellingen toe voor GitHub Pages-implementatie'
In de laatste stap voordat we de Bourbon-installatie binnengaan, wil ik de stijlen die bij Middleman horen, wegwerken en onze middelen optimaliseren voor een betere prestatie bij het verkleinen en aaneenschakelen van de browser. Ga naar "source / stylesheets / all.css" en verwijder de inhoud. Houd gewoon de eerste regel:
css @charset "utf-8";
Git-commando's:
bash git add --all git commit -m 'Verwijdert overbodige Middleman-stijlen'
Vervolgens willen we een aantal opties activeren om te optimaliseren voor prestaties in "config.rb":
ruby configure: build do activeer: asset_hash activeer: minify_javascript activate: css activate: gzip end
Git beveelt dan opnieuw:
bash git add --all git commit -m 'Activeert prestatie-optimalisaties'
Laat me snel uitleggen wat we hier hebben gedaan:
Op dit moment is gzip de meest populaire en effectieve compressiemethode. Het compressiealgoritme vindt overeenkomstige strings binnen een bestand en comprimeert ze. Voor HTML, dat vol is met witruimte en overeenkomende tags, is dit zeer effectief en wordt doorgaans de HTTP-antwoordgrootte met maar liefst 70% verminderd. Door dit te activeren, gzip je niet alleen je HTML, maar ook CSS- en JS-bestanden. Tijdens een build maakt Middleman uw bestanden zoals gebruikelijk, maar dupliceert ze ook met een ".gz" -versie. Wanneer een browser contact maakt met uw bestanden, kan deze kiezen of deze gzip-gecomprimeerde bestanden of normale bestanden wil weergeven. gzipping wordt zwaar ondersteund door web- en mobiele browsers.
Dit proces verwijdert alle onnodige rommel uit je stijlen en vermindert de bestandsgrootte aanzienlijk. Kortom, je CSS wordt één grote blob-geoptimaliseerd om door een machine te worden gelezen. Absoluut niet vriendelijk voor de ogen.
Dit is hetzelfde als minify_css, maar een beetje meer betrokken en verfijnd.
Hiermee activeert u het hashen van uw items. Dit betekent dat uw bestandsnamen van bedrijfsmiddelen veranderen en wat extra informatie (tijdens het bouwproces) ontvangen die browsers informeert als ze activa opnieuw moeten downloaden of niet. Nu is de naam van een bestand afhankelijk van de inhoud van dat bestand. Hash-assets worden gecached door browsers en uw sites worden sneller weergegeven. Een ander woord hiervoor is "vingerafdrukken" omdat het een eenvoudige oplossing biedt om browsers te informeren of twee versies van een bestand al dan niet identiek zijn. De implementatiedatum doet er niet toe, alleen de inhoud. Bekijk hieronder hoe de bestanden van gehashte items er uit zien:
screenshots
Dit ziet er vies uit, maar nu krijgen uw afbeeldingen, stijlbladen en JavaScript-bestanden een unieke naam door deze toegevoegde "willekeurige" code: een (unieke) hash. Telkens wanneer u een item wijzigt en het buildproces opnieuw doorloopt, verandert deze hash, wat op zijn beurt signalen uitstraalt voor browsers dat ze dan, en alleen dan, het betreffende bestand opnieuw moeten downloaden. Het bestand is dan effectief verlopen, een proces dat bekend staat als "cache-busting".
Ook vermeldenswaard: u kunt op dezelfde manier naar uw bestanden verwijzen als voorheen, maar tijdens het bouwen worden de verwijzingen in uw HTML bijgewerkt om deze gehashte namen te gebruiken. Kijk eens:
“/Build/index.html(.gz)”:
"html
Accentsconagua