Webbsida på en halv dag för 14 dollar

Hur den här webbsidan är byggd.

2 semptember 2018 - -

Bakgrund

Jag ville ha en hemsida. Jag har en vag aning om vad jag ska ha den till. Efter flera månaders navelskåderi, och en halv dags arbete, har jag nu en hemsida.

Design

Jag har bestämt mig för att bara serva statiska filer. Varje URL går till en unik statisk fil. Efter att ha skrivit ihop något, är det tänkt att jag kör scripts på servern som genererar statiska HTML och kanske CSS-filer. Scripten kan behöva bygger om alla andra sidor (jag vill t.ex. ha en förstasida som listar undersidor). Sen servas allt från statiska URLer.

Inga databaser eller ramverk

Ett alternativ är att stoppa in allt (framtida) innehåll i en databas, och generera resultatet varje gång det kommer en förfrågan. I min erfarenhet brukar det bli långsamt, speciellt om man använder interpreterade språk som Ruby/Python/Javascript för server-koden. Jag har använt Django och Node tidigare. Prestandan lämnar en del i övrigt att önska. Dessutom är det inte värt krånglet och konfigurationen.

Nginx

Min första ide är Nginx som servar statiska filer. Nginx är enkelt att sätta upp, snabbare än Apache och verkar ha bra manualer och default-inställningar.

Minimera trafiken

Varje gång man går till en annan undersida, skapas minst ett request till webbservern. Det tänker inte jag försöka göra något åt. Men jag kan se till att filerna är små, och att det är få filer som behöver laddas vid varje request.

Just nu har jag fått ner antalet requests till 2: HTML-filen och stil-filen. Jag har också fått ner storleken på stilfilen. Från början var normalize.css strax under 50kb. Nu har jag reducerat den till 7kb genom att använda purifycss Scriptet filtrerar bort oanvänd CSS-kod. Det går igenom din HTML-kod och bygger en lista med selektorer. Sen matchar scriptet selektorerna med dem i CSS-filen. Allt som inte påverkar utseendet av din HTML-kod filtreras bort.

Scriptet lämnade kvar en fontlänk i min minimerade CSS-fil. Det är en 60kb stor fil som innehåller både en font och ikoner. Till råga på att den är 60kb stor, påverka den inte utseendet. Jag använder ett sed-kommando för att ta bort den.

Hela logiken ser hittills ut så här:

#!/bin/bash

# Pick the stuff I use from 'normalize.css'.
purifycss -m -r assets/normalize.css test.html -o assets/normalize_purified.css

# A bunch of fonts are left in normalize. Remove them.
sed s/[^{]*url[^}]*//g assets/normalize_purified.css > assets/copy_normalize_purified.css

# Keep the old purified css file as backup.
cp assets/copy_normalize_purified.css assets/normalize_purified.css

Så här såg första versionen ut:

Webhosting

Det här kostar pengar, och här vill jag spara. Jag har använt DigitalOcean tidigare för ca 70kr/månad. Det är nära smärtgränsen.

Loopia kan man få för 72kr/månad Vill man ha en virtuell server med 1/2 processorkärna blir det över 200/månad.

Amazon verkar ha det bästa erbjudandet: gratis!

Amazon single-storage

Nu servas texten du läser från Amazon.

Det var enkelt att sätta upp. Guiderna lovar att det inte kostar något när datamängden är liten. Jag vet inte var gränsen går eller vad som händer sen. Amazon kräver betalkortuppgifter för att skapa konto. De kanske börjar dra pengar från det registrerade kortet?

Det finns en budget-funktion på amazon. Om jag förstår det rätt, stängs din webbsida av om du går över budget. Men de försöker inte dra en stor summa pengar från kortet. Med budget-funktionen känns det genast lite tryggare.

För att inte behöva knappa in http://alkanero.com.s3-website.eu-central-1.amazonaws.com/, köpte jag alkanero.com på Amazon. Det kostar $14 per år.