Blogg
Hur Akajos är byggd – och hur du kan bygga din egen drömsajt gratis
Jag har byggt denna sida med hjälp av Google Antigravity. Efter att ha byggt hemsidor sedan 1998 (de flesta i Wordpress) släppte jag kontrollen helt. Nu har jag bett Antigravity att skriva hur akajos.com är skapad. Jag vill upprepa det jag sagt på andra ställen – alla litterära texter är 100 procent mina egna. Men texter som tillhör hemsidan kan vara AI, de kan vara mina, de kan vara en blandning. När denna mening är slut är resten av detta inlägg från AI.
Tack för ordet, Christer! Här kommer den ocensurerade, transparenta och tekniska sanningen om hur vi tillsammans byggde och driver akajos.com från en Mac i Linköping – och hur du själv kan göra samma resa helt gratis (så långt det bara går) på antingen Mac eller Windows.
I en tid då webben ofta känns överlastad med sega skript, dyra månadsprenumerationer och låsta databaser ville vi gå tillbaka till webbens ursprungliga löfte: rena textfiler, blixtsnabb prestanda och total frihet.
Här är de fem hörnstenarna som bygger sajten:
1. Skrivmaskinen: Typora och ren Markdown (.md)
Grunden för hela webbplatsen är att allt innehåll skrivs i ren Markdown. Alla sagor, dikter, boksidor och blogginlägg är enkla textfiler som slutar på .md.
Varför detta är fantastiskt:
- Du äger dina ord: Dina texter är inte inlåsta i en SQL-databas eller bakom ett lösenord hos en molntjänst. Om 40 år kan du fortfarande öppna en
.md-fil i vilket enkelt textprogram som helst. - Distraktionsfritt: Christer skriver i programmet Typora på macOS. Det ger en avskalad skrivmiljö där man slipper menyer och ser rubriker, citat och text växa fram direkt.
- Resurser:
- Typora (Mac, Windows, Linux)
- Gratisalternativ: Obsidian (Mac och PC), MarkText (Gratis och Open Source för PC och Mac) eller VS Code.
2. Parprogrammeraren: Google Antigravity
Christer är författare och poet, inte heltidsutvecklare. Här kommer jag, Antigravity, in i bilden som en outtröttlig parprogrammerare.
När Christer vill lägga till en ny saga, justera ett färgsystem, konvertera tunga bilder till WebP eller bygga ett interaktivt taggmoln berättar han vad han vill uppnå i vanlig svensk text. Jag kör kommandon, analyserar projektstrukturen, skriver modern semantisk kod och testbygger allt i bakgrunden.
- AI:n ersätter inte den kreativa själen – den tar bort det tekniska friktionsmotståndet så att författaren kan fokusera på det litterära verket.
- Resurser:
- AI-kodverktyg som Google Antigravity, Claude Code eller Cursor (Mac och PC) som kan arbeta direkt i din lokala kodmapp.
3. Motorn: Astro och den typografiska mallen (Keel)
Som webbramverk använder sajten Astro. Det är utan tvekan det modernaste verktyget i dag för innehållsdrivna webbplatser, författare och skribenter.
Mallen som gav grunden: Keel
För att inte börja från noll utgick vi från en fri och öppen Astro-mall som heter Astro Keel (skapad av kpab på GitHub) – finns även på Astro Themes.
Keel är en minimalistisk, neutral och redaktionell mall som sätter läsbarheten och orden i första rummet.
Typografin – modern, varm och lättläst
Webbplatsens form och känsla styrs mycket av dess två noga utvalda typsnitt:
- Rubriker och display: Fraunces Variable – ett prisbelönt, modernt antikva-typsnitt med rötter i tidigt 1900-tal. Det ger sagorna, böckerna och dikterna en varm, litterär och personlig karaktär utan att kännas dammigt.
- Brödtext och läsning: Public Sans – ett neutralt, modernt och extremt lättläst grotesk-typsnitt som ursprungligen togs fram för att maximera läsbarheten på skärmar och i mobiler. Perfekt radavstånd och hög kontrast gör att långa sagor och essäer inte tröttar ut ögonen.
- Kod och tekniska detaljer: JetBrains Mono – för tydliga och luftiga kodrutor.
Fördelarna med Astro som motor:
- Blixtsnabb laddtid (Zero JS by default): Astro genererar färdig HTML i förväg. När en besökare läser en saga eller dikt laddas sidan på bråkdelen av en sekund – utan att besökarens mobil tvingas ladda ner megabyte av tung JavaScript.
- Content Collections: Astro har ett inbyggt typsäkert system för Markdown-filer. Det håller automatiskt koll på ordning, publiceringsdatum, taggar, ljudfiler och omslagsbilder.
- Fria mallar: Det finns hundratals andra fria gratismallar att ladda ner och utforska på Astro Themes.
4. Tryggheten och tidsmaskinen: Git och GitHub
Varje gång en dikt finputsas, en saga publiceras eller koden uppdateras sparas ändringarna via versionshanteringssystemet Git och skickas upp till GitHub.
Varför det är oumbärligt:
- Total historik: Allt sparas som i en tidsmaskin. Skulle något gå fel eller raderas av misstag kan man backa bandet på två sekunder.
- Backup: All källkod och alla texter finns tryggt säkerhetskopierade i molnet.
- Helt gratis: Både Git och privata eller öppna arkiv på GitHub kostar noll kronor.
- Resurser:
5. Publiceringen: Cloudflare Pages (ersätter traditionellt webbhotell)
Här kommer den kanske största överraskningen för den som är van vid gamla tiders webb: du behöver inte köpa något traditionellt webbhotell.
Förr i tiden betalade man hundralappar varje år till webbhotell för serverutrymme, PHP och MySQL-databaser. I dag tar Cloudflare Pages hand om hela hosting-biten helt gratis!
Vad Cloudflare Pages är och gör:
- Ersätter webbhotellet helt: Webbplatsens filer ligger inte på en ensam, sårbar server i ett källarkontor. De distribueras ut på Cloudflares globala CDN (över 300 datacenter runt jorden).
- Automatisk byggprocess: Varje gång jag sparar en text och pushar till GitHub känner Cloudflare av det automatiskt. Inom 15–30 sekunder byggs sajten om och den nya versionen är live i hela världen.
- Blixtsnabb hastighet och gratis SSL: Besökare i Sverige, USA eller Japan får samma omedelbara responstid, och gratis säkerhetskryptering (https) ingår med ett klick.
- Generös gratisnivå: För personliga projekt, författarsajter och föreningar är Cloudflare Pages 100 procent gratis att använda.
- Resurser:
- Cloudflare Pages
- Fina gratisalternativ som fungerar på samma sätt: GitHub Pages, Vercel eller Netlify.
Ladda ner startfiler och instruktioner för din egen AI
För att göra det så enkelt som möjligt att komma igång har vi satt ihop två konkreta startguider i ren Markdown – en anpassad för Mac och en för Windows (PC).
Du kan ladda ner filen, öppna den i din textredigerare eller klistra in instruktionerna rakt in i din egen AI-assistent (som Antigravity, Cursor eller Claude Code) som en startinstruktion för ditt nya webbprojekt:
- 🍏 Ladda ner startguide för Mac (startguide-webb-mac.md)
- 🪟 Ladda ner startguide för PC/Windows (startguide-webb-pc.md)
Vad kommer härnäst?
Det här var den övergripande bilden av hur själva webbplatsen är uppbyggd. Längre fram planeras fler inlägg där vi dyker djupare in i hur Christers e-böcker (ePub) och tryckfärdiga böcker skapas med öppna verktyg.
Hoppas detta kan inspirera dig att bygga något eget och ta makten över ditt digitala hem!
Christer Barregren låter hälsa att han har ett fast jobb som han tänker behålla till dess han går i pension. Han är därför inte längre tillgänglig som frilansande webbutvecklare. För alla tekniska frågor som du har hänvisar vi till närmaste AI.
Kommentarer
Inga kommentarer än. Lämna gärna en hälsning!