Share
Octopress er et statisk blogging rammeverk bygget på toppen av Jekyll. Den bruker skript for å bygge statiske filer som skal distribueres til en server.
... vi vil forklare alt her. Men hvis du aldri har rørt kommandolinjen, vil du kanskje ha en liten primer først. Sjekk ut denne veiledningen, som forklarer noen grunnleggende kommandoer og funksjoner.
Nettlesere leser HTML, CSS og JavaScript innfødt. Hvert annet språk brukes til å generere disse tre filtyper. Statiske nettsteder er opprettet fra hardkodede statiske filer som ikke stole på noen serverprosesser (i motsetning til PHP eller andre server-side genererte nettsteder). Jekyll, den underliggende rammen, er i stedet avhengig av innholdsredaktørens lokale miljø for å generere de statiske filene som til slutt vil bli distribuert.
Si for eksempel at du har fem blogginnlegg i Wordpress-bloggen din. Når du besøker http://yoursite.com, vises utdrag fra disse fem innleggene på hjemmesiden din. Du klikker på en lenke for å ta deg til hele innleggssiden. Hver av disse sidene blir servert til nettleseren din som HTML, utformet av CSS; Du kan eller ikke har JavaScript som hjelper til med å definere noen interaktive oppføringer.
Sidene på Wordpress-drevet blogg er bygget på fluen; database spørringer kjøres for å få de forskjellige brikkene, for eksempel tittelen, innholdet eller permalinken. Disse blir deretter returnert og behandlet av PHP for hver forespørsel (forutsatt at du ikke har et caching-plugin installert).
Med Jekyll er ting annerledes.
Glad du spurte. Jekyll gjør alt dette på din datamaskin, før filene går opp til serveren. Den leser noen lokale konfigurasjoner og maler, og bygger deretter all den HTML, CSS og JavaScript direkte på din lokale maskin, slik at serveren din ikke trenger å. Dette gjør serveradministrasjonen mye enklere, tryggere og raskere.
Det er noen svar på det spørsmålet. Her er tre:
Så hvilke problemer løsner ikke denne tilnærmingen? Vel, for en, hvis nettstedet ditt er avhengig av brukeropprettede data, vil ikke statisk genererte nettsteder, gi mye plass til det. Selvfølgelig, hvis du bare stoler på en database for kommentarer, kan du enkelt avlaste det til noe som Disqus. Hvis du stole på live data som ikke kan trekkes på fronten via JavaScript, er de statiske nettstedene sannsynligvis ikke egnet for dine krav.
Det beste scenariet: blogger eller innholdssentriske nettsteder som webutviklere vedlikeholder. Du har kanskje fanget det med Octopress-taglinjen, "En bloggramme for hackere."
webuild.envato.com - bygget med Octopress, vedlikeholdt av Envato dev team Fordi du vil gjøre noe mildt arbeid i terminalen, er Octopress og Jekyll generelt ikke egnet for en ikke-teknologisk orientert innholdsskaper. Men hvis du er villig til å tilbringe nok tid til å lese dette innlegget, vil du være godt egnet for et Octopress-drevet nettsted.
Forstå at det som alle brukerne ser er HTML, CSS og JavaScript er den virkelige hemmeligheten til nettet. Derfor, testing av Octopress nettstedet lokalt krever ingen Apache, PHP eller MySQL server installasjoner. Alt du trenger er en nettleser som kan kjøre lokale filer.
Hver god ting kommer med en pris; Du må ha Ruby versjon 1.9.3, pluss Jekyll og Bundler Ruby Gems installert, samt Git. (Selv om Git ikke nødvendigvis er nødvendig, kan det også være.) Når disse bitene er installert, er du klar til å hoppe inn i utviklingen. For å installere Git, gå her.
Instruksjonene som følger er for Mac; lignende kommandoer kan bli funnet for Windows gjennom en Ruby-versjonshåndtering for Windows-kalt pik.
Først må du se hvilken versjon av Ruby du har installert på datamaskinen din ved å kjøre rubin -v. Hvis versjonen ikke er 1.9.3, fortsett med disse instruksjonene. Du kan hoppe over til "Tricky Part Number 2: Gems" hvis du allerede har 1.9.3.
Installere Ruby versjon 1.9.3 er relativt enkelt oppnådd ved hjelp av RVM. RVM eller Ruby Version Manager, lar deg installere flere versjoner av Ruby på systemet uten å måtte slette tidligere versjoner. De raske installeringsanvisningene for RVM og Ruby 1.9.3 er som følger:
\ curl -L https://get.rvm.io | bash -s stable --ruby = 1.9.3
Merk: hvis du har problemer relatert til gcc (eller "gnu compiler samlingen", som er nødvendig for å bygge Ruby fra sin kilde), kan det hjelpe til å kjøre følgende kommandoer i stedet.
\ curl -L https://get.rvm.io | bash -s stable CFLAGS = "- Wno-error = shorten-64-til-32" rvm installere ruby-1.9.3-p392
Alternativt kan installering av XCode bidra til å løse mange problemer for Mac-brukere relatert til GCC. Sjekk ut denne tråden på GitHub for mer informasjon om emnet.
For å være sikker på at Ruby 1.9.3 er installert, kjør rvm liste. Når denne prosessen er fullført, kan du kjøre følgende for å angi systemets standardversjon av rubin til 1.9.3:
rvm - standard bruk 1.9.3
For å sjekke og kontrollere at 1.9.3 er valgt, kan du igjen kjøre rubin -v. Dette vil skrive ut den gjeldende Ruby-versjonen.
RubyGems er en kodepakke for Ruby-programmeringsspråket, og en av de viktigste grunnene til at Rubys samfunn har fått et rykte om å være nyttig og forenet. Det lar brukerne enkelt installere åpen kildekoden pakker direkte fra kommandolinjen. Disse edelstenene er lagret på offisielle plasseringer.
For å installere Ruby-perlene, kjør følgende kommandoer fra kommandolinjen. (Hvis du ikke har installert RubyGems ennå, gjør du det ved å følge instruksjonene her før du kjører disse kommandoene. Du kan sjekke om du har installert RubyGems ved å kjøre hvilken perle fra kommandolinjen, som vil søke etter perle kjørbart program som brukes til å installere edelstener.)
perle installasjon jekyll gem installasjonspakker
Dette vil trekke ned Jekyll og Bundler-perlene, og lagre dem på et sted på datamaskinen din, som Ruby automatisk bruker som sitt bibliotek av sorter, kalt en "gemset". Jekyll er den kraftige statiske siden generator bak Octopress; Bundler er et perle installasjonsspesifikasjonsformat som gjør perleavhengighet enklere å tilfredsstille. Med andre ord kan du liste ut edelstenene du trenger i en enkel fil kalt Gemfile, og løp bunt installasjon i samme katalog for å få alle edelstenene oppført (i stedet for å installere dem for hånd en om gangen).
Først vil du ønsker å trekke ned Octopress i en katalog som du vil beholde nettstedet ditt. I motsetning til de fleste database-drevne nettsteder, vil ditt live-nettsted generelt speile ditt lokale nettsted, i innhold og i presentasjon. Vi vil kopiere det eksterne git-repository til en mappe med navnet "mysite" i webområdet Nettsteder. (Dette er en god standard, spesielt for Mac-brukere.)
cd ~ / Nettsteder git klon git: //github.com/imathis/octopress.git mysite
Etter at dette er gjort, vil du endre til katalogen og installere bunten.
cd mysite bundle installasjon
Dette vil installere en samling av perler, hvis du ikke har dem installert på maskinen din.
Kataloginnholdet ditt bør se slik ut, på dette tidspunktet ... Deretter vil du installere standard Octopress-temaet.
rake installasjon
Ditt kataloginnhold, pluss temafilene Verdt å vite: Rake er en Ruby script runner. Den leser fra en "Rakefile", som inneholder instruksjoner for rake kommando.
Octopress-siden har en grundig oversikt over bloggkonfigurasjonene, som finnes i _config.yml. Sjekk det ut her. Her er et eksempel:
url: http://myblog.com title: My Super Blog-undertekst: En blogg som er superforfatter: Jonathan Cutrell simple_search: http://google.com/search beskrivelse: Et nettsted dedikert til å forklare hvordan Octopress fungerer. date_format: "ordinal" subscribe_rss: /atom.xml # dette er standard # subscribe_email: --- vi har ikke en for nå. category_feeds: # Aktiver per kategori RSS-feeder (standard som falsk i 2.1) e-post: # E-postadresse for RSS-feed hvis du vil ha det.
Det finnes også en rekke plugins tilgjengelig, og en haug flere konfigurasjoner for Jekyll som er valgfrie; Vi kommer ikke til å dekke alt, da vi bare prøver å gå av bakken og løpe.
Tredjepartsinnstillingene er tilgjengelige for å bli fylt ut i _config.yml fil; Disse evalueres på det tidspunktet nettstedet er kompilert og tillater enkel integrasjon med eksterne tjenester. For eksempel, her er en enkel GitHub integrasjon:
# Github repositories github_user: jcutrell github_repo_count: 14 github_show_profile_link: true github_skip_forks: true
Merk: alt dette er allerede lagt til i _config.yml filen; bare fyll det ut for å dra nytte av innebygde funksjoner.
Flink! Du kan komme i gang veldig raskt å skrive et innlegg. Syntaxen for å lage et innlegg (per docs) er enkelt:
rake new_post ["Some Awesome Title"]
Merk: hvis du bruker ZSH, må du sjekke denne reparasjonen på GitHub, og legge til et alias til din zshrc-fil.
mysite / kilde / _posts / 2013-03-27-noen-awesome-title.markdown Dette skaper en fil for innlegget ditt i din Kilde / _posts katalogen. Som standard vil posten bli opprettet som en markdown-fil. Navnet på innlegget vil definere url (dette er en god ting for SEO, forresten). Hvis du navigerer til den nylig opprettede filen, vil du se noen standard YAML-frontmateriell. Her kan du legge til en eller flere kategorier. For eksempel:
--- layout: post tittel: "Some Awesome Title" dato: 2013-03-21 00:11 kommentarer: sanne kategorier: [Awesome, Amazing, Beautiful, Cool] ---
Du kan deretter legge til innholdet ditt under forsiden.
For å se ditt nye blogginnlegg, først løp rake forhåndsvisning, pek deretter nettleseren din til localhost: 4000. Dette vil vise innlegget ditt på indekssiden!
Klikk rundt grensesnittet for å få en følelse for grensesnittet og dens funksjoner. Merk: Standard temaet er responsivt! På svært kort tid har du fått en statisk blogg som kjører.
For å lage en side (i stedet for et innlegg), kjør noe som følger.
rake new_page [om]
mysite / kilde / om / index.markdown Dette skaper en side på kilde / om / index.markdown. Du kan også kjøre:
rake new_page [about / index.html]
Hvilken vil velge .html filtype i stedet for markdown. På denne siden kan du gjøre endringer på samme måte som innlegg.
Når du oppretter et innlegg, kan du koble det direkte til en ekstern side, som ligner sidelinkene til Wordpress-plugin (men mye mindre komplisert)! Bare sett inn frontmateriellet for å inkludere følgende:
ekstern-url: http://yourexternallink.com
Et annet stort spørsmål. Du er på rulle.
Som sagt tidligere, er alt som en nettleser leser HTML, CSS og JavaScript (gitt at du ikke bruker Flash eller annen ekstern teknologi). Når du stoler på en serverorientert implementering, kan HTML, CSS og JavaScript endres når brukeren laster inn siden. forespørselen til serveren kjører noen kode til lage HTML på fly basert på hva koden returnerer.
For eksempel, med et nettsted som Wordpress, peker linkene til sider og innlegg på weboppsett som trekker den riktige informasjonen fra MySQL-databasen når brukeren får tilgang til nettstedet.
Octopress (og nærmere bestemt Jekyll) går gjennom en veldig lignende prosess, men i stedet for å gjøre det på forespørsel, gjør de det bare en gang, på din lokale datamaskin.
Slik fungerer det. Det er tre grunnleggende deler til et Jekyll-område: konfigurasjonen, layoutene / inkluderer, og innleggene / sidene. Hvis du kommer fra Wordpress-verdenen, kan disse kartlegges til alternativene, temafilene og databasen, henholdsvis (med noen uklare linjer her og der).
Når Jekyll går gjennom prosessen med å generere nettstedet, starter det på indeksfilen, og bygger alle koblede sider definert av layoutene. Gjennom utbyggingen bruker Jekyll konfigurasjoner definert av _config.yml fil, samt YAML-fronten i innlegg, sider og layouter. Jekyll bruker statiske innlegg og sidefiler som en samling av tallrike objekter, og fyller innhold i alle tilknyttede layouter.
Det endelige resultatet er et vedlikeholdbart, DRY sett med kildefiler i kilde katalog og enhetlig generert statisk innhold i offentlig katalog.
Den offentlige mappen vil bli fylt med hver side på nettstedet. Dette betyr at når som helst du ser en side, enten det er en paginert innleggliste, en 404 eller en om side, er det faktisk en enkelt HTML-side som du direkte kan se i den offentlige mappen.
En rask titt gjennom den offentlige mappen vil vise deg ganske mange ting. For det første kan katalogstrukturen lett navigeres, da en standard Apache-drevet statisk server ville tjene på en URL som tilsvarer katalogstrukturen. Den andre observasjonen er at noen av de to to HTML-filene i stor grad har meget lignende innhold; Dette er et resultat av innholdet i duplisert topptekst, bunntekst og sidebar hentet fra oppsett og inkluderer, som er helt akseptabelt. Grunnen til at det er helt akseptabelt, er enkelt: innholdet i den offentlige katalogen administreres ikke direkte av deg, men heller gjennom programmatiske handlinger, og derfor er DRY ikke aktuelt, da dette ikke påvirker vedlikeholdbarheten eller ytelsen til nettstedet selv marginalt.
Som designer vil dette være den delen du har ventet på.
Octopress er sikkert bygget med blogger i tankene; med noen veldig direkte informasjon om hvordan du skal endre temaet, har de forklart hvordan du bruker filene som finnes i kilde / custom i denne veiledningen. Den lange og korte av det: Octopress er laget for å passe blogginnlegg og sider, og tilpasset innhold for sidebar og bunntekst. Du kan imidlertid enkelt utvide sidefeltet. Det støttede mønsteret er å lage en ny html-fil inni kilde / custom / asides / med innhold som følger dette formatet:
En slags tittel
Foo, bar
Du kan også enkelt endre topptekst og bunntekst i kilde / custom. Dette gjør det enkelt å legge inn flere JS / CSS-filer, endre eller fjerne standard Google-fonter, osv.
Octopress er bygget med SCSS. Designet kan endres / overstyres ved hjelp av sass / custom / _styles.scss fil. Denne filen er inkludert sist. For å virkelig forstå hvordan du skal style Octopress, skjønt, må vi først dykke inn i kjernemaler.
Merk: Ikke endre kjernemalerne med mindre du er helt sikker på hva du gjør, eller du er klar til å bryte noe. Dette er filene som definerer den endelige bygningen av det statiske nettstedet ditt!
Octopress kommer med muligheten til å enkelt bytte temaer; Effektive kopier av kildekatalogen. I .temaer katalog, vi ser det "klassiske" temaet, som ble installert da vi kjørte rake installasjon. Kildefilene for temaet kopieres til toppnivåkatalogen og brukes til å bygge det statiske nettstedet.
I kildemappen kan vi se noen åpenbare temamapper.
Filene inne i mappen _layouts definerer de vanlige oppsettene for innlegg, sider, kategoriindekser og "standard", som er en tilbakebetalsmal for å fange alt som ikke er en av de tre første. Mappen _partials tillater bare delvise deler av filer, som navigasjonen eller bare artikkelen, å bli inkludert på egenhånd. Disse filene er flytende HTML-maler, som tillater at data sendes inn. Disse dataene kommer fra YAML-fremstilt sett på forskjellige steder over hele nettstedet. For eksempel, vurder væskekoden fra _partials / article.html under.
% hvis site.disqus_short_name og page.comments! = false og post.comments! = false og site.disqus_show_comment_count == true% | Kommentarer % endif%
Denne taggen sier følgende:
Hvis brukeren har angitt kortnavnet på hovedstedet, og kommentarer er aktivert for denne siden eller innlegget, og nettstedet er konfigurert til å vise disqus-kommentartellingen, så ekkot ut linken på neste linje. Lenken vil peke på root_url pluss post.url hvis vi er på indekssiden; ellers vil det peke direkte til #disqus_thread, en div som holder kommentarene.
Forstå dette, vi kan forstå hvordan du finner og restyler eller refactor visse deler av nettstedet. For eksempel, hvis vi ønsket å legge til en klasse i innlegg som er direkte eksterne lenker, kan vi gjøre noe slikt.
% hvis page.external-link eller post.external-link%innhold | utdrag% else%innhold | utdrag% slutt om %
Dette kontrollerer bare for å se om page.external-link eller post external-link eksisterer. Hvis de gjør det, legger vi til en ekstra div til div.entry-innhold element. Det er mye du kan dra nytte av med enkel YAML front-matter konfigurasjon. Pass på å eksperimentere og komme opp med nye løsninger på nye problemer!
Det er så mye mer kraft i Octopress! Ta en titt på den detaljerte dokumentasjonen, og ikke gå glipp av denne omfattende listen med Octopress-plugins fra tredjeparter. Med nesten seksti plugins kan integrering med tredjepartstjenester løse mange vanlige implementeringsforespørsler og problemer.
Kommenter nedenfor med ideer for hvilke andre funksjoner du vil dekke, også! Og husk, den beste måten å lære er å få hendene skitne. Gå inn i dokumentene og koden; bryte ting, og fikse dem. Lær mens du går!
Har du problemer med å forstå? Trenger du mer veiledning, eller ser etter noen å se på koden din og peker på hvor alt gikk galt? Tuts + er et flott sted å være! Vi har alle vært der, så vær ikke sjenert. Sett dine problemer i kommentarene! Hvis du føler deg generøs, og du ser noen som har et problem i kommentar-tråden, er du velkommen til å hjelpe dem ut!
Accentsconagua