Share
I del tre av denne serien skal vi få våre hender skitne og begynne å bygge et nettsted for et fiktivt podcast-nettsted: "Matcha Nerdz". Vi bruker Middleman, Bourbon, Neat and Bitters. La oss gå!
La oss starte med et lite heads-up av hvor dette går. I løpet av de neste par artiklene skal jeg bygge et lite statisk nettsted for en fiktiv podcast kalt "Matcha Nerdz" - en podcast for folk som ønsker å dykke inn i alt pulverisert grønn te. Den vil ha følgende sider:
Vi vil bruke Middleman for å generere det statiske nettstedet og Bourbon-pakken for alle stilene. Jeg håper at du har tatt en titt på mine tidligere veiledninger om Bourbon, Neat og Middleman før du kom til dette punktet. Hvis ikke, anbefaler jeg at du går og leser dem, med mindre du føler deg trygg nok i det grunnleggende allerede.
For alle ting knyttet til styling har jeg lenge vært stolt av Bourbon for en stund. Også, jeg graver virkelig den innrykkede Sass-syntaksen - jeg foretrekker det langt til .SCSS syntaks. De .sass syntaks er den eneste (sannsynligvis) ukjente biten jeg vil gjerne kaste på nybegynnere, fordi jeg føler det er verdt å bli kjent med.
La oss starte en ny app for vårt podcast-nettsted ved å skrive inn i terminalen:
bash middleman init matcha_nerdz og deretter skifte til prosjektkatalogen vår:
bash cd matcha_nerdz
Nå får vi Git å gå:
"bash git init
# => for å starte nye Git repo
git add -all # => legger til alle filene for oppstart
git commit -m 'Initital commit' # => forandrer endringer "
Deretter legger vi til bloggen til mixen. Dette er et godt utgangspunkt for vårt podcast-nettsted. Senere vil vi justere artiklene for å vise podcast lydspor fra SoundCloud. For nå er det imidlertid bare en blogg.
Legg til i Gemfile:
ruby perle "middleman-blog"
Deretter via terminalen:
bashbunt # eller bunt exec mellleman
bash middleman init --template = blog
Dette vil oppdatere mappen "matcha_nerdz". ".Config.rb" og indeksmalen din får også en liten oppdatering. Dessuten får du nye maler for din feed, tags-side, kalenderside, et eksempelartikkel og en ny layout. Kontroller utgangen fra terminalen:
bash identisk .gitignore oppdatering config.rb eksisterer kilde opprette kilde / 2012-01-01-eksempel-artikkel.html.markdown lage kilde / calendar.html.erb lag kilde / feed.xml.builder oppdater kilde / index.html.erb lage kilde / layout.erb lage kilde / tag.html.erb eksisterer kilde / stylesheets eksisterer kilde / javascripts eksisterer kilde / bilder
Git:
bash git add --all git commit -m 'Legger til blogg mal'
Nå kan du opprette nye artikler via kommandolinjen:
bash middleman artikkel "Min nye fancy andre artikkel" # => lage kilde / 2015-11-22-min-fantastiske-andre artikkel.html.markdown
Dette skaper en ny markdown artikkel under "/ source". Dette er ikke optimal lagringsmessig, men vi kommer dit. Brann opp serveren din for å se ditt første eksempelbloggartikkel:
bash middleman #or middleman server
Neste trenger vi ha litt housekeeping å gjøre. Bloggen malen opprettet et nytt layout under "source / layout.erb". Vi må slette den opprinnelige i "kilde / layouts / layout.erb" og flytte den nye til der. Så, via terminalen:
bash rm kilde / layouts / layout.erb mv kilde / layout.erb kilde / layouts /
Vi må også oppdatere den nye "layout.erb" med ting som ble slettet i layoutfilen. Legg til følgende i din tag inn "kilde / layouter / layout.erb":
"html
<%= stylesheet_link_tag “normalize”, “all” %> <%= javascript_include_tag “all” %>"
Viktigst av alt, dette sørger for at dine JS- og stilaktiver er tilgjengelige.
Git
bash git rm kilde / layout.erb git add --all git commit -m 'Flytter nytt layout inn / layouter Legger til ressurs linker Fjerner gammel layout'
For å gjøre livet enklere, legger vi LiveReload til mixen. Vi må ta tak i perlen og aktivere den i vår "config.rb" -fil.
I vår Gemfile:
rubin perle 'middleman-livereload'
I terminalen:
bash bunt
Deretter i config.rb:
rubin #uncomment aktivere: leverskinn
Og til slutt våre Git-kommandoer:
bash git add --all git commit -m 'Aktiverer LiveReload'
Med dette aktivert, start serveren på nytt og siden oppdateres automatisk når du endrer innhold på siden, stiler eller oppførsel. Livssparer, stol på meg!
Oppmerksomhet! Et forsiktig ord: Hvis du har en annen lokal server som kjører, kan LiveReload ikke spille ball. Du må drepe den andre serveren for nå.
Når du ser hvor artikler lagres akkurat nå, vil du raskt innse at denne organisasjonen direkte under "/ source" blir kjedelig veldig raskt. Publiser et par artikler, og du vil drukne i innlegg. Det er ikke nødvendig å være så rotete - i stedet la oss lage et dirctory under "/ source" for alle våre innlegg. Flytt artikkelen din (er) der inne og la Middleman vite hvor du skal finne dem.
bash mkdir kilde / innlegg mv kilde / 2012-01-01-eksempel-artikkel.html.markdown kilde / innlegg / Deretter legger vi til "/ innlegg" som kilde til bloggartikler. I config.rb:
ruby blog.sources = "innlegg /: år-: title.html"
Så våre Git kommandoer:
"bash git rm source / 2012-01-01-example-article.html.markdown # Fjerner flyttet fil fra repo
git add -all gco -m 'Legger til ny mappe for innlegg og legger til kilde i config.rb "
Og det er det. Ingenting bør ha endret seg, og du bør se eksemplet artikkelen som før. Lagring av innlegg er imidlertid mye mer sane. Hva er også kult er at hvis du lager nye artikler via kommandolinjen, blir de nye innleggene dine lagret i "/ post" automatisk:
bash middleman artikkelen 'My awesome 3rd article' # => opprett kilde / innlegg / 2015-min-awesome-3rd-article.html.markdown
For meg, å presse statiske steder til GitHub Pages er en så praktisk løsning som jeg ikke vil sette deg gjennom gjennom distribusjon via Heroku eller Amazons S3-tjeneste. La oss holde det enkelt!
I Gemfile:
ruby perle "mellommann-distribuere"
Deretter i terminalen:
bash bunt
Vi må legge til en distribusjonsblokk til "config.rb":
rubin aktivere: deploy do | deploy | deploy.method =: git deploy.branch = 'gh-sider' deploy.build_before = sann ende
For at GitHub Pages skal kunne finne CSS- og JS-aktiver, må du aktivere følgende i config.rb:
ruby configure: build aktivere: relative_assets ende
Deretter lager du en repo på GitHub, legger til fjernkontrollen og distribuerer:
"bash git remote add opprinnelse https://github.com/yourusername/repositoryname.git
mellommann distribuere "
Boom! Nettstedet ditt er under "yourusername.github.io/projectname" og dine eiendeler skal sorteres ut. Jeg elsker denne prosessen, det kunne ikke vært enklere og mer brukervennlig. God jobb GitHub!
bash git add --all gco -m 'Legger til oppsett for GitHub Pages-distribusjon'
I det siste skrittet før vi kommer inn i Bourbon-oppsettet, vil jeg gjerne bli kvitt stilene som følger med Middleman, og optimalisere våre eiendeler for bedre ytelse i nettleserviringen minifisering og sammenkobling. Gå til "source / stylesheets / all.css" og slett innholdet. Bare hold den første linjen:
css @ charset "utf-8";
Git-kommandoer:
bash git add --all git commit -m 'Fjerner unødvendige Middleman stiler'
Deretter ønsker vi å aktivere et par alternativer for å optimalisere for ytelse i "config.rb":
ruby configure: build aktivere: asset_hash aktivere: minify_javascript aktivere: css aktivere: gzip end
Så igjen, Git kommandoer:
bash git add --all git commit -m 'Aktiverer ytelsesoptimaliseringer'
La meg raskt forklare hva vi gjorde her:
For øyeblikket er gzip den mest populære og effektive komprimeringsmetoden. Dens komprimeringsalgoritme finner lignende strenger i en fil og komprimerer dem. For HTML, som er fullt av hvitt mellomrom og matchende koder, er dette veldig effektivt og reduserer HTTP-responsstørrelsen med hele 70%. Aktiverer dette ikke bare gzips HTML, men også CSS og JS filer. Under en konstruksjon lager Middleman filene dine som vanlig, men dupliserer dem også med en ".gz" -versjon. Når en nettleser kommer i kontakt med filene dine, kan den velge om det foretrekker å vise gzip-komprimerte filer eller vanlige. gzipping støttes tungt av web- og mobilnettlesere.
Denne prosessen striper ut alt unødvendig søppel fra stilene dine og reduserer filstørrelsen betydelig. Kort sagt, din CSS blir en stor blob-optimalisert for å bli lest av en maskin. Definitivt ikke vennlig på øynene.
Dette er det samme som minify_css, men litt mer involvert og sofistikert.
Dette aktiverer hashing av dine eiendeler. Det betyr at filnavnene dine endres og mottar litt ekstra informasjon (under byggeprosessen) som informerer nettlesere om de trenger å laste ned eiendeler eller ikke. Nå er navnet på en fil avhengig av innholdet i den filen. Hashed-eiendeler blir bufret av nettlesere og nettstedene dine blir gjengitt raskere. Et annet ord for dette er "fingeravtrykk" fordi det gir en enkel løsning for å informere nettlesere om to versjoner av en fil er identiske. Utplasseringsdatoen spiller ingen rolle - bare innholdet. Ta en titt nedenfor for hvordan hashed eiendeler 'filer ser ut:
Skjerm
Dette ser ekkel ut, men bildene dine, stilark og JavaScript-filer får et unikt navn gjennom denne ekstra "tilfeldige" koden: en (unik) hash. Hver gang du bytter en ressurs og går gjennom byggeprosessen igjen, endres denne hasen, som igjen signalerer til nettlesere som da, og bare da, de trenger å laste ned den aktuelle filen. Filen er da utløpt, en prosess kjent som "cache busting".
Også verdt å nevne: Du kan referere til filene dine på samme måte som før, men under byggingen blir referansene i HTML oppdatert for å bruke disse hash-navnene. Ta en titt:
“/Build/index.html(.gz)”:
"html
Accentsconagua