Hur man skapar en statisk blogg med hjälp av kaktus [OS X]

Uppdatering: Cactus app har blivit avbruten.

Om du inte behöver ett CMS och föredrar att bara få en statisk webbplats eller blogg, är Jekyll ett bra verktyg för att ta chans med. Om du föredrar ett verktyg med en GUI, snarare än att arbeta med kommandoradsverktyg, kanske du vill kolla in Kaktus.

Kaktus är en fri statisk platsgenerator utrustad med kraftfulla verktyg som kan hjälpa dig bygga webbplatser lokalt, snabbare och enklare med modern webbteknik. Det ger dig en utgångspunkt i ditt projekt med 4 förutformade mallar så att du kan slå marken igång.

När du arbetar med ditt projekt kommer Cactus att övervaka alla förändringar du gör på ditt projekt och uppdatera automatiskt webbläsaren så du kan se ändringarna omedelbart på din Mac eller mobilenhet. Den stöder också SASS / SCSS och Coffescript ut ur rutan, så varje ändring på den här filen skapas också automatiskt.

Komma igång

Först och främst behöver du ladda ner Cactus från sin hemsida och kör sedan installationen. När du är klar, öppna den, så kommer du att se fyra knappar: Skapa, distribuera, redigera och förhandsgranska.

För att skapa ett nytt projekt, klicka på Skapa. Du kommer att se 4 mallar tillgängliga där. För den här handledningen går vi med Blog-mallen. Klick Skapa.

Du kommer att bli ombedd att ge namnet på ditt projekt och välj platsen där projektet finns. Här ger jag namn “Min fantastiska blogg” för projektet. Därefter ser du ditt projekt redan i Cactus.

Ändra filer

Det genererade projektet som använder Blog-mall finns nu på din Finder. Vi kommer nu att inspektera de element som krävs för att bygga vår blogg. Gå över till katalogen där dina filer hålls. De viktigaste katalogerna vi ska använda är mallar, sidor, och Statisk katalogen. Låt oss hoppa över de andra för tillfället.

För att hålla sakerna korta, här är vad varje katalog är för:

• mallar: Innehåller HTML-filer som fungerar som mall, som används av HTML-filer på sidor att bygga på.
• sidor: Innehåller alla HTML-filer som blir en sida med samma sökväg. till exempel: hej.html här blir http://yoursite.com/hello.html
• Statisk: Innehåller alla statiska resurser som CSS, Javascript och bilder.

Nu ska vi redigera tre huvudfiler från katalogerna: base.html och post.html i katalogen Mallar och index.html i katalogen Sidor.

Kaktusanvändning Django Template Engine för templerande språket. Med detta kan du inkludera HTML-element från andra HTML-filer, så du behöver inte duplicera koder. De funktioner som används mest här är mallarv och variabel.

För att se hur de fungerar, öppna först base.html på mallkatalogen.

             % block content% Huvudinnehåll % endblock content% ---   

base.html är den enkla html-filen som vi använder som skelettmall. Den innehåller gemensamma delar av vår webbplats. Du kan se lite “block” där inne; Vi använder barnmallen för att åsidosätta dessa block.

Öppna nu post.html ligger i samma katalog med base.html.

 % utökar "base.html"% % block title% title | Cactus % endblock title% % block content% --- 
 
title
 
rubrik 
 
 
 % block body% Det här är postinnehållet. % endblock body% 
 --- % endblock content% 

De post.html innehåller markeringen för vår blogginmatningssida. Vid första raden kan du se det post.html sträcker sig base.html. Det betyder att vi kommer att åsidosätta blocken på base.html med blocken här.

Vi kan också hitta variabler här, till exempel title och rubrik. Vi kommer att definiera värdena för dessa variabler i bloggposterna senare.

Nu kan vi titta på % block body% blockera. Detta kommer att överskridas av barnmallen som innehåller posterna i vår blogg.

Gå till katalogen sidor / inlägg. Här är resten av våra postposter.

 rubrik: Mitt inläggsrubrikrubrik: Mitt inlägg Författare: Agus datum: 15-01-2015 % sträcker sig "post.html"% % block body% % filtermarkdown% Lösenord är inte tillåtet elit. Earum, perferendis inventore dolorem rerum et tempora sint nemo illum ab saepe, assumenda, amet illo deliti officis, voluptatem maxime atque vero sunt. --- % endfilter% % endblock body% 

I postposterna ger vi värdet till variabeln, som titel, rubrik, författare och datum. Detta värde kommer att passera när vi ringer variabelnamnet på modermallen. Sedan skriver vi innehållet i vår blogg med Markdown.

Nu går vi till indexsidan i vår blogg, öppen index.html i sidor katalogen. Den innehåller listan över våra blogginlägg och länken till varje post. Huvudkoden ser ut som nedan:

 % utökar "base.html"% % block content% -- 
 % för inlägg i inlägg% 
   Post titel  
post.headline 
 % endfor% 
 -- % endblock content% 

Vid denna tidpunkt har vi en enkel blogg med två huvudsidor, index sida som innehåller blogginlägg och blogginmatningssida sig.

Gå till kaktusfönstret och klicka på förhandsgranskningsknappen för att starta servern. Den öppnar automatiskt webbläsaren och öppnar din webbplats.

Styling bloggen med SCSS

En bra funktion av Cactus är att det fungerar med SASS / SCSS ur lådan. Bara släpp dina .sass eller .scss-filer in i statisk katalog och varje gång du redigerar och sparar filerna, kommer Cactus automatiskt att generera CSS.

Här kommer jag att ge ett exempel med bootstrap-sass att styling vår blogg. Förutsatt att du använder bower, öppna terminalen och navigera till statisk katalog över vårt projekt med CD kommando. Installera sedan bootstrap-sass med det här kommandot:

$ bower installera bootstrap-sass-tjänsteman

När nedladdningen är klar kommer du att se en bower_components katalog i den statiska katalogen som innehåller bootstrap-sass-officiell.

Gå nu till den här katalogen: statisk / css. Skapa scss-filen, ge den namnet syle-bs.scss och sätt in den här koden.

 @import "... / bower_components / bootstrap-sass-official / assets / stylesheets / _bootstrap"; 

Vad koden gör är att det importerar allt från bootstrap-sass. När du har sparat stil-bs.scss kommer du att se stil-bs.css som genereras i samma katalog som innehåller alla stilar från bootstrap.

Distribuera ditt projekt

Slutligen, när ditt projekt är klart, kan du enkelt distribuera ditt projekt till den levande versionen använder Amazon S3.