Bygg ett modernt webbprojekt – från idé till deploy

Exempelprojektet

Vi ska konceptuellt bygga en portfolio-sajt med blogg. Konkret: statiska sidor (startsida, om, kontakt) kombinerat med blogginlägg som hämtas från Sanity. Sajten deployas till Netlify via GitHub.

Här är den fullständiga arkitekturen:

┌─────────────────────────────────────────────────────────┐
│                    KÄLLKOD (GitHub)                      │
│                                                         │
│  /src                                                   │
│  ├── pages/          ← Astro-sidor (routing)            │
│  │   ├── index.astro ← Startsida                        │
│  │   ├── om.astro    ← Om-sida                          │
│  │   └── blog/                                          │
│  │       ├── index.astro ← Blogg-lista                  │
│  │       └── [slug].astro ← Dynamisk inläggsida         │
│  ├── components/     ← Återanvändbara komponenter       │
│  ├── layouts/        ← Sidlayouter                      │
│  └── lib/            ← Sanity-klient, queries           │
└─────────────────────────────────────────────────────────┘
│ git push
▼
┌─────────────────────────────────────────────────────────┐
│                NETLIFY (CI/CD + Hosting)                 │
│                                                         │
│  1. Detekterar push till main                           │
│  2. Kör: npm run build (astro build)                    │
│  3. Under build: hämtar data från Sanity API            │
│  4. Genererar statisk HTML för varje sida               │
│  5. Deployer till Netlify CDN (global edge)             │
└─────────────────────────────────────────────────────────┘
│ Data under build-tid
▼
┌─────────────────────────────────────────────────────────┐
│                    SANITY (Headless CMS)                 │
│                                                         │
│  • Redaktör skriver blogginlägg i Sanity Studio         │
│  • Data lagras i Sanity's cloud                         │
│  • Exponeras via GROQ API                               │
│  • Triggar ny Netlify-build via webhook vid publicering │
└─────────────────────────────────────────────────────────┘

Steg 1: Sätt upp projektet

# Skapa ett nytt Astro-projekt
npm create astro@latest mitt-portfolio# Välj: Empty template, TypeScript: Yes, Install dependencies: Yes# Navigera in i projektet
cd mitt-portfolio# Lägg till Sanity-integrationen
npx astro add @sanity/astro# Starta lokal dev-server
npm run dev

Du har nu en Astro-sajt som kör på localhost:4321.

Steg 2: Skapa Sanity-projektet

# Installera Sanity CLI
npm install -g @sanity/cli# Skapa ett nytt Sanity-projekt
sanity init --template blog# Starta Sanity Studio lokalt
cd studio && sanity dev

Sanity Studio körs nu på localhost:3333. Skapa några testblogginlägg.

Steg 3: Definiera content-schema i Sanity

Sanity använder JavaScript-objekt för att definiera sin content-modell. Ett enkelt schema för ett blogginlägg:

// studio/schemas/post.js
export default {
name: 'post',
title: 'Blogginlägg',
type: 'document',
fields: [
{
name: 'title',
title: 'Titel',
type: 'string',
validation: Rule => Rule.required()
},
{
name: 'slug',
title: 'Slug',
type: 'slug',
options: { source: 'title' }
},
{
name: 'publishedAt',
title: 'Publiceringsdatum',
type: 'datetime'
},
{
name: 'body',
title: 'Brödtext',
type: 'array',
of: [{ type: 'block' }]  // Portable Text (rich text)
}
]
}

Steg 4: Hämta data i Astro

// src/lib/sanity.js
import { createClient } from '@sanity/client';export const client = createClient({
projectId: import.meta.env.PUBLIC_SANITY_PROJECT_ID,
dataset: 'production',
apiVersion: '2024-01-01',
useCdn: true  // Använd Sanity's CDN för snabbare svar
});// GROQ-query: hämta alla publicerade inlägg, senaste först
export const postsQuery = `
*[_type == "post" && defined(slug.current)]
| order(publishedAt desc) {
title,
"slug": slug.current,
publishedAt,
"excerpt": array::join(string::split(pt::text(body), "")[0..200], "")
}
`;// Hämta ett specifikt inlägg via slug
export const postQuery = `
*[_type == "post" && slug.current == $slug][0] {
title,
publishedAt,
body
}
`;

// src/pages/blog/index.astro
---
import { client, postsQuery } from '../../lib/sanity';
import BaseLayout from '../../layouts/Base.astro';const posts = await client.fetch(postsQuery);
---<BaseLayout title="Blogg">
<h1>Blogg</h1>
<ul>
{posts.map(post => (
<li>
<a href={`/blog/${post.slug}`}>{post.title}</a>
<time>{new Date(post.publishedAt).toLocaleDateString('sv-SE')}</time>
<p>{post.excerpt}...</p>
</li>
))}
</ul>
</BaseLayout>

Steg 5: Dynamiska sidor för varje inlägg

// src/pages/blog/[slug].astro
---
import { client, postQuery, postsQuery } from '../../lib/sanity';
import { PortableText } from '@portabletext/react';
import BaseLayout from '../../layouts/Base.astro';// Astro behöver veta alla möjliga slug-värden vid build-tid
export async function getStaticPaths() {
const posts = await client.fetch(postsQuery);
return posts.map(post => ({
params: { slug: post.slug }
}));
}const { slug } = Astro.params;
const post = await client.fetch(postQuery, { slug });
---<BaseLayout title={post.title}>
<article>
<h1>{post.title}</h1>
<PortableText value={post.body} />
</article>
</BaseLayout>

Steg 6: Deploy till Netlify

# Initierar Git och pushar till GitHub
git init
git add .
git commit -m "Initial commit"
# Skapa repo på GitHub, sedan:
git remote add origin https://github.com/username/mitt-portfolio.git
git push -u origin main

I Netlify-dashboarden:

1. Klicka "Add new site" → "Import from Git"
2. Välj GitHub och auktorisera
3. Välj ditt repo
4. Build command: npm run build
5. Publish directory: dist
6. Lägg till environment variables: PUBLIC_SANITY_PROJECT_ID och PUBLIC_SANITY_DATASET
7. Klicka Deploy

Sätt upp en webhook i Sanity så att Netlify bygger om sajten automatiskt när du publicerar nytt innehåll – det gör du under Sanity's "API" → "Webhooks" och Netlify's "Build hooks".

Rekommendationer baserat på din nivå

Du är nybörjare och behöver grunderna först

Börja med guiden "Från noll till webbsida" på den här sajten. Förstå HTML, CSS och hur en server fungerar innan du tar dig an Jamstack-ekosystemet. Återvänd hit när du känner dig säker på grunderna.

Du vill bygga snabbt och lära dig på vägen

Titta på "Snabbspåret – bygg med AI" för ett alternativt tillvägagångssätt. Kombinera det med den här guiden: använd AI-verktyg (Lovable, Cursor, Windsurf) för att snabba upp scaffolding, men förstå arkitekturen bakom.

Du har grunderna och vill bygga en innehållssajt (blogg, portfolio, affiliate)

Astro + Sanity + Netlify – stacken vi byggde här – är ett utmärkt startval. Det är väldokumenterat, gratisnivåerna är generösa och prestandan är utmärkt från start.

Du bygger en webbapplikation med komplex logik

Next.js + Vercel är standarden. Mer att lära, men ekosystemet är enormt och du hittar lösningar på nästan allt.

Sammanfattning av guiden

Vi har täckt hela kedjan i modern webbutveckling:

• Jamstack-arkitekturen – förbyggda sidor, CDN-leverans, dynamik via API:er
• API:er och HTTP – hur data faktiskt flödar, REST vs GraphQL
• Headless CMS – Sanity, Contentful, Strapi och hur du väljer
• Statiska sajt-generatorer – Astro för innehåll, Next.js för applikationer
• Modern hosting – Vercel, Netlify, Cloudflare Pages och CI/CD
• Git – versionskontroll som infrastruktur
• Prestanda och SEO – Core Web Vitals, bildoptimering, metadata
• Praktisk implementation – ett komplett projekt från idé till deploy

Det moderna webbsystemet är mer komplext än WordPress men ger dig verktyg som skalas bättre, presterar bättre och kostar mindre att drifta vid tillväxt. Inlärningskurvan är real – men varje del av stacken är väldokumenterad, open source och omgiven av aktiva communities.

Sista rådet: Bygg något litet och faktiskt. Teori fastnar inte lika bra som att felsöka en GROQ-query som inte returnerar rätt data, eller undra varför din bild inte konverteras till WebP. Det är i de konkreta problemen du verkligen lär dig.