Zomerproject: een website bouwen met Terminal
We zijn een paar dagen verlaat door vakantieperikelen, maar vandaag dan eindelijk de zomereditie die we al een paar keer hebben aangekondigd: over een website bouwen met Terminal. Jawel, dat lees je goed. Niet met Wordpress, maar met dit:
Misschien dat je Terminal wel eens gebruikt om een commando in te voeren dat je ergens op internet of in MacFan hebt gevonden, maar laat je het programma verder links liggen. Waarom zou je in een tijd van mooie grafische interfaces in vredesnaam met een applicatie willen werken die je doet terugdenken aan de DOS-prompt?
Omdat het leuk is, misschien. Omdat je het gevoel krijgt dat je een klein beetje meer van je Mac begrijpt als je iets kunt doen met louter commando’s. Dat was in ieder geval een van onze redenen om Feitig (een website met satirisch nieuws) nu eens niet te bouwen met Wordpress of een ander content management system, maar met een simpele teksteditor en Terminal. Dit is Feitig:
Als je de website bestudeert, zul je hopelijk merken dat het een heel gewone website is. Met een homepage waarop de eerste alinea’s van nieuwsberichten staan, voor elk bericht een pagina met het hele bericht, een contactpagina, Twitter- en Facebook-knoppen, en noem maar op.
Elke keer als we een nieuw bericht willen plaatsen, hebben we maar twee simpele apps nodig:
Een tekstverwerker waarin we het bericht typen. Wij gebruiken Byword.
En Terminal waarmee we het publiceren.
Om de site te bouwen, hebben we nog een derde simpele app gebruikt:
Een html-editor. Wij gebruikten het gratis programma SubEthaEdit.
Is het echt niet meer dan dat? We jokken een klein beetje. Om Terminal te laten doen wat wij willen, hebben we wel degelijk twee applicaties binnen Terminal moeten installeren. Daar komen we zo op. Het installatieproces is even een dingetje, maar je hoeft het maar één keer te doen, en daarna is Terminal er klaar voor. Voor je gevoel gebruik je dan niets anders dan een tekstverwerker en Terminal voor het onderhouden van je site.
Statische HTML versus dynamische HTML
Laten we er eerst eens mee beginnen wat voor website Feitig eigenlijk is, in technisch opzicht. Feitig is een website met statische HTML. Dat betekent dat alles wat je op de website te zien kunt krijgen, een bestaande webpagina is die kant-en-klaar op de server staat. Dat klinkt logisch, maar dat is vandaag de dag niet meer zo vanzelfsprekend. De meeste websites zijn dynamisch. Als je bijvoorbeeld een productpagina op Amazon bezoekt, dan vist de website gegevens uit meerdere databases. Stel je voor dat je een pagina met een Logitech-muis bekijkt, dan haalt de site productinformatie uit de productdatabase, het aantal dat op voorraad is uit het voorraadbeheer, recensies van andere kopers uit een systeem met reacties, en er worden aanbevelingen geplaatst op basis van wat de website over jou weet. Als je die pagina morgen nog een keer bezoekt, kan hij op punten anders zijn, want elke keer dat je dat product opzoekt, wordt de meest actuele informatie uit verschillende databases bij elkaar gezocht. Dat is een dynamische site: elke pagina wordt ter plekke voor je samengesteld op basis van meerdere bronnen. Bij een statische website is elke pagina voor iedereen hetzelfde, elke keer dat je hem bezoekt. Tenzij de websitemaker hem verandert natuurlijk.
PageSpeed Insights
Dynamische websites zijn fantastisch; je kunt er heel veel mee. Maar ze zijn ook complex. Statische websites zijn ongelooflijk veel simpeler. Dat heeft grote voordelen. Omdat er geen databases achter de website zitten, laadt een statische website ongelooflijk snel. Hoe optimaal een website laadt, kun je heel makkelijk bekijken met PageSpeed Insights van Google. Vul daar een pagina in, en je krijgt een score van 1 (heel slecht) tot 100 (ultiem snel). Globaal geldt: scoor je van 0 tot 49, dan is dat slecht, scoor je van 50 tot 89 dan is verbetering wenselijk, en scoor je tussen de 90 en 100 dan zit je goed. Een score van 100 is volgens Google nauwelijks haalbaar en wordt ook niet verwacht:
To provide a good user experience, sites should strive to have a good score (90-100). A "perfect" score of 100 is extremely challenging to achieve and not expected. For example, taking a score from 99 to 100 needs about the same amount of metric improvement that would take a 90 to 94.
Als je een berichtpagina van Feitig invoert, is de score vaak ongekend hoog:
Een score van 98. En een enkele keer halen we de 100 ook wel eens (de score fluctueert namelijk steeds een beetje). Hebben we er veel aan gedaan om zo optimaal te laden? Nee eigenlijk. We hebben wel wat adviezen van Google opgevolgd (PageSpeed Insights geeft goede tips voor specifiek jouw website), maar we zaten vanaf het begin al ruim in de 90. Omdat we een statische website maken, en die zijn gewoon lekker snel. Geen gedoe met applicaties die databases gebruiken – het zijn gewoon simpele HTML-pagina’s.
Om je een vergelijking te geven, dit is hoe de iMac-pagina op de Apple-website scoort:
Dat zit niet eens in het groen, terwijl je toch zou denken dat Apple zijn best doet om de website zo optimaal mogelijk te maken. Nog erger is een willekeurige productpagina op BOL.com:
Dat zit zelfs in het rood. Misschien dat webontwikkelaars wat laks zijn geworden. Nieuwe telefoons en computers zijn snel genoeg om slome websites snel op je scherm te toveren. En toch. Voel eens hoe ‘snappy’ Feitig werkt. Pagina’s bouwen zich niet op, maar staan in één klap op je scherm (tenzij je internet écht heel traag is).
Dat is dus een voordeel van een statische site. Andere voordelen: HTML-bestandjes zijn klein. Als je geen databases hoeft te draaien, is je site lekker licht. Scheelt kosten. En gehackt worden? Alles kan gehackt worden natuurlijk, maar als je geen Wordpress of iets anders gebruikt, dan is er ook niet iets waar een kwaadwillende op in kan loggen. Als je feitig.nl/admin in de adresbalk tikt (probeer het maar), krijg je geen inlogscherm zoals bij Wordpress-websites. Er is geen inlog, dus die kun je ook niet vinden. Natuurlijk staat elke site ergens op een server. Maar een statische site is veel simpeler te beveiligen dan een dynamische site met talloze bronnen.
Aan de slag met Terminal
Een statische site hoef je helemaal niet met Terminal te maken – dat kan op allerlei manieren. Codeer je eigen HTML-pagina’s, zet ze via FTP op een server, en je hebt een statische website. De methode die we in deze MacFan beschrijven is zomaar één methode om een statische site te maken.
En in die methode speelt de Terminal dus een belangrijke rol. Vanzelfsprekend is het dan ook belangrijk om de basisprincipes van de Terminal te begrijpen. Hoe werkt die command-line interface? Dat is ook leuk om te ontdekken als je géén website wilt bouwen. Deze webpagina is een leuk beginnetje, in tien minuutjes heb je de basisbeginselen onder de knie:
Naar een map gaan via Terminal, een nieuw bestand maken via Terminal... Het is allemaal heel simpel eigenlijk.
Als je de Terminal start, dan staat-ie in de root van je Mac. Met andere woorden, als je een commando invoert, dan voert-ie hem daar uit. Wij hebben een map gemaakt die Feitig heet, en die staat in de map Websites, en die staat weer in Dropbox. Om naar de map websites te gaan, hoeven we alleen maar dit te tikken:
cd dropbox/websites/feitig‘cd’ staat voor ‘change directory’.
Als we in de map Feitig een nieuwe map willen aanmaken, dan tikken we vervolgens:
mkdir plaatjesEn hop: de map ‘plaatjes’ is aangemaakt.
Je kunt die map ook gewoon via de Finder aanmaken hè. Dat heeft precies hetzelfde resultaat. Maar deze simpele dingetjes onder de knie krijgen maakt dat je je wat vertrouwder gaat voelen in Terminal. En dat je niet alleen maar blind commando’s overtypt, maar ook een beetje gevoel krijgt voor wat ze doen.
Ook maar even Markdown opfrissen
Zodra je Terminal lollig begint te vinden in plaats van afschrikwekkend, is het tijd om jezelf nog iets anders eigen te maken: Markdown. Daar hebben we het in MacFan al vaker over gehad. Markdown is bedacht door onder andere John Gruber (van Daring Fireball) en is een syntax waarmee je lekker je blogposts kunt typen en de tekst meteen kunt formatteren, zonder dat dat heel ingewikkeld is. Een woord maak je **vet** door het tussen dubbele sterretjes te zetten, een #titel maak je door er een hekje voor te zetten. De hele syntax vind je hier. Die sterretjes, hekjes en andere tekens tik je in je teksteditor, maar later in het proces – als die tekst naar HTML wordt omgezet – worden ze automatisch vertaald in de juiste code. Uiteraard zie je dus geen sterretjes en hekjes op je webpagina.
Er zijn talloze Markdown-editors waarmee je lekker je verhalen kunt tikken en ze gelijk met Markdown kunt vormgeven. Wij hebben Byword al geregeld als onze favoriet genoemd, maar er zijn er nog vele andere.
We laten je nu zien hoe een Feitig-bericht er in Markdown uitziet:
Dit typen wij zo in Byword, en vervolgens wordt dit automatisch een pagina op Feitig.nl – met de juist vormgeving. We hoeven geen tekst in een CMS te kopiëren, geen vormgeving toe te passen... we kieperen gewoon dit tekstbestandje in de juiste map, en de rest gaat vanzelf. En je ziet: heel veel bijzonders hebben we niet gedaan. De eerste vier regels zijn de front matter van de pagina. Op die term komen we zo nog terug. De front matter staat altijd tussen drie streepjes (op de eerste en laatste regel). De titel van de pagina staat erin, en ook een layout-instructie: namelijk dat de default vormgeving moet worden gebruikt. Op de Feitig-site bestaat alleen maar een default vormgeving, dus dat tikken we bij elk bericht. Verder hebben de eerste alinea vet gemaakt door hem tussen sterretjes te zetten. En dat is alles wat we hoeven te doen (los van een leuk bericht schrijven). O ja, we moeten het bestandje nog opslaan met een naam die er zo uitziet:
2021-07-16-Ted-de-Braak-eist-TED-Talk.mdDe bestandsnaam begint altijd met de datum, in deze volgorde (jaar-maand-dag) gevolgd door de titel. En tot slot de extensie .md (een Markdown-bestand). Die extensie moet je in een programma als Byword zelf tikken, anders maakt Byword er .txt van, en daar heb je niks aan.
Er was nog wat: Jekyll
Hoe krijg je zo’n simpel tekstbestandje nou automatisch omgetoverd tot een vormgegeven webpagina? We zeiden het al: je moet ook nog wat installeren in Terminal. En dat is Jekyll. Dit is waar het even ingewikkeld wordt, maar gelukkig is dit hele proces dermate goed gedocumenteerd op het web, dat je er sowieso uit gaat komen.
Jekyll is een static site generator. Een applicatie die al jouw materiaal omzet in een website dus. We zeggen nu wel ‘applicatie’, maar een betere benaming is ‘RubyGem’. Een RubyGem is een pakketje code, geschreven in de programmeertaal Ruby. Zie het maar als een app, alleen is het geen app die je in de Finder gaat vinden, maar die helemaal leeft in Terminal. Een programma zonder grafische interface.
Jekyll kun je gratis downloaden... via Terminal. Er zijn talloze plekken op het web waar je instructies kunt vinden:
Er vliegen je meteen allerlei andere gems om de oren: Bundler, Homebrew, en noem maar op. Laat je er niet meteen door afschrikken. Het klinkt allemaal ingewikkeld, maar uiteindelijk komt het erop neer dat je drie dingen moet doen:
1. Installeer Homebrew
Homebrew maakt het mogelijk om andere dingen te installeren. Een pagina die je er goed doorheen loodst, is deze:
2. Installeer Ruby
Installeer de laatste versie van de programmeertaal Ruby. Er zit al een versie van Ruby in macOS, maar die moet je niet gebruiken. Deze webpagina helpt je goed met het installeren van Ruby:
Brew Install Ruby · Mac Install Guide
brew install ruby. Installing Ruby with Homebrew on a Mac. From the author of the book, Learn Ruby on Rails.
3. Installeer Jekyll
Als Homebrew en Ruby zijn geïnstalleerd, dan zou je in Terminal alleen nog maar dit hoeven te typen om Jekyll te installeren:
gem install jekyllJe gaat ongetwijfeld tegen probleempjes oplopen – dus neem er een middagje voor om ermee te stoeien. Misschien ontdek je dat je ‘sudo’ moet tikken voor je commando’s om iets te installeren, omdat je anders geen toegang hebt om iets te mogen doen. Als je ‘sudo’ gebruikt, moet je vervolgens je wachtwoord intikken, en dan lukt het opeens wel.
Dit allemaal geïnstalleerd krijgen, is het hachelijke stukje als je er nog niet zo in thuis bent. Maar bedenk dat je het maar één keer hoeft te doen. En daarna lacht de wereld van Jekyll je toe.
GitHub en GitHub Pages
Als je met het huzarenstukje bezig bent om Jekyll te installeren, en je zit wat informatie te googelen, dan kom je vast heel vaak ‘GitHub’ tegen. En het woord ‘repository’. GitHub is een platform waar ontwikkelaars hun code op plaatsen – om er samen aan te werken, of om de hele wereld er toegang toe te geven (als het open source is). Een repository op GitHub is niets meer dan een verzameling van alle bestanden die bij een project horen, plus de hele revisiegeschiedenis van al die bestanden.
GitHub kun je gebruiken om apps mee te ontwikkelen, maar een website kan ook. In feite is de code van een website ook een soort applicatie. Jekyll kan heel goed samenwerken met GitHub. Wij hebben daar voor Feitig geen gebruik van gemaakt – maar het kan interessant zijn uit kostenoverweging. Onderdeel van GitHub is namelijk GitHub Pages. Dat is een hosting service voor statische websites. Een gratis hosting service ook nog. Als je GitHub gebruikt om je website in te bouwen, en je hebt dus een repository met alle bestanden die bij je website horen (HTML, plaatjes, webfonts, noem maar op), dan kun je die website via GitHub Pages gratis publiceren. Je kunt er zelfs een eigen domeinnaam aan koppelen, waardoor een bezoeker niet eens merkt dat het GitHub-project is.
Waar haal je je vormgeving vandaan?
Terug naar Jekyll. Dat is dus een static site generator. Je stopt er je Markdown-teksten in, en die zet Jekyll om tot je website. Maar hoe wordt de vormgeving dan bepaald? Er is een template nodig. En dat is niks anders dan een vormgegeven HTML-pagina. Kijk nog eens op Feitig. Elke pagina ziet er in feite hetzelfde uit. Linksboven het logo. Daaronder een tekstregeltje dat uitlegt wat Feitig is. Er is ook een menu. Elke pagina is hetzelfde, met uitzondering van de homepage: in plaats van één artikel, toont die een overzicht van alle artikelen. Maar de vormgeving is ook daar hetzelfde.
Wat Jekyll nodig heeft, is één HTML-pagina die geldt als de default-pagina. Hoe kom je daaraan? Uiteraard ga je die niet vormgeven in de Terminal. Er zijn talloze manieren om aan een vormgeving te komen:
Gebruik een bestaand thema dat voor Jekyll is ontworpen. Er zijn talloze sites waarop je die kunt downloaden – soms gratis, soms betaald. Op deze pagina van Jekyll vind je plekken waar je themes kunt downloaden.
Je kunt ook zelf een simpele pagina maken. In iWeb, als je dat nog ergens op een oude Mac hebt staan. Of in EverWeb of Sparkle. Maak iets dat je mooi vindt, exporteer het als website, en je kunt ermee aan de slag.
Heel andere optie: jat het ontwerp van een bestaande site, en pas het helemaal aan je eigen wensen aan met een HTML-editor. Gek genoeg is dit wat wij met Feitig hebben gedaan – alleen hebben we het design van onszelf gestolen. Jaren geleden begonnen we al met Feitig; toen gebruikten we een Wordpress-concurrent genaamd Typed. We bouwden daarin onze eigen site, maar vervolgens hield Typed op te bestaan. We gebruikten de app SiteSucker (die we we al eerder bespraken in MacFan) om onze eigen site op te zuigen van de Typed-server. Als je een bestaand design van het web plukt, is het namelijk niet genoeg om alleen de HTML-pagina op te slaan. Je hebt ook de CSS-stylesheets nodig, en de webfonts, en noem maar op. Met SiteSucker tank je alles binnen in een map op je eigen map. Je hebt dan een complete offline-kopie van die website. Ook daarmee kun je aan de slag in Jekyll.
Een default-pagina maken
Hoe je ook te werk gaat om je eigen template te maken: je hebt uiteindelijk één vormgegeven pagina nodig die als voorbeeld dient voor alle andere. Je default pagina. Kies de webpagina die model moet staan voor alle andere pagina’s die je nog gaat maken. En open die in een HTML-editor. Zoals gezegd gebruiken wij daar SubEthaEdit voor. De default-pagina van Feitig ziet er in die editor zo uit:
In dit bestand staat alles wat voor alle pagina’s hetzelfde is. Maar er staan ook dingen die nog ingevuld moeten worden. Die staan steeds tussen deze haken:
{{ }}Bijvoorbeeld de titel van de pagina. Die is voor elke pagina anders. Dus in de default-pagina staat een placeholder:
{{ page.title }}Herinner je je nog de front matter die we boven elk bericht typten? Een van die front matter-dingen was de titel. Jekyll doet in feite niet veel anders dan alles wat tussen {{ }} staat, vervangen door iets anders. De paginatitel vindt hij in het Markdown-documentje dat je hebt getypt. Op die manier combineert Jekyll informatie. Er is één defaultpagina met de vormgeving, er zijn een heleboel Markdown-tekstjes met de tekstuele inhoud voor de website, en dan zijn er nog meer dingen, zoals een configuratiebestandje met alle informatie over je site en Jekyll-plugins die je kunt gebruiken voor allerlei functionaliteiten.
Het voert veel te ver om in deze nieuwsbrief een complete handleiding te zetten, maar deze pagina is heel erg handig als je al een bestaande webpagina hebt en daar een Jekyll-site van wilt maken:
Zien wat je doet
Ga gewoon aan de slag met het bouwen van je website. Tweak je default-pagina tot-ie naar je zin is, maar werk voor de zekerheid altijd in een kopie. Zodat je altijd makkelijk terug kunt naar het origineel. Pas de HTML aan, en kijk in je browser van het effect is. Wil je ook weten hoe het er op je iPhone of iPad uitziet? Denk aan de Simulator die we weken geleden in een member-editie bespraken.
Zodra het bouwen van je site klaar is, kun je erop gaan publiceren. Dat gaat dan dus heel simpel: typ je artikel in Byword of een andere teksteditor, sla hem op in de juiste map, en dan moet Jekyll dus aan de slag om er een webpagina van te maken.
Jekyll werkt via Terminal. Die open je dus, en dan moet je eerst naar de map waar je je website hebt opgeslagen. In ons geval:
cd dropbox/websites/feitigZodra we daar zijn, geven we Jekyll een commando:
jekyll serveEn dan gebeurt er dit:
Jekyll geeft je het IP-adres van een virtuele server. Plak dat IP-adres in je browser, en je ziet je website. Verander nu iets in een van je tekstbestandjes, en je zult zien dat Jekyll de site meteen update. Zolang die virtuele server draait, is elke wijziging meteen zichtbaar. Als je in Finder naar de map van je website gaat, zul je zien dat Jekyll een nieuwe map heeft aangemaakt:
_siteIn die map staat je complete gerenderde website. Nu is het alleen nog een kwestie om die website te publiceren. Dat kan dus gratis via GitHub Paper. Maar je kunt de kant-en-klare site ook gewoon uploaden naar de server van een webhost. Of naar je eigen webserver, als je die hebt.
Wij hebben een host gevonden die helemaal gespecialiseerd is in static websites die via de Terminal worden geüpload: Bip. Feitig draait daar ook. Om Bip te gebruiken, moet je een klein programmaatje installeren, zodat je Bip via de Terminal kunt gebruiken. Heb je dat eenmaal gedaan, dan is elke update heel simpel:
Typ je nieuwe blogpost;
Zet Jekyll aan het werk met het commando ‘Jekyll serve’
Publiceer naar Bip met het commando ‘Bip deploy’
En de kosten van dit alles?
Die zijn minimaal. Jekyll is gratis. Veel plugins voor Jekyll zijn dat ook. Een bestaand thema gebruiken kan soms geld kosten, maar er zijn ook voldoende gratis opties. De HTML-editor SubEthaEdit is ook gratis. Byword is dat niet (kost € 10,99), maar er bestaan ook gratis Markdown-editors. Het enige waar wij voor betalen om Feitig in de lucht te hebben, is de hosting via Bip. Die kost ons € 4,99 per maand. Het kan ook voor € 0,99, maar dan kun je er niet je eigen domein aan koppelen.
Goed, dit was een héél lange editie van MacFan. Inspirerend, hopen we. Voordat we naar Jack gaan voor zijn tweewekelijkse slotwoord, nog even een paar berichten van Feitig:
Tot slot... Wat zegt Jack?
Android-gebruikers zijn minder geneigd over te stappen naar iPhone door de CSAM-scanner, liet AppleInsider weten. Google en Facebook (en ik neem aan Pinterest en TikTok ook) scannen hun cloudservers al op CSAM, eufemisme voor kinderporno. Apple kiest daarvoor – vanzelfsprekend – zijn eigen weg door het onwettelijke materiaal al te weren vóór het op iCloud staat. Kindermisbruik rigoureus aanpakken is alleen maar toe te juichen. Maar een klikspaan inbouwen in iOS, iPadOS en macOS is een, eh, interessante keuze. Het staat gelijk aan preventief fouilleren, aan de wanredenering 'als je niets verkeerds doet heb je niets te vrezen', aan schuldig zijn tot het tegendeel is bewezen, in plaats van – zoals het in een rechtsstaat hoort – andersom. En daarvan krijg ik een nare smaak in mijn mond.
– Jack Nouws, Macfundamentalist
Volgende week dinsdag verschijnt de members-only editie van MacFan. De eerstvolgende reguliere nieuwsbrief verschijnt op 14 september.