ArtiklarGuiderVibe CodingVerktygResurserOmKontakt
← Alla artiklar

Deploy och hosting – från lokal kod till live-sajt

Simon Nyström3 min läsning

Moderna hosting-tjänster gör deploy nästan magiskt enkelt. En push till Git och sajten är live.

Modern webbutveckling – headless, API:er och Jamstack
Vad är Jamstack och varför används det?Hur webben fungerar – requests, responses och API:erHeadless CMS – innehåll utan designStatiska sajt-generatorer – Next.js, Astro och andra5Deploy och hosting – från lokal kod till live-sajt6Git och versionskontroll – grunden för modernt arbetsflöde7Prestanda och SEO i moderna webbprojekt8Bygg ett modernt webbprojekt – från idé till deploy
← FöregåendeNästa →

Hur hosting har förändrats

Traditionell webhosting innebär att du hyr utrymme på en server, ansluter via FTP och laddar upp filer manuellt. Det fungerar men det är manuellt, saknar versionering och ger dig ett enda geografiskt läge att serva din trafik från.

Modern Jamstack-hosting bygger på tre principer som förändrar bilden fundamentalt:

  1. Git som sanningskälla: Din kod lever i ett Git-repo (GitHub, GitLab, Bitbucket). Det är den enda platsen.
  2. Automatisk CI/CD: Varje push till main-branchen triggar automatiskt en build och deploy. Du laddar aldrig upp filer manuellt.
  3. Globalt CDN: Dina statiska filer distribueras till datacenter runt om i världen. Besökare i Tokyo laddar filen från Tokyo, inte från en server i Frankfurt.

CI/CD – vad det faktiskt innebär

CI/CD står för Continuous Integration / Continuous Deployment. Det låter enterprise-komplext men grundkonceptet är enkelt:

Du: git push origin main
↓
Hosting-tjänst: "Ny kod detekterad!"
↓
Automatisk build körs (npm run build / astro build / next build)
↓
Build-artifacts laddas upp till CDN
↓
Sajten är live med den nya koden – på 30–120 sekunder

Hela flödet är automatiserat. Om builden misslyckas får du ett e-postmeddelande och den gamla versionen är fortfarande live. Det är inbyggd säkerhet mot att drifta en trasig sajt.

De viktigaste hosting-alternativen

Vercel

Vercel är företaget bakom Next.js och deras hosting är optimerad för det – men fungerar utmärkt med alla frameworks. Gratisnivån är generös för hobby-projekt och inkluderar automatiska preview-deployments för varje pull request (en stor fördel i team). Vercel är känd för det snabbaste deploy-flödet och bäst Next.js-integration.

Netlify

Netlify var länge synonymt med Jamstack-hosting och är fortfarande ett utmärkt val. Bra gratisplan, inbyggda formulär (utan backend-kod), identity/auth-funktioner och edge functions. Något mer agnostiskt än Vercel vad gäller ramverk.

Cloudflare Pages

Cloudflare Pages kombinerar Cloudflares globala nätverk (ett av de största i världen) med enkel Git-baserad deploy. Generös gratisplan med obegränsad bandbredd – det är unikt. Cloudflare Workers (serverlösa funktioner) integreras sömlöst. Värt att notera att Cloudflares developer-plattform fortsatte växa kraftigt 2024–2026 och är nu ett konkurrenskraftigt alternativ till Vercel.

GitHub Pages

GitHub Pages är det enklaste alternativet – hostar statiska filer direkt från ett GitHub-repo utan extra konfiguration. Gratis, enkelt, men begränsat: inga serverlösa funktioner, ingen build-pipeline utöver GitHub Actions (som du sätter upp själv), och kräver publika repos på gratisnivå. Bra för dokumentation och enkla projekt.

Jämförelsetabell

TjänstGratisnivåBäst förBegränsningar (gratis)
VercelGenerösNext.js, React-appar, teamsKommersiella projekts bandbreddslimiter [VERIFIERA]
NetlifyGenerösJamstack-generellt, formulärBuild minutes per månad [VERIFIERA]
Cloudflare PagesMycket generösHög trafik, obegränsad BWWorkers-anrop har daglig gräns [VERIFIERA]
GitHub PagesGratisEnkel statisk hosting, docsIngen build-pipeline, inga functions

Edge computing och CDN – kort förklaring

CDN (Content Delivery Network) innebär att dina filer kopieras till datacenter runt om i världen. "Edge" är ett steg längre: kod (serverlösa funktioner) körs nära användaren geografiskt, inte i ett centralt datacenter. Cloudflare Workers och Vercel Edge Functions är exempel. Det ger minimal latency även för dynamiska operationer.

Typiskt arbetsflöde

1. Du skapar ett nytt Next.js/Astro-projekt lokalt:
npx create-astro@latest mitt-projekt2. Initierar ett Git-repo och pushar till GitHub:
git init && git add . && git commit -m "init"
git remote add origin https://github.com/username/mitt-projekt
git push -u origin main3. Kopplar GitHub-repot till Vercel/Netlify via deras dashboard
(en knapp, väljer repo, klickar Deploy)4. Hosting-tjänsten detekterar ramverket automatiskt,
konfigurerar build-kommando och output-katalog5. Varje framtida push till main → automatisk deploy
Varje pull request → automatisk preview-URL
Mitt råd: Börja med Netlify eller Vercel. Båda har utmärkta gratisnivåer och de bästa onboarding-flödena. Cloudflare Pages är det bästa valet när du börjar oroa dig för bandbredd eller vill ha Cloudflares ekosystem av Workers och KV-storage.

Nästa steg

Arbetsflödet jag beskrev ovan förutsätter att du använder Git. Nästa artikel handlar om just det – versionskontroll med Git, den färdighet som kanske ger mest utdelning per investerad inlärningstimme i modern webbutveckling.

← FöregåendeStatiska sajt-generatorer – Next.js, Astro och andraNästa →Git och versionskontroll – grunden för modernt arbetsflöde

Vill du jämföra verktyg?

Jämför de bästa vibe coding-plattformarna →