Varoitus: tämä on mutkitteleva, keskitason näyttökuva, jossa tarkastelemme koodia, joka ohjaa sivuston rakennusprosessia. Emme kirjoita koodia.
"Rakennusprosessi" on kaikki mitä tapahtuu kirjoittamasi koodin ja live-verkkosivustolle menevän koodin välillä. Olemme aiemmin puhuneet Gruntin käytöstä tähän. Sass käsitellään, varat yhdistetään, minimointi ja optimointi tapahtuu jne. Rakennusprosessi voi tehdä sinulle loputtoman paljon.
Olen työskennellyt Katie Kovalcinin kanssa uuden henkilökohtaisen sivuston rakentamisessa hänelle. Se on kokeilu meille molemmille uusien prosessien oppimisessa ja uusien kokeilemisessa. Tässä tapauksessa käytän Jekyll ensimmäistä kertaa ja automatisoin SVG-järjestelmän ensimmäistä kertaa.
Näkymän aikaan olen aivan keskellä kaikkea, mutta sain rakennusjärjestelmän toimivan sujuvasti, joten ajattelin, että oli hyvä aika jakaa se. Uskon aina, että on hyvä aika jakaa - juuri sillä hetkellä, kun jokin napsauttaa sinua.
Asioita:
- Grunt suorittaa kaikki tehtävät.
- Sivustoa rakennetaan Jekyllin kanssa. Tämä tarkoittaa, että se käsittelee asettelut ja sisällön kokonaisiksi verkkosivuiksi. Kun sisältö tai asettelu muuttuu, Grunt suorittaa Jekyll-rakennelman.
- Jekyll johtaa myös paikallista palvelinta.
- Sass on CSS-esiprosessori. Kun Sass-tiedosto muuttuu, Grunt suorittaa Sass-komplikaation. Sitten Grunt ajaa tulokseen Autoprefixerin. Sitten Grunt suorittaa Jekyll-rakennuksen uudelleen varmistaakseen, että kaikki uudet asiat ovat käsiteltävän sivuston käytettävissä.
- Sivusto käyttää SVG-järjestelmää. Kuvakkeille, mutta myös logolle ja kuka tietää-mitä-kaikki muulle sen lopussa. SVG-tiedostot pidetään kaikki erillään “svg” -kansiossa. Kun joku heistä muuttuu, Grunt suorittaa svgstore-tehtävän käsittelemään ne kaikki yhdessä. Sitten Grunt suorittaa Jekyll-rakennelman, joten kaikki nykyiset SVG-tiedostot ovat sivuston käytettävissä.
- Koska tämä GitHubin repo ja GitHub Pages tukevat Jekyllia, voimme saada automaattisesti live-isännöidyn version tästä sivustosta. Voimme osoittaa myös toisen verkkotunnuksen tälle sivustolle.