Från statisk sida till eget CMS, ett år av utveckling
Det här inlägget är en genomgång av hur min portfolio har vuxit fram, från en enkel statisk HTML-sida till ett fullständigt CMS-drivet system som jag byggt från grunden.
Hur det började
Jag startade med en klassisk statisk sida: HTML, CSS och lite JavaScript. Det fungerade, men varje gång jag ville uppdatera något behövde jag in i koden. Textredigering direkt i VS Code, commit, deploy. Repetitivt och tråkigt.
Jag insåg rätt snabbt att jag ville ha något mer flexibelt — framförallt för blogg och projekt. Tanken på att hårdkoda varje blogginlägg i JSX kändes inte hållbar.
Valet av stack
Jag landade i Next.js med App Router, Prisma som ORM och PostgreSQL som databas. För media-uppladdning använder jag Cloudflare R2, S3-kompatibelt och utan egress-avgifter.
Varför inte ett färdigt CMS som Contentful eller Sanity? Jo, delvis för att jag ville lära mig, men också för att jag ville ha full kontroll. Ett eget system innebär att jag kan lägga till precis den funktionalitet jag behöver, och skippa det jag inte behöver.
Admin-gränssnittet
Jag byggde ett eget admin-gränssnitt för att hantera sidor, sektioner, blogginlägg och projekt. Det är lösenordsskyddat via en enkel session-baserad autentisering.
Några saker som krävde mer arbete än jag förväntade mig:
Sektionssystemet, varje sida består av sektioner med olika typer (hero, text, grid, etc). Varje sektion har ett schema som styr vilka fält som visas i admin.
Flerspråksstöd, sidor och projekt kan ha översättningar per locale. Det kräver ett genomtänkt databasschema och konsekvent hantering i alla queries.
Mediabanken, uppladdning till R2, generering av förhandsvisningar och alt-text per språk.
Deploy-pipeline
Applikationen körs i Docker på en VPS. GitHub Actions bygger imagen vid varje push till main och pushar till GitHub Container Registry. Servern hämtar den nya imagen och startar om containern, hela deployen tar under en minut med ungefär fem sekunders downtime.
Det var inte trivialt att sätta upp, men nu fungerar det smidigt. En av de knepigare buggarna var att docker-compose v1 kraschade med ett KeyError: ContainerConfig,fel mot BuildKit-images, löst med en specifik sekvens av rm -sf + up istället för --force-recreate.
Vad jag lärt mig
Att bygga ett eget CMS är ett utmärkt sätt att verkligen förstå hur de stora systemen fungerar. Jag har fått hands-on erfarenhet av:
Databasmodellering med relationer och translations-mönster
Server components och streaming i Next.js App Router
Docker och grundläggande DevOps
Cloudflare Workers och R2 för edge-distribution
Det som tog längst tid var inte koden, det var att förstå varför saker fungerar som de gör. Det är skillnaden mellan att kopiera ett mönster och att faktiskt äga det.
Nästa steg
Det finns fortfarande saker kvar på listan: analytics, bättre SEO-verktyg i admin, och korsreferenser mellan projekt och blogginlägg. Men systemet är stabilt nog för produktionsbruk, vilket den här sidan bevisar.