Share
Octopress este un cadru static de bloguri construit pe partea de sus a lui Jekyll. Utilizează scripturi pentru a construi fișiere statice care să fie instalate pe un server.
... vom explica totul aici. Cu toate acestea, dacă nu ați atins niciodată linia de comandă, este posibil să doriți mai întâi un primer mic. Consultați acest ghid, care explică câteva comenzi și funcții de bază.
Browserele citesc HTML, CSS și JavaScript. Fiecare altă limbă este folosită pentru a genera aceste trei tipuri de fișiere. Site-urile statice sunt create din fișiere statice codate greu care nu se bazează pe nici un proces de server (spre deosebire de PHP sau de alte site-uri generate de server). Jekyll, cadrul de bază, se bazează în schimb pe mediul local al editorului de conținut pentru a genera fișierele statice care vor fi implementate în cele din urmă.
Spuneți, de exemplu, că aveți cinci postări de blog în blogul dvs. Wordpress. Când vizitați http://yoursite.com, fragmente din aceste cinci postări apar pe pagina dvs. de pornire. Faceți clic pe un link pentru a vă duce la pagina postului complet. Fiecare dintre aceste pagini este difuzată browserului dvs. ca HTML, denumită CSS; este posibil să aveți sau nu JavaScript care să vă ajute să definiți anumite comportamente interactive.
Paginile de pe blogul tău alimentat cu Wordpress sunt construite în zbor; interogările bazei de date sunt difuzate pentru a obține diferitele piese, cum ar fi titlul, conținutul sau permalink. Acestea sunt apoi returnate și procesate de PHP pentru fiecare solicitare (presupunând că nu aveți instalat un plugin pentru cache).
Cu Jekyll, lucrurile sunt diferite.
Mă bucur că ai întrebat. Jekyll face toate astea computerul tau, înainte ca fișierele să urce la server. Citește câteva configurații locale și șabloane, apoi construiește toate acele HTML, CSS și JavaScript direct pe mașina dvs. locală, astfel încât serverul dvs. nu trebuie să facă acest lucru. Acest lucru face administrarea serverului mult mai ușoară, mai sigură și mai sigură mai repede.
Există câteva răspunsuri la această întrebare. Iată trei:
Deci, care probleme nu rezolvă această abordare? Ei bine, pentru unul, dacă site-ul dvs. depinde de datele create de utilizatori, site-urile generate static, în general, nu vor da mult spațiu pentru asta. Desigur, dacă vă bazați doar pe o bază de date pentru comentarii, puteți descărca cu ușurință acest lucru la ceva de genul Disqus. Dacă vă bazați pe date vii care nu pot fi trase pe front-end prin JavaScript, atunci site-urile statice probabil că nu sunt potrivite cerințelor dvs..
Scenariul cel mai bun: bloguri sau site-uri centrate pe conținut pe care dezvoltatorii web le întrețin. S-ar putea să fi prins asta cu sloganul "Octopress", "Un cadru de blogging pentru hackeri".
webild.envato.com - construit cu Octopress, întreținut de echipa Envato dev Pentru că veți face o muncă ușoară în terminal, Octopress și Jekyll nu sunt în general potrivite pentru un creator de conținut non-tech. Cu toate acestea, dacă sunteți dispus să petreceți suficient timp pentru a citi acest post, veți fi bine potrivite pentru un site cu putere Octopress.
Înțelegând că ceea ce văd toți utilizatorii dvs. este HTML, CSS și JavaScript este secretul real al web-ului. Prin urmare, testarea site-ului dvs. Octopress nu necesită instalări server Apache, PHP sau MySQL pe plan local. Tot ce aveți nevoie este un browser care poate rula fișiere locale.
Fiecare lucru bun vine cu un preț; trebuie să aveți Ruby versiunea 1.9.3, plus Jekyll și Bundler Ruby Gems instalate, precum și Git. (În timp ce Git nu este neapărat necesar, ar putea fi bine.) Odată ce aceste piese sunt instalate, sunteți gata să faceți salt. Pentru a instala Git, du-te aici.
Instrucțiunile care urmează sunt pentru Mac; comenzile similare pot fi găsite pentru Windows printr-un manager de versiuni Ruby pentru ferestre numite pik.
În primul rând, verificați pentru a vedea ce versiune de Ruby ați instalat pe computerul dvs., rulând ruby -v. Dacă versiunea nu este 1.9.3, continuați cu aceste instrucțiuni. Puteți sări la "Tricky Part Number 2: Gems" dacă aveți deja 1.9.3.
Instalarea versiunii 1.9.3 Ruby este realizată relativ ușor folosind RVM. RVM sau Ruby Version Manager, vă permite să instalați mai multe versiuni de Ruby pe sistemul dvs. fără a trebui să ștergeți versiunile anterioare. Instrucțiunile de instalare rapidă pentru RVM și Ruby 1.9.3 sunt următoarele:
\ curl -L https://get.rvm.io | bash -s stabil -ruby = 1.9.3
Notă: dacă aveți probleme legate de CGC (sau "gnu compilator de colectare", care este necesar pentru a construi Ruby de la sursa ei), ar putea ajuta pentru a rula următoarele comenzi.
\ curl -L https://get.rvm.io | bash -s stabil CFLAGS = "- Wno-error = scurten-64-to-32" instalare rvm ruby-1.9.3-p392
Alternativ, instalarea XCode ar trebui să ajute la rezolvarea mai multor probleme pentru utilizatorii de Mac legați de GCC. Consultați acest subiect pe GitHub pentru mai multe informații despre subiect.
Pentru a vă asigura că Ruby 1.9.3 a fost instalat cu succes, rulați rvm listă. Odată ce acest proces este finalizat, puteți rula următoarele pentru a seta versiunea implicită de sistem a rubinului la 1.9.3:
rvm - utilizare inițială 1.9.3
Pentru a verifica și a asigura că 1.9.3 a fost selectat, puteți rula din nou ruby -v. Aceasta va imprima versiunea curentă Ruby.
RubyGems este un manager de pachete de coduri pentru limbajul de programare Ruby și unul dintre motivele primare pentru care comunitatea Ruby a câștigat reputația de a fi de ajutor și de unificat. Acesta permite utilizatorilor să instaleze cu ușurință pachete de cod open source direct din linia de comandă. Aceste pietre sunt stocate în locațiile oficiale ale repozitorilor.
Pentru a instala pietrele Ruby, executați următoarele comenzi din linia de comandă. (Dacă nu ați instalat încă RubyGems, faceți acest lucru urmând instrucțiunile de aici înainte de a rula aceste comenzi. Puteți verifica dacă aveți instalat RubyGems rulând care bijuterie din linia de comandă, care va căuta bijuterie program executabil care este folosit pentru a instala pietre.)
gem instalare jekyll gem instalare bundler
Acest lucru va trage în jos pietre Jekyll și Bundler, și să le stocați într-o locație de pe computer pe care Ruby îl folosește automat ca bibliotecă de feluri, numită "gemset". Jekyll este puternicul generator de site-uri statice din spatele Octopress; Bundler este un format de specificație de instalare bijuterie care face ca dependențele de bijuterii să fie mai ușor de satisfăcut. Cu alte cuvinte, vă permite să listați pietrele de care aveți nevoie într-un fișier simplu numit Gemfile, și fugi instalare pachet în același director pentru a obține toate pietrele enumerate (în loc să le instalați manual de unul câte unul).
În primul rând, veți dori să scoateți Octopress într-un director pe care să îl păstrați. Spre deosebire de majoritatea site-urilor bazate pe baze de date, site-ul dvs. live va reflecta, în general, site-ul dvs. local, în conținut și în prezentare. Vom copia depozitul git de la distanță într-un folder numit "mysite" în directorul Sites. (Aceasta este o prestabilitate bună, în special pentru utilizatorii de Mac.)
cd ~ / Site-uri git clona git: //github.com/imathis/octopress.git mysite
După ce ați terminat acest lucru, veți dori să vă schimbați în director și să instalați pachetul.
cd mysite bundle install
Aceasta va instala o colecție de pietre prețioase, dacă în prezent nu le aveți instalate pe mașina dvs..
Conținutul dvs. de director ar trebui să arate așa, în acest moment ... Apoi, veți dori să instalați tema Octopress implicită.
rake install
Conținutul dvs. de directoare, plus fișierele de teme Merită știut: greblă este un runner de scripting Ruby. Se citește dintr - un "Rakefile", care conține instrucțiuni pentru greblă comanda.
Site-ul Octopress are o imagine de ansamblu asupra configurațiilor blogului, care se găsesc în _config.yml. Verifică-l aici. Iată un exemplu:
url: http://myblog.com titlu: Subtitlul meu Super Blog: Un blog care este super autor: Jonathan Cutrell simple_search: http://google.com/search description: Un site dedicat explicării modului în care funcționează Octopress. date_format: "ordinal" subscribe_rss: /atom.xml # acesta este implicit # subscribe_email: --- nu avem unul pentru moment. category_feeds: # Activați pe fiecare categorie feedurile RSS (email implicit în 2.1): # Adresa de e-mail pentru fluxul RSS dacă doriți.
Există, de asemenea, un număr de pluginuri disponibile și o mulțime de configurații pentru Jekyll care sunt opționale; nu vom acoperi totul, pentru că încercăm doar să coborâm și să fugim.
Setările terță parte sunt disponibile pentru a fi completate în _config.yml fişier; acestea sunt evaluate în momentul în care site-ul este compilat și permite integrarea ușoară cu serviciile externe. De exemplu, aici este o simplă integrare GitHub:
# Github repositories github_user: jcutrell github_repo_count: 14 github_show_profile_link: true github_skip_forks: true
Notă: toate acestea sunt deja adăugate în fișierul _config.yml; pur și simplu completați-l pentru a profita de caracteristicile construit în.
Bun! Puteți începe foarte repede să scrieți un post. Sintaxa pentru crearea unui post (pe docs) este simplă:
rake new_post ["Un titlu minunat"]
Notă: dacă utilizați ZSH, va trebui să verificați această remediere pe GitHub și să adăugați un alias fișierului dvs. zshrc.
mysite / sursa / _posts / 2013-03-27-unele-minunat-title.markdown Acest lucru creează un fișier pentru postarea dvs. în Sursă / _posts director. Implicit, postarea va fi creată ca un fișier de marcare. Numele postului va defini adresa URL (acesta este un lucru bun pentru SEO, apropo). Dacă navigați la fișierul nou creat, veți vedea unele probleme preliminare YAML. Aici puteți adăuga una sau mai multe categorii. De exemplu:
--- layout: titlul postului: "Unele Titlu Awesome" data: 2013-03-21 00:11 comentarii: categorii adevărate: [Awesome, Amazing, Beautiful, Cool] ---
Apoi, puteți adăuga conținutul dvs. sub chestiunea frontală.
Pentru a vedea noua dvs. postare pe blog, prima rulați rake previzualizare, apoi indicați browserul dvs. la localhost: 4000. Aceasta va afișa postarea dvs. pe pagina index!
Faceți clic pe interfață pentru a obține o simțire a interfeței și a caracteristicilor acesteia. Notă: tema implicită este receptivă! În foarte puțin timp, ați terminat un blog static.
Pentru a face o pagină (mai degrabă decât o postare), rulați ceva asemănător.
rake new_page [despre]
mysite / sursa / despre / index.markdown Aceasta creează o pagină la Sursa / despre / index.markdown. De asemenea, puteți rula:
rake new_page [despre / index.html]
Care va alege .html filetype în loc de markdown. În această pagină, puteți face modificări în același mod ca și postările.
Când creați o postare, puteți să o conectați direct la o pagină externă, similar cu link-ul de pagină spre pluginul Wordpress (dar mult mai puțin complicat)! Pur și simplu setați materialul frontal yaml pentru a include următoarele:
external-url: http://yourexternallink.com
O altă mare întrebare. Ești pe un drum.
Așa cum am spus mai devreme, tot ceea ce un browser citește este HTML, CSS și JavaScript (dat fiind că nu folosiți Flash sau alte tehnologii externe). Atunci când se bazează pe o implementare orientată spre server, HTML, CSS și JavaScript se pot modifica în momentul în care utilizatorul încarcă pagina; cererea către server rulează un anumit cod creați HTML în zbor bazat pe orice returnează codul.
De exemplu, cu un site ca Wordpress, legăturile către pagini și posturi indică structuri web care trag informațiile corecte din baza de date MySQL în momentul în care utilizatorul accesează site-ul.
Octopress (și mai precis, Jekyll) trece printr-un proces foarte asemănător, dar în loc să o facă la cerere, o fac doar o singură dată, pe calculatorul local.
Iată cum funcționează. Există trei părți de bază ale site-ului Jekyll: configurația, planurile / includerea și posturile / paginile. Dacă veniți din lumea Wordpress, acestea pot fi mapate la opțiunile, fișierele tematice și, respectiv, la baza de date (cu câteva linii neclară aici și acolo).
Atunci când Jekyll trece prin procesul de generare a site-ului, acesta pornește de la fișierul index și construiește toate paginile legate definite de layouts. De-a lungul construirii, Jekyll folosește configurațiile definite de _config.yml fișier, precum și aspectul YAML în postări, pagini și layouts. Jekyll folosește fișierele statice și paginile ca o colecție de obiecte enumerabile și completează conținutul în toate aspectele asociate.
Rezultatul final este un set susținut, uscat de fișiere sursă în sursă director și conținutul static generat uniform în public director.
Dosarul public va fi completat cu fiecare pagină a site-ului. Aceasta înseamnă că oricând veți vedea o pagină, fie că este vorba de o listă paginată de postări, o pagină 404 sau o pagină aproximativă, este de fapt o singură pagină HTML pe care o puteți vizualiza direct în folderul public.
O privire rapidă asupra dosarului public vă va arăta câteva lucruri. În primul rând, structura directorului este ușor de navigat, deoarece serverul static implicit de Apache ar servi la o adresă URL echivalentă cu structura directorului. A doua observație este că oricare dintre cele două fișiere HTML conțin în mare parte conținut foarte asemănător; acesta este un rezultat al antetului duplicat, al subsolului și al conținutului din bara laterală tras de la aspecte și include, care este complet acceptabil. Motivul pentru care este complet acceptat este simplu: conținutul din directorul public nu este gestionat direct de către dvs., ci mai degrabă prin acțiuni programatice, prin urmare DRY nu se aplică deoarece acest lucru nu afectează mentenabilitatea sau performanța site-ului chiar marginal.
În calitate de designer, aceasta va fi partea pe care ați așteptat-o.
Octopress este cu siguranță construită cu bloggerul în minte; cu câteva informații foarte directe despre cum trebuie să schimbați tema, ei au explicat cum să folosească fișierele găsite în sursa / particularizate în acest ghid. Durata lungă și scurtă a acestuia: Octopress este făcută pentru a se potrivi postărilor și paginilor de blog, precum și conținut personalizat pentru bara laterală și subsolul. Cu toate acestea, puteți extinde cu ușurință bara laterală. Modelul acceptat este crearea unui nou fișier html înăuntru sursa / particularizate / Asides / cu conținut care urmează acest format:
Un fel de titlu
Foo, bar
De asemenea, puteți schimba cu ușurință antetul și subsolul în sursa / particularizate. Acest lucru facilitează adăugarea mai multor fișiere JS / CSS, modificarea sau eliminarea fonturilor Google implicite etc..
Octopress este construit cu SCSS. Designul poate fi modificat / înlocuit folosind Sass / particularizate / _styles.scss fişier. Acest fișier este inclus ultima. Pentru a înțelege cu adevărat cum să stil Octopress, totuși, trebuie să ne scufundăm mai întâi în șabloanele de bază.
Notă: Nu modificați șabloanele de bază decât dacă sunteți complet sigur de ceea ce faceți sau sunteți gata să spargeți ceva. Acestea sunt fișierele care definesc construirea finală a site-ului dvs. static!
Octopress vine cu capacitatea de a schimba cu ușurință teme; în mod eficient copii ale directorului sursă. În .tematică directorul, vedem tema "clasică", care a fost instalată când am fugit rake install. Fișierele sursă pentru temă sunt copiate în directorul de nivel superior și folosite pentru a construi site-ul static.
În interiorul directorului sursă, vedem câteva dosare tematice evidente.
Fișierele din interiorul directorului _layouts definește aspectele comune ale postărilor, paginilor, indexurilor de categorii și "implicit", care este un șablon de rezervă pentru a prinde ceva care nu este unul dintre primele trei. Fisierul _partials permite doar ca piesele parțiale de fișiere, cum ar fi navigația sau doar articolul, să fie incluse pe cont propriu. Aceste fișiere sunt șabloane HTML bazate pe lichide, care permit transmiterea de date. Aceste date provin de la frontul YAML stabilit în diverse locuri de pe site. De exemplu, luați în considerare eticheta lichidului de la _partials / article.html de mai jos.
% dacă site.disqus_short_name și page.comments! = false și post.comments! = false și site.disqus_show_comment_count == true% | Comentarii % endif%
Această etichetă spune următoarele:
În cazul în care utilizatorul a setat numele scurt disqus în configurația principală a site-ului, iar comentariile sunt activate pentru această pagină sau postare, iar site-ul este configurat să afișeze numărul de comentarii disqus, apoi să redea linkurile de pe linia următoare. Linkul va indica root_url plus post.url dacă suntem pe pagina index; în caz contrar, va indica direct la #disqus_thread, un div care conține comentariile.
Înțelegând acest lucru, putem înțelege cum să găsim și să refacem sau să refactorăm anumite părți ale site-ului. De exemplu, dacă vrem să adăugăm o clasă la postări care sunt linkuri externe directe, am putea face așa ceva.
% dacă pagina.extern-link sau post.external-link%conținut | extras% else%conținut | extras% endif%
Acest lucru verifică pur și simplu pentru a vedea dacă există link.external-link sau post.external-link. Dacă o fac, adăugăm un div divizor div.entry conținut element. Există multe lucruri pe care le puteți profita de configurația simplă a YAML-ului. Asigurați-vă că experimentați și căutați soluții noi la noi probleme!
Este mult mai multă putere în Octopress! Verificați documentația completă și nu pierdeți această listă extinsă de plug-in-uri Octopress de la terți; cu aproape șaizeci de pluginuri, integrarea cu serviciile terților poate rezolva multe cereri și probleme comune de implementare.
Faceți un comentariu mai jos cu idei pentru ce alte funcții doriți să fie acoperite, de asemenea! Și rețineți că cel mai bun mod de a învăța este să vă murdăriți mâinile. Intrați în documente și cod; sparge lucrurile, apoi rezolva-le. Aflați cum mergeți!
Înțelegând problemele? Aveți nevoie de mai multe îndrumări sau căutați pe cineva să vă uite codul și să îndreptați-vă spre situația în care totul a mers prost? Tuts + este un loc minunat pentru a fi! Am fost toți acolo, așa că nu fi timid. Puneți-vă problemele în comentarii! Dacă vă simțiți generos și vedeți pe cineva care are o problemă în firul de comentarii, nu ezitați să îi ajutați!
Accentsconagua