Jekyll - Den statiske side-generator
En side... hva' for noget?
Jekyll er en side-generator. Eller på engelsk, Site Generator. I stedet for at skulle bruge en database eller en speciel Web Server. (Eksempelvis en PHP og MySQL Server.) Så kan du i stedet gøre mange ting, som eksempelvis lave en blog - uden at skulle bruge andet end ren HTML og CSS. Og det er her hvor Jekyll kommer ind i billedet. Med Jekyll kan du nemt generere hele HTML-hjemmesider som så derefter bliver udgivet til brugeren, men dog stadigvæk modulært i form af understøttelse af Markdown og Template mekanismer.
Det er simpelthen en måde at genere HTML og CSS hjemmesider, uden at skulle skrive alt selv.
Kan Jekyll installeres på Windows?
Der findes måder at få Jekyll til at virke på Windows. Men officielt er det ikke supporteret. Med det sagt er det dog ikke umuligt. Men, vi vil ikke gennemgå installationen her, da dokumentationen hos Jekyll selv - giver folk en masse informationer.
Installer Jekyll på Mac OS X
Jeg vil i blogindlægget her, benytte mig af Homebrew for Mac OS X. Da det gør det yderst simpelt at installere og vedligeholde de programmer man installerer. Du kan installere Jekyll uden at først installere Ruby på Mac, da Mac OS X kommer med en pre-installeret version af Ruby. Men, jeg kan godt lide at have mine ting opdateret - og derfor vælger jeg at installere en nyere version af Ruby via Homebrew. Har du ikke allerede Homebrew installeret, kan du læse mere om hvordan du kommer i gang lige her 
Det giver mig flere fordele, bl.a. betyder det at jeg altid har den nyeste software. For det andet, så kan jeg holder mine programmer uden for grundsystemet af Mac OS X. Så hvis OS X opdatere deres Ruby, så ødelægger det ikke lige pludseligt mine installationer af forskellige programmer. (Bl.a. Ruby.) Sikkerhedsmæssigt, er det også sikre. Da vi ikke behøver at bruge sudo-kommandoen.
Installer Ruby via Homebrew
Vi vil nu simpelt bare installere den nyeste version af Ruby ved at skrive et par linjer i Terminalen. Du kan finde Terminal-programmet, ved at enten gå til "Programmer" > "Hjælpeværktøjer". Eller ved at søge efter Terminal i Spotlight. (cmd mellemrum)
Først vil jeg for en sikkerheds skyld, lige opdatere og evt. opgradere Homebrew-pakker:
Daniels-MacBook-Pro:~ dhh$ brew update && brew upgradeNår det er færdigt, vil jeg installere Ruby. Og det er yderst simpelt:
Daniels-MacBook-Pro:~ dhh$ brew install rubyNu skulle den nyeste version af Ruby være installeret og klar til brug. Du skal dog måske genstarte din Terminal, for at den nyeste version tager effekt. Vi kan lige hurtigt tjekke versionen af Ruby:
Daniels-MacBook-Pro:~ dhh$ ruby --versionI skrivende stund vil versionen være:
Daniels-MacBook-Pro:~ dhh$ ruby --version
ruby 2.3.0p0 (2015-12-25 revision 53290) [x86_64-darwin15]
Daniels-MacBook-Pro:~ dhh$Nu da en nyere version af Ruby er installeret via Homebrew, kan vi gå videre.
Installer Jekyll via Ruby
Da Jekyll er lavet på programmeringssproget Ruby. Bliver vi nød til at hente Jekyll via Ruby. Det er dog meget simpelt at gøre, via gem-kommandoen som følger med Ruby.
Du skriver blot gem install jekyll:
Daniels-MacBook-Pro:~ dhh$ gem install jekyllOg det var alt hvad du behøvede at installere, nu kan du fluks gå i gang med at lave nye projekter i Jekyll. Hurra! 
Dit første Jekyll projekt
Nu har du Jekyll klar og det kribler i fingrene for at komme i gang med det første projekt. Men først kan vi lige tjekke om det faktisk virker. Jekyll er et ren CLI (Commandline) værktøj. Det vil sige, tekstbaseret som i de gode gamle dage. Så vi skal så også derfor åbne vores Terminal for at arbejde med Jekyll.
Så jeg åbner fluks åbner fluks en Terminal op og går ind i den mappe hvor jeg gerne vil have mit projekt ligger i. Er du ikke skrab til at komme rundt i en Terminal, så vil vores Linux videoserie være uundværlig at kigge igennem. Der gennemgår vi netop ting, såsom at lave mapper eller filler og en masse andet. Alt sammen noget som er nøjagtig på samme måde i Mac OS X. Mac OS X stammer jo fra det gamle BSD. Så 99% af de ting du kan i en Terminal i Linux/BSD. Kan du også med Mac OS X.
Jeg vil her i guiden tage udgangspunkt i at mine filer ligger på "Skrivebordet". (Desktop.) Og på mit skrivebord kunne jeg godt tænke mig at have en mappe jeg vil kalde awesomeprojekt. Det gør jeg meget simpelt ved at navigere til mit skrivebord i Terminalen og derefter starte Jekyll op med et nyt projekt:
Daniels-MacBook-Pro:~ dhh$ cd ~/Desktop/
Daniels-MacBook-Pro:Desktop dhh$ jekyll new awesomeprojekt
New jekyll site installed in /Users/dhh/Desktop/awesomeprojekt.
Daniels-MacBook-Pro:Desktop dhh$Nu vil mit nye awesome projekt, ligge under ~/Desktop/awesomeprojekt-mappen. Nu kan jeg ganske simpelt bare åbne min mappe på skrivebordet, for at tage et kig på de filer og mapper som Jekyll har lavet for mig
Inde i awesomeprojekt-mappen vil du nu kunne finde en masse filer som bliver lavet efter at du kørte jekyll new awesomeprojekt-kommandoen.
Nu da dit projekt er klar, er det tid til at gå krig!
Jeg kan nu åbne mappen jeg har lavet med min favorit editor og gå i krig med at ændre i diverse filer. Men først kan vi se hvad Jekyll giver os ud af boksen, ved at cd ind i awesomeprojekt-mappen - hvis vi ikke allerede er det og så køre jekyll serve-kommandoen:
Daniels-MacBook-Pro:awesomeprojekt dhh$ jekyll serve
Configuration file: /Users/dhh/Desktop/awesomeprojekt/_config.yml
Source: /Users/dhh/Desktop/awesomeprojekt
Destination: /Users/dhh/Desktop/awesomeprojekt/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.987 seconds.
Auto-regeneration: enabled for '/Users/dhh/Desktop/awesomeprojekt'
Configuration file: /Users/dhh/Desktop/awesomeprojekt/_config.yml
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.Jekyll vil nu generere vores filer som faktisk vil være vores hjemmeside. Den ligger de genererede filer (dem som vi ville uploade til vores hjemmeside) ind i en mappe (som standard, kan ændres) som hedder _site. Ydermere vil Jekyll også starte en lille webserver op, så du live kan se hvis du ændre noget imens at du laver om på den. Du kan følge linket her: http://127.0.0.1:4000/ eller blot skrive det ind i din favorit browser. Du vil nu blive mødt af noget lignende det her:
Ud af boksen for du en hel masse. Du kan lave blogindlæg som du kender det med WordPress med at lave Markdown filer. Du kan ændre designet nemt med HTML og CSS filerne... samt en helt masse andre ting som vi dog ikke lige kommer ind på her i dette blogindlæg.
Den klart vigtigeste fil er din _config.yml fil. Den bestemmer hvordan hovedkonfigurationen er sat op. Du kan i dokumentationen på Jekyll's egen hjemmeside finde en helt dedikeret side til netop kun den fil lige her: https://jekyllrb.com/docs/configuration/
I dette blogindlæg vil vi ikke gå så meget i dybten med _config.yml filen, men jeg vil lige hurtigt gå igennem hvordan blogindlæg laves og så skrive en lille smule om hvor du skal kigge for at ændre designet af hjemmesiden.
Dit første blogindlæg!
Jeg åbner nu min awesomeprojekt mappe op i min favorit editor. I mit tilfælde er det Atom editoren.
Efter det vil jeg udfolde min _posts mappe og duplikere (duplicate) det ene blogindlæg der er der inde:
Nu har vi en fil at arbejde ud fra. Jeg vil kalde min fil: 2016-05-15-mit-nye-indlaeg.markdown (Du kan bruge .md som en forkortelse for .markdown hvis du vil.)
2016 er året, 05 er måneden og 15 er dagen. Nu vil jeg åbne min fil og ændre nogen småting såsom titlen, udgivelsestidspunkt, kategorier og indhold af selve blogindlægget:
Lad os tage filen fra toppen af:
- layout: Det er designet... den bruger en post.html filen inde i _layouts mappen til at vide hvad for et design blogindlægget skal benytte.
- title: Dette er din titel som vil fremgå når du går ind på dit blogindlæg og hvordan det ser ud på forsiden af din Jekyll hjemmeside.
- date: Er selve datoen for udgivelse (ÅR-MÅNED-DAG format) og tidspunktet. I det her tilfælde er det d. 15 i 15, 2016 kl 10:00 om morgnen. (Iht. UTC +2 tidszone.)
- categories: Her kan du smide dine blogindlæg ind under kategorier. Så man kunne have en kategori som hjemmesiden vil genere med alle indlæg inde i "nyhed" eller "vigtigt" m.m.
- Under de 3 sidste streger vil du have selve dit indhold af din hjemmeside. Du kan benytte dig af Markdown her. (Eksempelvis vil ##Undertitel blive til et
<h2>Undertitel</h2>i HTML.)
Og det var sådan set det, nu kan du gå i gang med at lege lidt rundt. Ændre designet, tilføjer ting - tage ting ud. Ændre i filer og meget mere. I et fremtiden vil vi gå meget mere i dybten omkring styrkerne bag Jekyll. Alle design filer kan findes i css og _layouts mappen. Eksperimentere og leg med det. Har du problemer er du altid mere end velkommen til at stille spørgsmål i vores forum eller i kommentar feltet nedenunder dette blogindlæg
