Share
Octopress är ett statiskt bloggaringsramverk byggt på toppen av Jekyll. Den använder skript för att bygga statiska filer som ska distribueras till en server.
... vi kommer att förklara allt här. Men om du aldrig har rört kommandoraden kanske du vill ha en liten primer först. Kolla in denna guide, som förklarar några grundläggande kommandon och funktioner.
Webbläsare läser HTML, CSS och JavaScript inbyggt. Alla andra språk används för att generera dessa tre typer av filer. Statiska webbplatser skapas från hårdkodade statiska filer som inte är beroende av några serverprocesser (till skillnad från PHP eller andra genererade sidor). Jekyll, den underliggande ramen, beror istället på innehållsredaktörens lokala miljö för att generera de statiska filerna som så småningom kommer att distribueras.
Säg att du till exempel har fem blogginlägg i din Wordpress-blogg. När du besöker http://yoursite.com visas utdrag ur dessa fem inlägg på din hemsida. Du klickar på en länk för att ta dig till hela inläggssidan. Var och en av dessa sidor serveras i din webbläsare som HTML, utformad av CSS; Du kanske eller inte har JavaScript som hjälper till att definiera några interaktiva beteenden.
Sidorna på din Wordpress-drivna blogg är byggda på flugan; databasfrågor körs för att få olika bitar, till exempel titel, innehåll eller permalink. Dessa returneras sedan och behandlas av PHP för varje förfrågan (förutsatt att du inte har ett cacheplugin installerat).
Med Jekyll är sakerna annorlunda.
Glad att du frågade. Jekyll gör allt detta på din dator, innan filerna går upp till servern. Den läser några lokala konfigurationer och mallar, sedan bygger alla HTML, CSS och JavaScript direkt på din lokala maskin, så servern behöver inte. Detta gör din serveradministration mycket enklare, säkrare och snabbare.
Det finns några svar på den frågan. Här är tre:
Så vilka problem löser inte detta tillvägagångssätt? Tja, för en, om din webbplats är beroende av användardefinierade data, genererar statiskt genererade webbplatser totalt sett inte mycket utrymme för det. Självklart, om du bara lita på en databas för kommentarer, kan du enkelt ladda ner det till något som Disqus. Om du lita på levande data som inte kan dras på fronten via JavaScript, är de statiska platserna förmodligen inte anpassade till dina krav.
Det bästa fallet: bloggar eller innehållscentrerade webbplatser som webbutvecklare upprätthåller. Du kanske har fångat det med Octopress tagline, "En bloggram för hackare."
webuild.envato.com - byggd med Octopress, underhållen av Envato dev team Eftersom du kommer att göra lite milt arbete i terminalen är Octopress och Jekyll vanligtvis inte lämpade för en icke-tekniskt inriktad innehållsskapare. Men om du är villig att spendera tillräckligt med tid för att läsa det här inlägget, kommer du att vara väl lämpad för en Octopress-driven webbplats.
Förstå att vad alla dina användare ser är HTML, CSS och JavaScript är den verkliga hemligheten på webben. Därför behöver du inte prova din Octopress-webbplats lokalt utan Apache, PHP eller MySQL-serverinstallationer. Allt du behöver är en webbläsare som kan köra lokala filer.
Varje bra sak kommer med ett pris; Du måste ha Ruby version 1.9.3, plus Jekyll och Bundler Ruby Gems installerade, liksom Git. (Även om Git inte nödvändigtvis krävs, kan det också vara.) När dessa bitar är installerade är du redo att hoppa in i utvecklingen. För att installera Git, gå här.
Anvisningarna som följer är för Mac; liknande kommandon kan hittas för Windows genom en Ruby-versionshanterare för Windows-kallade Pik.
Kontrollera först för att se vilken version av Ruby du har installerat på datorn genom att köra rubin -v. Om versionen inte är 1.9.3, fortsätt med dessa instruktioner. Du kan hoppa över till "Tricky Part Number 2: Gems" om du redan har 1.9.3.
Installera Ruby version 1.9.3 är relativt enkelt uppnås med hjälp av RVM. RVM eller Ruby Version Manager kan du installera flera versioner av Ruby på ditt system utan att behöva radera tidigare versioner. Snabbinstallationsanvisningarna för RVM och Ruby 1.9.3 är följande:
\ curl -L https://get.rvm.io | bash -s stable --ruby = 1.9.3
Notera: om du har problem relaterade till gcc (eller "gnu-kompilatorns samling", som behövs för att bygga Ruby från källan) kan det hjälpa till att köra följande kommandon istället.
\ curl -L https://get.rvm.io | bash -s stabila CFLAGS = "- Wno-error = shorten-64-to-32" rvm installera ruby-1.9.3-p392
Alternativt kan installationen av XCode hjälpa till att lösa många problem för Mac-användare relaterade till GCC. Kolla in den här tråden på GitHub för mer information om ämnet.
För att försäkra dig om att Ruby 1.9.3 har installerats, kör rvm lista. När denna process är klar kan du köra följande för att ställa in systemets standardversion av rubin till 1.9.3:
rvm - standard användning 1.9.3
För att kontrollera och kontrollera att 1.9.3 har valts, kan du springa igen rubin -v. Detta kommer att skriva ut den aktuella Ruby-versionen.
RubyGems är en kodpaketchef för Ruby-programmeringsspråket, och en av de främsta orsakerna Ruby's community har fått rykte om att vara hjälpsam och enhetlig. Det gör det möjligt för användare att enkelt installera paket med öppen källkod direkt från kommandoraden. Dessa pärlor lagras på officiella förvaringsplatser.
För att installera Ruby-ädelstenarna, kör följande kommandon från kommandoraden. (Om du inte har installerat RubyGems, gör du det genom att följa anvisningarna här innan du kör dessa kommandon. Du kan kontrollera om du har installerat RubyGems genom att springa vilken pärla från kommandoraden, som kommer att söka efter pärla körbart program som används för att installera ädelstenar.)
pjäs installera jekyll pärla installeringsbuntaren
Detta kommer att dra ner Jekyll och Bundler-ädelstenarna och lagra dem på en plats på din dator som Ruby automatiskt använder som sitt bibliotek av sorter, kallad "gemset". Jekyll är den kraftfulla statiska platsgeneratorn bakom Octopress; Bundler är ett format för pärla installationsspecifikation som gör att gemstöd beror lättare på. Med andra ord kan du lista ut de ädelstenar du behöver i en enkel fil som heter Gemfile, och springa buntinstallation i samma katalog för att få alla smycken listade (istället för att installera dem manuellt en i taget).
Först vill du dra ner Octopress i en katalog som du kommer att behålla din webbplats. Till skillnad från de flesta databasdrivna webbplatser kommer din levande webbplats generellt att spegla din lokala webbplats, innehåll och presentation. Vi kommer att kopiera fjärrgitförvaret till en mapp med namnet "mysite" i mappen Sites. (Det här är en bra standard, särskilt för Mac-användare.)
cd ~ / Sites git klon git: //github.com/imathis/octopress.git mysite
När det här är gjort, vill du byta till katalogen och installera buntet.
cd mysite-buntinstallation
Det här installerar en samling ädelstenar om du inte har dem installerade på din maskin för närvarande.
Ditt kataloginnehåll ska se ut så här, just nu Därefter vill du installera standard Octopress-temat.
rakeinstallation
Ditt kataloginnehåll, plus temafilerna Värt att veta: Räfsa är en Ruby skriptlöpare. Det läser från en "Rakefile", som innehåller instruktioner för räfsa kommando.
Octopress-webbplatsen har en grundlig översikt över bloggkonfigurationerna, som finns i _config.yml. Kolla in det här. Här är ett exempel:
url: http://myblog.com title: My Super Blog textning: En blogg som är super författare: Jonathan Cutrell simple_search: http://google.com/search description: En webbplats dedikerad till att förklara hur Octopress fungerar. date_format: "ordinal" subscribe_rss: /atom.xml # det här är standard # subscribe_email: --- vi har inte en för nu. category_feeds: # Aktivera per kategori RSS-flöden (standardvärden till falskt i 2.1) e-post: # E-postadress för RSS-flödet om du vill ha det.
Det finns också ett antal plugins tillgängliga och en massa fler konfigurationer för Jekyll som är valfria; vi kommer inte att täcka allt, eftersom vi bara försöker att komma ur marken och springa.
Tredjepartsinställningarna är tillgängliga att fyllas i i _config.yml fil; Dessa utvärderas när webbplatsen sammanställs och möjliggör enkel integration med externa tjänster. Till exempel, här är en enkel GitHub-integration:
# Github repositories github_user: jcutrell github_repo_count: 14 github_show_profile_link: true github_skip_forks: true
Notera: allt detta har redan lagts till i _config.yml-filen; helt enkelt fylla i det för att dra nytta av inbyggda funktioner.
Bra! Du kan börja mycket snabbt skriva ett inlägg. Syntaxen för att skapa ett inlägg (per docs) är enkelt:
rake new_post ["Some awesome title"]
Notera: Om du använder ZSH måste du kolla här fixa på GitHub och lägga till ett alias till din zshrc-fil.
mysite / source / _posts / 2013/03/27-some-awesome-title.markdown Detta skapar en fil för ditt inlägg i din source / _posts katalogen. Som standard kommer posten att skapas som en markdown-fil. Namnet på posten definierar webbadressen (det här är en bra sak för SEO, förresten). Om du navigerar till den nyskapade filen ser du några vanliga YAML-frontmaterial. Här kan du lägga till en eller flera kategorier. Till exempel:
--- layout: post titel: "Some Awesome Title" datum: 2013-03-21 00:11 kommentarer: sanna kategorier: [Awesome, Amazing, Beautiful, Cool] ---
Du kan sedan lägga till ditt innehåll under den främre delen.
För att se ditt nya blogginlägg, kör först rake förhandsvisning, Peka sedan din webbläsare på localhost: 4000. Detta visar ditt inlägg på indexsidan!
Klicka runt gränssnittet för att få en känsla för gränssnittet och dess funktioner. Obs! Standardtemat är responsivt! På väldigt lite tid har du fått en statisk blogg som körs.
För att skapa en sida (snarare än ett inlägg), kör något som följande.
rake new_page [om]
mysite / source / ca / index.markdown Detta skapar en sida på källa / ca / index.markdown. Du kan också köra:
rake new_page [about / index.html]
Vilket ska välja .html filtyp istället för markdown. På den här sidan kan du göra ändringar på samma sätt som inlägg.
När du skapar ett inlägg kan du länka det direkt till en extern sida, som liknar sidlänkarna till Wordpress-plugin (men mycket mindre komplicerat)! Ställ helt enkelt framämnet yaml för att inkludera följande:
extern-url: http://yourexternallink.com
En annan stor fråga. Du är på rulle.
Som vi sagt tidigare är allt som en webbläsare läser HTML, CSS och JavaScript (förutsatt att du inte använder Flash eller någon annan extern teknik). När du bygger på en serverinriktad implementering kan HTML, CSS och JavaScript ändras när användaren laddar sidan. begäran till servern körs någon kod till skapa HTML i flygningen baserat på vad koden returnerar.
Till exempel, med en webbplats som Wordpress, länkar länkarna till sidor och inlägg till webblayouter som drar den rätta informationen från MySQL-databasen när användaren åtkomst till webbplatsen.
Octopress (och mer specifikt Jekyll) går igenom en mycket liknande process, men istället för att göra det på begäran gör de det bara en gång, på din lokala dator.
Så här fungerar det. Det finns tre grundläggande delar till en Jekyll-plats: konfigurationen, layouterna / innehåller och inläggen / sidorna. Om du kommer från Wordpress-världen kan dessa kartläggas till alternativen, temafilerna och databasen (med några suddiga linjer här och där).
När Jekyll går igenom processen för att generera sajten börjar den i indexfilen och bygger alla länkade sidor som definieras av layouterna. Under hela byggnaden använder Jekyll konfigurationer definierade av _config.yml fil, samt YAML-frågan i inlägg, sidor och layouter. Jekyll använder den statiska posten och sidfilerna som en samling av uppräknade objekt och fyller innehåll i alla associerade layouter.
Slutresultatet är en underhållbar, DRY uppsättning källfiler i källa katalog och enhetligt genererat statiskt innehåll i offentlig katalog.
Den offentliga mappen kommer att fyllas med varje sida på webbplatsen. Det innebär att varje gång du ser vilken sida som helst, oavsett om det är en paginerad lista med inlägg, en 404 eller en sida, är det faktiskt en enda HTML-sida som du direkt kan se i den offentliga mappen.
En snabb titt genom den allmänna mappen visar dig en hel del saker. Först är katalogstrukturen lätt att navigera, eftersom en standard Apache-driven statisk server skulle fungera i en URL-adress som motsvarar katalogstrukturen. Den andra observationen är att alla givna två HTML-filer i stort sett har mycket liknande innehåll. Detta är ett resultat av dubbletterhuvudet, sidfotfältet och sidfältet som dras från layouter och innefattar, vilket är helt acceptabelt. Anledningen till att det är helt acceptabelt är enkelt: innehållet i den offentliga katalogen hanteras inte direkt av dig, utan snarare genom programmatiska åtgärder, och därför är DRY inte tillämpligt, eftersom detta inte påverkar webbplatsens underhållbarhet eller prestanda marginellt.
Som designer kommer det att vara den del du har väntat på.
Octopress är verkligen byggd med bloggaren i åtanke; med lite mycket direkt information om hur du ska ändra temaet, har de förklarat hur man använder filerna som finns i källa / anpassade i den här guiden. Den långa och korta: Octopress är gjord för att passa blogginlägg och sidor och anpassat innehåll för sidofältet och sidfoten. Du kan dock enkelt utöka sidofältet. Det stödda mönstret är att skapa en ny html-fil inuti source / anpassade / asides / med innehåll som följer detta format:
Någon slags titel
Foo bar
Du kan också enkelt ändra rubriken och sidfoten källa / anpassade. Det gör det enkelt att lägga till fler JS / CSS-filer, ändra eller ta bort standard Google-teckensnitt etc..
Octopress är byggd med SCSS. Designen kan modifieras / överskridas med hjälp av sass / anpassade / _styles.scss fil. Den här filen ingår senast. För att verkligen förstå hur man stilar Octopress, måste vi först dyka in i kärnmallarna.
Notera: Ändra inte kärnmallarna om du inte är helt säker på vad du gör, eller du är redo att bryta något. Det här är de filer som definierar den slutliga byggnaden på din statiska webbplats!
Octopress kommer med möjligheten att enkelt byta teman; effektivt kopior av källkatalogen. I .teman katalog ser vi det "klassiska" temat som installerades när vi sprang rakeinstallation. Källfilerna för temat kopieras till toppnivåkatalogen och används för att bygga den statiska webbplatsen.
Inom källkatalogen kan vi se några uppenbara temapapper.
Filerna i mappen _layouts definierar de gemensamma layouterna av inlägg, sidor, kategorin index och "default", vilket är en backback-mall för att fånga allt som inte är en av de tre första. Mappen _partials tillåter att endast delar av filer, som navigering eller bara artikeln, inkluderas på egen hand. Dessa filer är flytande HTML-mallar som tillåter att data skickas in. Dessa data kommer från YAML-frågan som ställts in på olika ställen över hela webbplatsen. Tänk exempelvis på den flytande taggen från _partials / article.html Nedan.
% om site.disqus_short_name och page.comments! = false och post.comments! = false och site.disqus_show_comment_count == true% | Kommentarer % endif%
Den här taggen säger följande:
Om användaren har ställt in kortnamnet för disqus på huvudsidans konfiguration, och kommentarer är aktiverade för den här sidan eller posten, och webbplatsen är konfigurerad för att visa disqus-kommentarräkningen, echo sedan länken på nästa rad. Länken kommer att peka på root_url plus post.url om vi är på indexsidan; annars kommer det att peka direkt på #disqus_thread, en div som håller kommentarerna.
Förstå detta, vi kan förstå hur man hittar och restylar eller refactor vissa delar av webbplatsen. Om vi till exempel vill lägga till en klass i inlägg som är direkta externa länkar, kan vi göra något så här.
% om page.external-link eller post external-link%innehåll | utdrag% else%innehåll | utdrag% endif%
Detta kontrollerar helt enkelt för att se om sidan extern länk eller post extern länk finns. Om de gör det lägger vi till en extra div till div.entry-innehåll element. Det finns mycket du kan dra nytta av med en enkel YAML frontmateriell konfiguration. Var noga med att experimentera och komma med nya lösningar på nya problem!
Det finns så mycket mer kraft i Octopress! Kolla in den fullständigt detaljerade dokumentationen och missa inte den här omfattande listan med Octopress plugins från tredje part. med nästan sextio plugins kan integrering med tredjepartstjänster lösa många vanliga implementeringsförfrågningar och problem.
Kommentera nedan med idéer för vilka andra funktioner du vill täcka, liksom! Och kom ihåg, det bästa sättet att lära sig är att få dina händer smutsiga. Gå in i docs och koden; bryta saker och fixa dem sedan. Lär dig när du går!
Har du frågor om förståelse? Behöver du mer vägledning, eller letar efter någon att titta på din kod och peka på var allt gick fel? Tuts + är ett bra ställe att vara! Vi har alla varit där, så var inte blyg. Sätt dina problem i kommentarerna! Om du känner dig generös och du ser att någon har problem i kommentartråden, kan du hjälpa dem!
Accentsconagua