Et fullblåst CMS er sjelden nødvendig. Noen ganger trenger du bare å lage en lys, statisk nettside? men du har akkurat nok sider for å gjøre prosessen med å kopiere malfiler og å gjøre endringer på tvers av nettsider endringer. I dag skal jeg demonstrere en enkel løsning - Jekyll - som gjør at små nettsteder blir en bris.
Trinn 0: Møte Jekyll
Jekyll er en enkel, bloggbevisst, statisk nettstedgenerator.
Jekyll er en enkel, bloggbevisst, statisk nettstedgenerator. Det er det stedet sier. Men hva betyr dette egentlig? En statisk side generator er et program som tar et sett med filer og genererer nettstedet ditt med dem. Som du ser, kan vi bruke et sett med maler, lage innholdsfiler separat, og bruk Jekyll for å generere nettstedet vårt. Den? Bloggen klar? En del betyr at vi kan bruke dette til å lage en blogg, eller et nettsted som har en rekke post-lignende oppføringer (for eksempel en portefølje). La oss gi det en sjanse!
Trinn 1: Installere Jekyll
Se her for mer informasjon om Ruby Gems.
Vi begynner med å installere Jekyll; Det er en Ruby perle, så det burde være ganske grei.
gem install jekyll # bruk 'sudo' hvis oppsettet krever det
Yep: det er så enkelt. Det er noen flere brikker vi kan installere hvis vi planlegger å gjøre et mer komplekst oppsett, men siden vi ikke er det, vil dette gjøre trikset.
Trinn 2: Opprette vår første mal
Hver fil eller mappe som ikke starter med en understreking, blir kopiert til det genererte nettstedet.
Deretter la vi sette opp mappene til Jekyll. Opprett en mappe som heter eksempel-app for denne opplæringen; Vi skal lage en liten porteføljeside for, for eksempel, en fotograf. Dette er et godt eksempel på hvor Jekyll skinner: Det er et lite nettsted som ikke vil bli oppdatert for ofte, men er stort nok til det punktet at du ikke vil åpne hver side når du må gjøre en markupendring.
Innsiden eksempel-app, lag en mappe som heter _layouts. Legg merke til underskriften i begynnelsen av denne mappen: En hvilken som helst mappe eller fil som begynner med en understreking, vil ikke være en del av nettstedet som Jekyll genererer. Hvis de har et navn som Jekyll gjenkjenner (for eksempel _config.yml eller _layouts), vil innholdet bli brukt i genereringen av nettstedet, men filene selv vil ikke dukke opp på nettstedet. Husk dette: Alle filer eller mapper som ikke starter med underskrift, kopieres til det genererte nettstedet (som for øvrig er standard til _nettstedet sub-mappe).
Så la oss lage en layout. Vi starter med et generelt nettstedslayout som inneholder all? Krom? for nettstedet vårt. Opprett en ny fil, kalt default.html inne i _layouts mappe (navnet ikke er sant), og legg til følgende kode for det:
% hvis side.title% side.title | % endif% John Doe, Fotograf
John Doe Photograghy
innhold
Et par ting her å huske på?
For det første bruker Jekyll flytende malesystemet (som standard). Dette betyr at alt du kan gjøre med Liquid, kan du gjøre i en mal i Jekyll. For eksempel, i </code> tag, vi bruker begge typer flytende oppslag: <em>output markup</em> og <em>tag markup</em>. Output markup kan utgjøre tekst (hvis den viste variabelen eksisterer), mens tagmarkup ikke gjør det. Outputmarkup er avgrenset av dobbelkrøll-braces, mens tagmarkup er avgrenset av en krøllete brace / percent sign duo.</p> <p>Den neste tingen å legge merke til ovenfor er hva som er inne i Liquid-kodene: ting som <code>side tittel</code> og <code>innhold</code>. Disse er variabler levert av Jekyll; Du kan se listen over tilgjengelige maldata i dokumentene. Vi kan også opprette egendefinerte maldata, som vi snart vil se gjennom.</p> <p>Til slutt legg merke til CSS vi kobler til: opprett en <code>css</code> mappe i roten til prosjektet ditt og kaste denne stilen til en <code>style.css</code> fil:</p> <pre>kropp font: 16px / 1.5 verdana, helvetica-neue, helvetica, arial, san-serif; bakgrunn: svart; farge: #ececec; polstring: 0; margin: 0; ul margin: 0; polstring: 0; en color: #ccc; tekst-dekorasjon: ingen; a: svever farge: #ececec; tekst-dekorasjon: understreke; #main width: 960px; margin: 0 auto; bakgrunn: rgba (255, 255, 255, 0.4); header padding: 0 10px; overløp: skjult; h1 margin: 0; nav ul, ul.entries liste-stil-type: none; nav li a float: left; margin: 5px; .content polstring: 10px; ul.entries li posisjon: relativ; margin: 20px auto; polstring: 20px; bakgrunn: #ececec; bredde: 600px; ul.entries img bredde: 600px; ul.entries li h3 posisjon: absolutt; bunn: -18px; igjen: 17px; skriftstørrelse: 2em; ul.entries a color: #ececec; ul.entries a: hover color: #fff; footer font-size: 0.65em; tekst-align: center; </pre> <p>Lag også en <code>img</code> mappe og legg til et bilde, oppkalt <code>banner.jpg</code>; Vi bruker det snart. Ethvert bilde vil gjøre; bare beskjære det til <code>960 x</code> av <code>300px;</code>.</p> <p>Du lurer kanskje på hvorfor vi bruker <code>hvis</code> erklæring ovenfor hvis <code>side tittel</code> variabel vil bare ikke vises hvis den eksisterer? Vel, hvis det eksisterer, vil jeg inkludere den vertikale linjen etter den; en annen måte å skrive på som ville være slik:</p> <pre>page.title % if page.title% | % slutt om %</pre> <p>Så, hvordan bruker vi denne malen? Vel, vi må lage en side som vil bruke denne malen. I rotkatalogen av prosjektet vårt, opprett en <code>index.html</code> fil. Her er innholdet:</p> <pre>--- layout: standard --- <section role="banner"> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll.jpg" /> </section> <section> <p> Velkommen til John Doe Photography! Vennligst sjekk ut Porteføljen min for å se arbeidet mitt. </p> </section></pre> <p>Her er innholdet i vår <code>index.html</code> fil. Legg merke til hva som står øverst på filen: Jekyll kaller denne YAML-fremgangen. Enhver fil (som ikke starter med en understreking) som har YAML-frontmateriell, vil bli generert av Jekyll før den blir satt inn <code>_nettstedet</code> mappe (hvis den ikke har underskrift eller YFM, så kopieres den bare <code>_nettstedet</code>). I dette tilfellet forteller YAML-fronten bare Jekyll hvilken mal vi vil bruke den.</p> <p>Nå, åpne en terminal, <code>cd</code> inn i prosjektkatalogen din, og kjør <code>Jekyll</code>. Du bør se noe slikt:</p> <pre>ADVARSEL: Kunne ikke lese konfigurasjonen. Bruke standardinnstillinger (og alternativer). Ingen slik fil eller katalog - /Users/andrew/Desktop/example-app/_config.yml Byggeside: / Brukere / andrew / Desktop / example-app -> / Brukere / andrew / Desktop / example-app / _site Vellykket generert nettsted : / Brukere / andrew / Desktop / example-app -> / Brukere / andrew / Desktop / example-app / _site</pre> <p>Ignorer advarselen; vi kommer snart til det. For nå kan du se at nettstedet har blitt bygget i en nyopprettet <code>_nettstedet</code> katalogen. Hvis du åpner <code>_site / index.html</code> fil i din valgte nettleser, bør du se? en feil. Problemet er at våre stier (nettadresser og stilark) begynner med et fremoverstrekk. Dette betyr at vi ikke bare kan se dem som filer, vi må vise dem på en server. Jo, du kan starte opp W / MAMP, men hvorfor ta det med trøbbel? Jekyll har en innebygd server. Så løp <code>jekyll - server</code>, og gå til localhost: 4000 for å se noe som bildet nedenfor:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll.png"> <p>Hvis bildet ovenfor ikke er nok, se koden til <code>_site / index.html</code>. Du ser at malen vi angav ble blandet med innholdet vi ga og -voila! -Vi har vår side.</p> <p>Jeg vil minne deg på at det er YAML-fronten som gjør at denne magien skjer; hvis en fil ikke starter med tre bindestreker, en eller flere linjer med egenskaper og en annen linje med tre bindestreker, kopieres filen bare til <code>_nettstedet</code> mappe, ingen generasjon finner sted.</p> <hr> <h2> Trinn 3: Opprette en porteføljesmal</h2> <p>Nå som vi er komfortable med det grunnleggende, la oss lage en portefølje for vår fiktive fotograf. Husk hvordan jeg merket at Jekyll er? Bloggen oppmerksom ?? Vel, vi skal bruke denne bloggen-bevissthetsfunksjonen til vår fordel: i stedet for innlegg, har vi porteføljeoppføringer.</p> <p>Innlegg hører til i en mappe, kalt <code>_posts</code>, så skape det nå. Filnavnsmønsteret for innlegg må også være spesifikt: <code>år-måned-dag-title.ext</code>. Innlegg - vel, hvilken som helst fil i ditt Jekyll-område, egentlig - kan enten være Markdown eller HTML.</p> <p>Så la oss gjøre noen innlegg: husk, disse vil faktisk være oppføringer i vår portefølje:</p> <h3><code>_posts / 2010-03-04-bikes.md</code></h3> <pre>--- layout: portfolio_entry bilde: /img/bikes.jpg tittel: Sykler, svart og hvitt --- Sykler brukes av nesten alle i sentrum av Amsterdam. Disse er kjedet til et sykkelstativ.</pre> <h3><code>_posts / 2010-10-01-wing.md</code></h3> <pre>--- layout: portfolio_entry tittel: Wing and a Prayer bilde: /img/wing.jpg --- Wing of AirBus Jeg red til England.</pre> <h3><code>_posts / 2011-06-05-bridge.md</code></h3> <pre>--- layout: portfolio_entry tittel: Stone Bridge bilde: /img/bridge.jpg --- En gammel steinbro i London.</pre> <h3><code>_posts / 2011-07-09-road.md</code></h3> <pre>--- layout: portfolio_entry tittel: Road and Curb bilde: /img/road.jpg --- Sykkelbaner her er veldig tynn.</pre> <p>Ganske enkelt, eh? Legg merke til hvordan vi lager et tilpasset YAML front matter-felt: <code>bilde</code>. Dette er nettadressen til bildet for den oppføringen. Jo, vi kan bygge hele oppførings HTML her i denne filen, men hva hvis vi vil endre det? Vi må returnere og endre det i hver oppføring. På denne måten kan vi i stedet bruke vår <code>portfolio_entry</code> mal for å gjengi dem. Hva ser den mal ut? Det er ganske enkelt også:</p> <h3><code>_layouts / portfolio_entry.html</code></h3> <pre>--- layout: standard --- <h2>side tittel</h2> <img src="//accentsconagua.com/img/ page.image " /> innhold </pre> <p>Hvis du så på siden for maldata, vet du at alle tilpassede frontmateriell vi legger til, vil være tilgjengelige under <code>side</code>; Så, her, kan vi få tilgang <code>page.image</code>. Vi bruker også <code>side tittel</code> og <code>innhold</code> (alt etter den siste trepunktstreken).</p> <p>Jeg bør nevne her, mens innlegget <code>tittel</code> skal være tilgjengelig på <code>post</code> objekt, jeg har bare kunnet få det til å fungere på <code>side</code> gjenstand. Hva som helst som funker!</p> <p>Vær også oppmerksom på at vi har denne malen ved hjelp av vår <code>misligholde</code> oppsett. Du kan neste maler slik, og gjøre jobben enda enklere.</p> <p>Dette gir oss våre innlegg (innlegg) sider, men hva med hovedporteføljesiden? Når vi skrev vår navigasjon i standardoppsettet, bemerket jeg at vi vil ha det som <code>/ Portefølje /</code>. Så lag en mappe, kalt <code>portefølje</code> i rotkatalogen, og åpne en <code>index.html</code> filen i den.</p> <pre>--- layout: standard tittel: portefølje --- <section> <h2>Portfolio</h2> <p>Sjekk ut bildene mine nedenfor!</p> </section> <ul> % for innlegg i site.posts% <li> <img src="//accentsconagua.com/img/ post.image " /> <h3>post.title</h3> </li> % endfor% </ul></pre> <p>Dette er vårt mest kompliserte stykke ennå. Husk at dette ikke er en mal: det er en vanlig? fil, men det kan fortsatt inneholde flytende koder. Vi starter med å sette inn <code>oppsett</code> til <code>misligholde</code>, og <code>tittel</code> til? Portefølje.?</p> <p>Legg merke til at vi i HTML har en flytende <code>for i</code> sløyfe. Vi henter alle innleggene med <code>sites.posts</code>; så løp vi over disse innleggene med <code>for innlegg i site.posts</code> / <code>EndFor</code>. Hvis du har jobbet med WordPress, eller et annet bloggsystem, bør du være kjent med begrepet a <code>sløyfe</code>. Det er alt dette er! Innsiden, som du kan se, kan vi få standardegenskapene, så vel som eventuelle fremste saker vi definerte (som <code>bilde</code>).</p> <p>Nå hvis vi løper <code>jekyll - server</code> å generere nettstedet og starte serveren, localhost: 4000 / portefølje / skal vise dette:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll_2.png"> <p>Og her er en inngangsside:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll_3.png"> <p>Flott! Du har opprettet en portefølje. Jeg er sikker på at du også ser hvordan dette fungerer for en blogg. La oss nå gå videre for å se på noen konfigurasjonsalternativer for Jekyll.</p> <hr> <h2> Trinn 4: Skrive en konfig fil</h2> <p>Det er en mengde alternativer for Jekyll. Det er flott at alle av dem har veldig fornuftige standarder, men hvis du vil endre dem, er det ikke vanskelig i det hele tatt.</p> <p>Det er to måter å angi alternativer på.</p> <ul> <li> Først når du kjører programmet på kommandolinjen, kan du passere parametere. Vi har allerede sett <code>--serveren</code> parameter, som starter en server etter å ha generert nettstedet.</li> <li> En annen måte, og måten vi bruker her, er i en config-fil, kalt <code>_config.yml</code>; Dette er en YAML-fil, så hver linje er <code>en nøkkel: verdi</code> par, akkurat som i YAML-fronten. Jekyll vil se etter denne filen før du genererer nettstedet.</li> </ul> <p>Så gjør en <code>_config.yml</code> fil, og la oss sjekke ut noen av de vanligste alternativene. </p> <blockquote> <p>For en komplett liste over alternativer, gå gjennom konfigurasjonsdokumentasjonen.</p> </blockquote> <ul> <li> <strong><code>auto</code></strong>: Legge til <code>auto: true</code> til konfigurasjonsfilen din vil Jekyll fortsette å løpe, se prosjektmappen din for endringer og regenerere nettstedet på flyet.</li> <li> <strong><code>kilde</code></strong>: Hvis kildefilene dine er i en annen katalog enn den du kjører Jekyll fra, vil du sette den katalogen sammen med <code>kilde</code> eiendom.</li> <li> <strong><code>mål</code></strong>: Som standard er destinasjonen for det genererte nettstedet ditt <code>./_nettstedet</code>. Hvis du vil ha noe annerledes, sett det her.</li> <li> <strong><code>permalink</code></strong>: Permanent lenken er banen til innleggene dine. Som standard er det <code>/year/month/day/title.html</code>. Du kan imidlertid tilpasse det hvis du vil. Blant annet kan du bruke variablene <code>:år</code>, <code>:måned</code>, <code>:dag</code>, <code>:tittel</code>, og <code>: kategorier</code>. <code>: kategorier</code> kommer fra forsiden; alle de andre kommer fra postfilnavnet. Deretter kan du sette <code>permalink</code> til ting som <code>/: År /: måned /: tittel /</code> eller <code>/:categories/:title.html</code>. Bonus tips: hvis du har en <code>permalink</code> eiendom i posten foran saken, vil den overstyre den generelle standarden.</li> <li> <strong><code>utelukke</code></strong>: Som jeg sa ovenfor, vil Jekyll ikke generere filer i kataloger som starter med underskrift. Men hvis du har mapper som du vil ignorere, men det begynner ikke med et understrek, kan du gjøre det med <code>utelukke</code> i konfigurasjonsfilen din.</li> </ul> <hr> <h2> Trinn 5: Implementere nettstedet</h2> <p>Så, la oss si at du har opprettet nettstedet, og vil sette det gratis ut på verdensomspennende web. Hvordan gjør du det?</p> <p>Det er flere måter å oppnå dette på. Selvfølgelig, hvis det er et lite nettsted som du ikke vil oppdatere for ofte, så bare FTP det opp til serveren din; Dette kan være ditt eneste alternativ, hvis du bruker delt hosting.</p> <p>Hvis du har en VPS eller dedikert hostingoppsett, kan du kjøre mer automatisk. Sjekk ut distribusjonsdokumentasjonen for en liste over gode ideer. Hvis du ikke er sikker på hva du skal gjøre, kan du prøve å følge instruksjonene for å bruke git-mottakskroken; Jeg har prøvd det, og det er ganske kult. </p> <hr> <h2> Trinn 6: Ta det videre</h2> <p>Dette er bare toppen av Jekyll. </p> <ul> <li>Det er en pluginarkitektur som lar oss endre hvordan innholdet ditt blir generert.</li> <li> Det er mer du kan gjøre med Liquid og noen flytende forlengelser som Jekyll legger til. </li> <li>Det er mange maldata som vi ikke snakket om. Sjekk det ut og se hva du kan gjøre!</li> </ul> <hr> <h2>Konklusjon</h2> <p>Vel, det er din introduksjon til Jekyll - den enkle, bloggbevisste, statiske nettstedgeneratoren. Neste gang du bygger et brosjyre-stil, forretningskort-y, mikroporteføljeside, tror du at du vil gi Jekyll et forsøk? Gi meg beskjed i kommentarene og takk så mye for å lese!</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/code">Kode</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/code/building-the-back-end-of-a-photo-site.html">Bygg baksiden av et fotografisk nettsted</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_7/building-the-back-end-of-a-photo-site_2.jpg');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/code/building-single-page-web-apps-with-sinatra-part-2.html">Bygg Single Page Web Apps Med Sinatra Del 2</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_21/building-single-page-web-apps-with-sinatra-part-2.png');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">no.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Interessant informasjon og nyttige tips om programmering. Nettstedutvikling, webdesign og webutvikling. Photoshop opplæringsprogrammer. Opprettelse av dataspill og mobile applikasjoner. Bli en profesjonell programmerer fra grunnen av.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Søke...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>
Share
Accentsconagua