Staattisen blogin luominen kaktuksella [OS X]

Päivittää: Cactus-sovellus on lopetettu.

Jos et tarvitse CMS: ää ja haluaisit vain saada staattisen sivuston tai blogin, niin Jekyll on hyvä työkalu tilaisuuteen. Jos haluat mieluummin työkalun, jossa on käyttöliittymä, sen sijaan, että käytät komentorivityökaluja, sinun kannattaa tarkistaa Kaktus.

Kaktus on ilmainen staattisen sivuston generaattori varustettu tehokkailla työkaluilla, jotka voivat auttaa sinua rakentaa sivustoja paikallisesti, nopeammin ja helpommin nykyaikaisilla web-tekniikoilla. Se antaa sinulle lähtökohdan projektissasi, jossa on neljä ennakoitua mallia, joten voit lyödä maata.

Työskennellessäsi projektissa Cactus tulee valvoa jokaisesta projektin tekemästäsi muutoksesta ja päivittää selaimen automaattisesti niin näet muutokset välittömästi Macissa tai mobiililaitteessa. Se tukee myös SASS / SCSS- ja Coffescript-paketteja, joten myös kaikki tämän tiedoston muutokset luodaan automaattisesti.

Aloittaa

Ensinnäkin sinun täytyy ladata Cactus kotisivulta ja suorittaa asennus. Kun olet valmis, avaa se, näet neljä painiketta: Luo, Asenna, Muokkaa ja Esikatselu-painiketta.

Luo uusi projekti napsauttamalla Luoda. Siellä on 4 mallia. Tässä opetusohjelmassa käytämme blogimallia. Klikkaus Luoda.

Sinua pyydetään antamaan hankkeen nimi ja valitsemaan sijainti, jossa projekti on olemassa. Täällä annan nimen “My Awesome Blogi” hankkeelle. Tämän jälkeen näet projektisi jo Cactusissa.

Tiedostojen muokkaaminen

Luodun projektin käyttäminen Blog-mallipohjalla on nyt Finderissa. Tarkastamme nyt Blogin rakentamiseen tarvittavia elementtejä. Suuntaa kansioon, johon tiedostot säilytetään. Tärkeimmät hakemistot, joita käytämme, ovat Mallit, sivut, ja Staattinen hakemistoon. Ohita muut nyt.

Jos haluat pitää asiat lyhyenä, tässä on, mitä jokainen hakemisto on:

• Mallit: Sisältää HTML-tiedostoja, jotka toimivat mallina ja joita HTML-tiedostot käyttävät sivuilla.
• sivut: Sisältää kaikki HTML-tiedostot, joista tulee sama reitti. Esimerkiksi: hello.html tulee täältä http://yoursite.com/hello.html
• Staattinen: Sisältää kaikki staattiset resurssit, kuten CSS, Javascript ja kuvat.

Nyt muokkaamme kolme päätiedostoa hakemistoista: base.html ja post.html Mallit-luettelossa ja index.html Sivut-hakemistossa.

Cactus käyttää Django Template Engine mallinnuskielelle. Tämän avulla voit lisätä HTML-elementtejä muista HTML-tiedostoista, joten sinun ei tarvitse kopioida koodeja. Käytetyimmät ominaisuudet ovat täällä mallin perintö ja muuttuja.

Jos haluat nähdä, miten ne toimivat, avaa ensin base.html Template-hakemistossa.

             % block content% Main content % endblock content% ---   

base.html on yksinkertainen html-tiedosto, jota käytämme skeleton-mallina. Se sisältää sivustomme yhteisiä elementtejä. Näet joitakin “lohkot” siellä; käytämme lapsilomaketta näiden lohkojen ohittamiseksi.

Avaa nyt post.html samassa hakemistossa base.html.

 % laajentaa "base.html"% % block title% title | Cactus % endblock title% % block content% --- 
 
title
 
headline 
 
 
 % block body% Tässä on viesti. % endblock body% 
 --- % endblock content% 

post.html sisältää blogimerkintäsivun merkinnän. Ensimmäisellä rivillä näet sen post.html laajentaa base.html. Tämä tarkoittaa, että ohitamme lohkot base.html lohkojen kanssa.

Täältä löytyy myös muuttujia, kuten title ja headline. Määritämme näiden muuttujien arvot blogimerkinnöissä myöhemmin.

Katsokaa nyt % block body% lohko. Lapsimalli, joka sisältää blogisi postimerkinnät, ohittaa tämän.

Siirry hakemistoon sivua / viestiä. Tässä ovat muut postimerkintämme.

 otsikko: My Post Entries otsikko: My Post Headline Author: Agus date: 15-01-2015 % laajentaa "post.html"% % block body% % filter markdown% Lorem ipsum dolor sit amet, consectetur elit. Earum, perferendis inventore dolorem rerum et tempora sint nemo illum ab saepe, assumenda, amet ilo deleniti officiis, max. --- % endfilter% % endblock body% 

Postimerkinnöissä annamme arvon muuttujalle, kuten otsikko, otsikko, tekijä ja päivämäärä. Tämä arvo kulkee, kun kutsumme muuttujan nimen vanhemmassa mallissa. Sitten kirjoitamme blogisi sisällön Markdownin avulla.

Nyt siirrymme blogimme indeksisivulle, joka on avoinna index.html vuonna sivut hakemistoon. Siinä on luettelo blogimerkinnöistämme ja linkki jokaiselle merkinnälle. Pääkoodi näyttää alla olevalta:

 % laajentaa "base.html"% % block content% -- 
 % viestien postituksessa% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

Tässä vaiheessa meillä on yksinkertainen blogi, jossa on kaksi pääsivua hakemistosivu joka sisältää blogimerkinnät ja blogimerkinnän sivu itse.

Siirry Cactus-ikkunaan ja napsauta esikatselupainiketta käynnistääksesi palvelimen. Se avaa automaattisesti selaimen ja avaa sivustosi.

Blogin muotoilu SCSS: n avulla

Cactusin hieno ominaisuus on, että se toimii SASS / SCSS: n kanssa ulos laatikosta. Vain pudota .sass- tai .scss-tiedostosi osaksi staattinen Cactus luo CSS: n automaattisesti aina, kun muokkaat ja tallennat tiedostoja.

Täällä annan esimerkin käyttämällä bootstrap-sassia blogiimme muotoilemiseen. Olettaen, että käytät boweria, avaat terminaalin ja navigoit staattinen hankkeen hakemistoa CD komento. Asenna sitten bootstrap-sass käyttämällä tätä komentoa:

$ bower asentaa bootstrap-sass-virallinen

Kun lataus on valmis, näet bower_components staattisen hakemiston sisällä oleva hakemisto bootstrap-Sass virallisten.

Siirry tähän hakemistoon: staattinen / CSS. Luo scss-tiedosto, anna sille nimi syle-bs.scss ja aseta tämä koodi.

 @import "… / bower_components / bootstrap-sass-Official / Varat / tyylitiedostot / _bootstrap"; 

Mitä koodi tekee, se tuo kaiken bootstrap-sassista. Kun olet tallentanut tyylin bs.scss, näet tyylin bs.css, jotka on luotu samaan hakemistoon, joka sisältää kaikki bootstrap-tyylit.

Asenna projekti

Lopuksi, kun projekti on valmis, voit ottaa projektisi käyttöön live-versiossa helposti Amazon S3: n avulla.