Sådan opretter du en statisk blog ved hjælp af kaktus [OS X]

Opdatering: Cactus app er blevet afbrudt.

Hvis du ikke kræver et CMS og foretrækker bare at få et statisk websted eller en blog, så er Jekyll et godt værktøj til at tage en chance med. Men hvis du foretrækker et værktøj med en GUI, i stedet for at arbejde med kommandolinjeværktøjer, kan du måske tjekke ud Kaktus.

Kaktus er en gratis statisk site generator udstyret med kraftfulde værktøjer, der kan hjælpe dig opbygge websteder lokalt, hurtigere og lettere med moderne webteknologi. Det giver dig et udgangspunkt i dit projekt med 4 foruddesignede skabeloner, så du kan ramme jorden.

Mens du arbejder på dit projekt, vil Cactus overvåge enhver ændring, du foretager på dit projekt og Opdater automatisk browseren så du kan se ændringerne med det samme på din Mac eller mobilenhed. Den understøtter også SASS / SCSS og Coffescript ud af boksen, så alle ændringer på denne fil genereres også automatisk.

Kom igang

Først og fremmest skal du downloade kaktus fra sin hjemmeside og derefter køre installationen. Når du er færdig, skal du åbne den, du vil se fire knapper: Opret, implementer, rediger og preview-knappen.

For at oprette et nyt projekt skal du klikke på skab. Du vil se 4 skabeloner tilgængelige der. Til denne vejledning går vi med Blog-skabelonen. Klik skab.

Du bliver bedt om at give navnet på dit projekt og vælge den placering, hvor projektet eksisterer. Her giver jeg navn “Min fantastiske blog” til projektet. Derefter vil du se dit projekt allerede i Cactus.

Ændring af filer

Det genererede projekt, der bruger Blog-skabelon, findes nu på din Finder. Vi vil nu inspicere de elementer, der kræves for at opbygge vores blog. Gå over til den mappe, hvor dine filer gemmes. De vigtigste mapper, vi vil bruge er Skabeloner, sider, og Statisk vejviser. Lad os springe over de andre for nu.

For at holde tingene korte, er her hvad hver mappe er til:

• Skabeloner: Indeholder HTML-filer, der opfører sig som skabelon, der bruges af HTML-filer på sider, der skal bygges videre.
• sider: Indeholder alle HTML-filer, der bliver en side med samme sti. fx: hej.html her bliver http://yoursite.com/hello.html
• Statisk: Indeholder alle statiske ressourcer som CSS, Javascript og billeder.

Nu vil vi redigere tre hovedfiler fra katalogerne: base.html og post.html i mappen Mappe og index.html i mappen Sider.

Kaktusbrug Django Template Engine til det templerende sprog. Med dette kan du inkludere HTML-elementer fra andre HTML-filer, så du behøver ikke at duplikere koder. De funktioner der er mest brugt her er skabelon arv og variabel.

For at se, hvordan de virker, skal du først åbne base.html på skabelonmappe.

             % blok indhold% Hovedindhold % endblock indhold% ---   

base.html er den enkle html-fil, som vi bruger som skeletskabelon. Den indeholder fælles elementer på vores hjemmeside. Du kan se nogle “blokke” derinde; Vi bruger børns skabelon til at tilsidesætte disse blokke.

Nu åbner du post.html placeret i samme mappe med base.html.

 % udvider "base.html"% % blok titel% title | Kaktus % endblock title% % blok indhold% --- 
 
title
 
overskrift 
 
 
 % block body% Her er postindholdet. % endblock body% 
 --- % endblock indhold% 

Det post.html indeholder markeringen til vores blog entry page. På første linje kan du se det post.html udvider base.html. Det betyder, at vi vil tilsidesætte blokkene base.html med blokke her.

Vi kan også finde variabler her, f.eks title og overskrift. Vi definerer værdierne for disse variabler i blogposterne senere.

Lad os nu se på % blok krop% blok. Dette vil blive tilsidesat af børns skabelon, der indeholder posterne på vores blog.

Gå til biblioteket sider / indlæg. Her er resten af ​​vores indlæg.

 titel: Mine indlæg Overskrift: Min post Overskrift forfatter: Agus dato: 15-01-2015 % udvider "post.html"% % blok krop% % filter markdown% Læg i gang med at deltage 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 postposterne giver vi værdien til variablen, som titel, overskrift, forfatter og dato. Denne værdi vil passere, når vi kalder variablenavnet på overordnet skabelon. Så skriver vi indholdet af vores blog med Markdown.

Nu vil vi gå til indekssiden af ​​vores blog, åben index.html i sider vejviser. Den indeholder listen over vores blogindlæg og linket til hver post. Hovedkoden ser ud som nedenfor:

 % udvider "base.html"% % blok indhold% -- 
 % for indlæg i indlæg% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock indhold% 

På dette tidspunkt har vi en simpel blog med to hovedsider, den indeksside der indeholder blogindlæg og blog indgangsside sig selv.

Gå til Cactus-vinduet, og klik på preview-knappen for at starte serveren. Den åbner automatisk browseren og åbner dit websted.

Styling bloggen ved hjælp af SCSS

En stor funktion ved kaktus er, at det virker med SASS / SCSS ud af kassen. Lige slip dine .sass eller .scss filer ind i statisk katalog og hver gang du redigerer og gemmer filerne, vil Cactus automatisk generere CSS.

Her vil jeg give et eksempel ved hjælp af bootstrap-sass til styling af vores blog. Forudsat at du bruger bower, åben terminal og naviger til statisk katalog over vores projekt ved hjælp af cd kommando. Installer derefter bootstrap-sass ved hjælp af denne kommando:

$ bower install bootstrap-sass-officielle

Når downloadet er gennemført, vil du se en bower_components mappe inde i den statiske mappe indeholdende bootstrap-Sass-embedsmand.

Gå nu til denne mappe: statisk / css. Opret scss filen, giv den navnet syle-bs.scss og indsæt denne kode.

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

Hvad koden gør er, at den importerer alt fra bootstrap-sass. Når du har gemt stil-bs.scss, vil du se stil-bs.css genereret i samme mappe, der indeholder alle stilarter fra bootstrap.

Implementér dit projekt

Endelig, når dit projekt er klar, kan du nemt implementere dit projekt til den levende version ved hjælp af Amazon S3.