Du har nog hört talas om Spöke , den nya ish-bloggarplattformen som tagit bloggarvärlden med storm; det är enkelt, det är snyggt, det är sexigt; Det har det som live-preview-sak. Vad finns det att inte gilla?

Jag flytta till Spöke , som många webbdesigners, från en WordPress-bakgrund. Men innan jag faktiskt lyckades bryta mitt huvud runt Wordpress 'mallfunktioner, hade jag försökt dussintals, kanske hundratals, av CMS-alternativ. Några av de mer minnesvärda inkluderar Expression , Textpattern , de misshandlade FrogCMS , ett gammalt gammalt skript som heter CuteNews , och många fler.

Under lång tid gav WordPress mig allt jag behövde: kraftfulla mallfunktioner; en ändlös tillförsel av plugins; bara se vad jag kunde göra.

Men WordPress har varit en heck av mycket mer än en blogging motor för en tid nu. Det rör sig stadigt mot ramverket på vissa sätt. En publiceringsram, om du vill.

Jag har nått den punkt där jag vill ha mjukvara som bloggar, och det är det. Jag vill skriva mina inlägg i Prissänkning , skriv in några nyckelord, lägg till en bild eller två och tryck på publicera, glöm det hela.

Ange Ghost

Visar sig att jag inte är ensam i min önskan om en dödlig bloggplattform. Skaparna bakom Ghost har gått i stor utsträckning för att räkna ut allt som vi har lagt till bloggaringsprocessen och bygga en enkel och snabb publiceringsplattform som kommer att få jobbet gjort. Det är ett helt annat odjur.

Det fungerar på filosofin att ett CMS för blogging ska göra en sak och göra det bra. Du kommer inte se några tidningar som startas på denna plattform utan mycket anpassning. Det är en blogg, och omvandling till något annat skulle kunna besegra sitt syfte.

Då är det faktum att det är byggt på ny teknik. Ghost är byggt på Node.js , som kör JavaScript-kod på servern i stället för i webbläsaren. Det är älskat av samma personer som älskar PaaS hosting, och alla dessa nya system som människor gillar mig kämpar för att förstå. På ett visst sätt har det varit framtidsskyddat från get-go. Det är en del av den första generationen av en ny ras av CMS.

Tänk på dig, från bloggarens perspektiv, är det bara ett enkelt gränssnitt för bloggar. Från slutanvändarens perspektiv ändras inget riktigt, förutom kanske standardbloggtemat ser lite "platt" ut. Men under huven ser vi något helt nytt, och det är en bra sak.

Installera Ghost (det enkla sättet)

Installera Ghost det enkla sättet.

Vanligtvis måste du installera en komponent eller två separat för att få Ghost installerad och köra på en lokal maskin. Du måste installera Node.js, och då måste du gå in och börja installera några extra Node-paket manuellt från kommandoraden.

Det är rätt, den typiska inställningen för Ghost kräver att du använder kommandoraden. För människor som vanligtvis används för att skriva WordPress med fem minuter med MySQL-databaser och ett grafiskt installationsprogram, kan det vara obekväma.

Det kan vara smärta i nacken om du inte brukar använda kommandoraden på en Mac eller Linux-maskin.

Lyckligtvis, de vänliga människor över på Bitnami gjort grafiska installationsprogram för Windows, Mac och Linux.

Här är alla steg du behöver följa:

  1. Ladda ner det lämpliga installationsprogrammet för ditt operativsystem här: https://bitnami.com/stack/ghost/installer
  2. När du kör installatören, ange följande information: Var du vill installera den, vilken inloggningsinformation du vill använda för bloggen och vilken IP-adress du vill använda för att testa. (Jag rekommenderar 127.0.0.1 .)
  3. Kör saken och börja spela. Den levereras med en cool kontrollpanel och en startmeny post.

Eftersom installationsprogrammet ger dig alla komponenter du behöver, till exempel Node.js och en miniserver, är filkatalogen inte exakt enkel.

Du måste öppna vilken mapp du installerade Ghost in, och sedan navigera till apps / spök / htdocs / . Det är den verkliga Ghost-installationen.

Teman finns i apps / spök / htdocs / content / themes / .

Göra ett tema för Ghost

Ghost-teman är ganska lätt att göra, så länge du vet HTML och CSS. Programmering av kunskap är till hjälp, men inte absolut nödvändigt. Ghosts templerande system är enkelt, och till och med ganska intuitivt, om du har byggt teman för WordP ... ahem, andra CMSs innan.

Jag vet jag vet. Jämförelsen med WordPress är gammal. Men den enda mjukvaran har dominerat marknaden för flera år nu - precis som Photoshop har för bilder - jämförelserna är oundvikliga. I det här fallet är de till och med användbara.

Människor som har byggt WordPress-teman kommer att hitta en del av filstrukturen och templerande språk för att vara bekant, men mycket enklare. WordPress 'PHP-funktioner ger dig mycket flexibilitet; men de komplicerar också temakodningsprocessen.

Ghosts templerande system (byggt med styre ), är semantisk, kraftfull och mycket mer läsbar än de rika PHP-funktionerna som vi brukar arbeta med. Personligen tycker jag bara att det är mycket lättare att använda.

Å andra sidan är det endast avsett för att bygga bloggar. Du kommer inte bygga en hybrid nyhetssajt / socialt nätverk / forum med den här saken. Enklare, men begränsad. Det är den avvägning som är inneboende i hela plattformen.

Skapa ett grundläggande tema för Ghost.

Ställa in ditt tema

Nu, om du har tittat på videon (du borde verkligen), kommer du att känna till de grundläggande grunderna. Du kommer att ha din Ghost-installation i utvecklingsläge, och du har ett mycket, mycket begränsat tema att arbeta med.

För att återskapa, behöver du bara tre filer för att skapa ett Ghost-tema:

index.hbs (This template will list your posts)post.hbs (This will display a single post)package.json (This contains theme information)

Det finns dock andra grundläggande mallar som du förmodligen vill inkludera. Du kan självklart skapa anpassade mallar för sidor, inlägg, författare, taggar och mer. Vi kommer till allt detta med tiden.

För tillfället vill jag bara fokusera på grunderna: temastruktur, utöka mallfiler och var att lägga hela HTML-filen. Det innebär att lägga till några extra filer och mappar till vårt Ghost-tema där uppe. Låt oss ta en titt på den reviderade strukturen:

default.hbsindex.hbspage.hbspost.hbspackage.jsonassets/css/images/javascript/partials/ (Just examples, here. Not required.)navigation.hbsloop.hbs

default.hbs kommer att fungera som grund för ditt tema. Din , , och taggar kommer att gå här. Alla andra mallar kommer att bli gjorda "inuti" av den här. Nu behöver du inte göra det på det här sättet. men det är standard praxis, och kommer starkt rekommenderat av Ghost devs själva.

page.hbs är precis vad du tycker är det, mallen för statiska sidor. Aktivitetsmappen är ganska självförklarande.

Delarna / mappen är där du skulle behålla bitar och bitar av kod som du använder mer än en gång på olika mallar. Till exempel, navigation.hbs kan innehålla ditt sajtnamn / logotyp och primärnavigering. loop.hbs kan skriva ut en lista med inlägg med lite generisk HTML och styling. Detta kan användas på ett antal platser på webbplatsen.

Mixing Handlebars och HTML

Så låt oss visa dig exakt hur enkelt det kan vara. Först ska vi ställa in vår default.hbs- fil:

{{! Here we see the functions for page titles and descriptions. }}{{meta_title}}{{! Anything in the assets/ folder can be easily linked to, like so: }}{{! This function here outputs meta keywords, some styling information, stuff like that. }}{{ghost_head}}
{{! Any .hbs file in the partials folder can be called in like this. }}{{> header}}{{! This is where the content of all the sub-templates will be output. }}{{{body}}}{{! Like ghost_head, this outputs scripts, data, that sort of thing. Currently adds a link to jQuery by default. }}{{ghost_foot}}

Låt oss nu skapa navigerings.hbs- mallen, eftersom det kommer att finnas på varje sida:

Nu ska vi knyta allt tillsammans med index.hbs mallen, som också kommer att fungera som hemsida, om du inte anger något annat. Koden för detta, se hur vi har delat och organiserat det mesta av HTML på annat håll, är väldigt enkelt:

{{!< default}}{{! That isn't a comment up there. It tells Ghost that everything on this page must be rendered inside the default.hbs template.}}
{{! This next function can be used to call in anything in the partials/ folder. In this case, we're calling up everything we just put into "loop.hbs". }}{{> loop}}

Slutsats

Och det är allt. Berättade för dig att det var enkelt!

Om du har problem, kolla in Ghosts standardtema och dokumentation . Spela med HTML, spela med mallsystemet och börja styla ditt tema.

Nästa gång gräver vi lite djupare. Under tiden ha kul!

Utvalda bildanvändningar Ghost bild via Shutterstock.