Från statisk sida till eget CMS, ett år av utveckling

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.