Hvordan lage en statisk blogg ved hjelp av kaktus [OS X]

Oppdater: Cactus app er utgått.

Hvis du ikke trenger et CMS og foretrekker å bare få et statisk nettsted eller en blogg, så er Jekyll et godt verktøy for å ta en sjanse med. Men hvis du foretrekker et verktøy med en GUI, i stedet for å arbeide med kommandolinjeverktøy, kan du kanskje sjekke ut Kaktus.

Kaktus er en gratis statisk nettsted generator utstyrt med kraftige verktøy som kan hjelpe deg bygge nettsteder lokalt, raskere og enklere med moderne webteknologi. Det gir deg et utgangspunkt i prosjektet ditt med 4 forhåndsdefinerte maler, slik at du kan slå bakken.

Mens du jobber med prosjektet ditt, vil Cactus overvåke alle endringene du gjør på prosjektet ditt og Oppdater nettleseren automatisk slik at du kan se endringene umiddelbart, på din Mac eller mobilenhet. Den støtter også SASS / SCSS og Coffescript ut av boksen, så alle endringer på denne filen genereres også automatisk.

Kom i gang

Først og fremst må du laste ned kaktus fra sin hjemmeside, og kjør deretter installasjonen. Når du er ferdig, åpne den, vil du se fire knapper: Opprett, distribuer, rediger og forhåndsvisningsknappen.

For å opprette et nytt prosjekt, klikk Skape. Du vil se 4 maler tilgjengelig der. For denne opplæringen går vi med bloggen. Klikk Skape.

Du vil bli bedt om å gi navnet på prosjektet ditt og velge hvor prosjektet eksisterer. Her gir jeg navn “Min fantastiske blogg” for prosjektet. Etter det ser du prosjektet ditt allerede i Cactus.

Endre filer

Det genererte prosjektet som bruker Blogg-mal finnes nå på Finder. Vi vil nå inspisere elementene som kreves for å bygge bloggen vår. Gå over til katalogen hvor filene dine holdes. De viktigste katalogene vi skal bruke er maler, sider, og statisk katalogen. La oss hoppe over de andre for nå.

For å holde ting kort, her er hva hver katalog er for:

• maler: Inneholder HTML-filer som oppfører seg som mal, brukt av HTML-filer på sider for å bygge på.
• sider: Inneholder alle HTML-filer som blir en side med samme bane. f.eks: hei.html her blir http://yoursite.com/hello.html
• statisk: Inneholder alle statiske ressurser som CSS, Javascript og bilder.

Nå skal vi redigere tre hovedfiler fra katalogene: base.html og post.html i Maler-katalogen og index.html i Sider-katalogen.

Kaktusbruk Django Template Engine for templerende språk. Med dette kan du inkludere HTML-elementer fra andre HTML-filer, slik at du ikke trenger å duplisere koder. Funksjonene som er mest brukt her er mal arv og variabel.

For å se hvordan de fungerer, åpner du først base.html på mal katalogen.

             % blokk innhold% Hovedinnhold % endblock content% ---   

base.html er den enkle html-filen som vi bruker som et skjelettmall. Den inneholder vanlige elementer på nettstedet vårt. Du kan se noen “blokker” der inne; Vi vil bruke barnemalen til å overstyre disse blokkene.

Åpne nå post.html plassert i samme katalog med base.html.

 % utvider "base.html"% % blokk tittel% title | Kaktus % endblock title% % blokk innhold% --- 
 
title
 
overskrift 
 
 
 % blokk kropp% Dette er hvor innleggets innhold er. % endblock body% 
 --- % endblock innhold% 

De post.html inneholder merket for vår blogginnleggsside. På første linje kan du se det post.html strekker seg base.html. Dette betyr at vi vil overstyre blokkene på base.html med blokkene her.

Vi kan også finne variabler her, for eksempel title og overskrift. Vi definerer verdiene av disse variablene i blogginnleggene senere.

Nå kan vi se på % blokk kropp% blokkere. Dette vil bli overskrevet av barnemalen som inneholder innleggene i bloggen vår.

Gå til katalogen sider / innlegg. Her er resten av innleggene våre.

 tittel: Min postoppføringer overskrift: Mitt innlegg Overskrift forfatter: Agus dato: 15-01-2015 % utvider "post.html"% % blokklegemet% % filtermarkdown% Lorem ipsum dolor sit amet, consectetur adipisicing 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 innleggspostene gir vi verdi til variabelen, som tittel, overskrift, forfatter og dato. Denne verdien vil passere når vi kaller variabelenavnet på foreldremalen. Deretter skriver vi innholdet i bloggen vår med Markdown.

Nå vil vi gå til indekssiden av bloggen vår, åpen index.html i sider katalogen. Den inneholder listen over våre blogginnlegg og linken til hver oppføring. Hovedkoden ser ut som nedenfor:

 % utvider "base.html"% % blokkinnhold% -- 
 % for innlegg i innlegg% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock innhold% 

På dette punktet har vi en enkel blogg med to hovedsider, indeksside som inneholder blogginnleggene, og blogginngangsside seg selv.

Gå til kaktusvinduet, og klikk på forhåndsvisningsknappen for å starte serveren. Den åpner nettleseren automatisk og åpner nettstedet ditt.

Styling bloggen ved hjelp av SCSS

En flott funksjon av kaktus er at den fungerer med SASS / SCSS ute av esken. Bare slipp dine .sass eller .scss-filer inn i det statisk katalog og hver gang du redigerer og lagrer filene, vil Cactus automatisk generere CSS.

Her vil jeg gi et eksempel ved å bruke bootstrap-sass til å style bloggen vår. Forutsatt at du bruker bower, åpne terminal, og naviger til statisk katalog av prosjektet vårt bruker cd kommando. Deretter installerer bootstrap-sass ved hjelp av denne kommandoen:

$ bower install bootstrap-sass-offisiell

Når nedlastingen er fullført, vil du se en bower_components katalog i den statiske katalogen som inneholder bootstrap-sass-offisiell.

Gå nå til denne katalogen: statisk / css. Opprett scss-filen, gi den navnet syle-bs.scss og sett inn denne koden.

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

Hva koden gjør er det importere alt fra bootstrap-sass. Når du har lagret style-bs.scss, vil du se stil-bs.css generert i samme katalog som inneholder alle stilarter fra bootstrap.

Distribuere prosjektet ditt

Til slutt, når prosjektet er klart, kan du enkelt distribuere prosjektet til den levende versjonen bruker Amazon S3.