# Kom igång med din egen webbplats på Mac (Astro + Markdown + AI)

Detta dokument kan du använda som instruktion, prompt eller projektregel för din egen AI-kodassistent (t.ex. Antigravity, Claude Code, Cursor, Copilot m.fl.) på macOS.

---

## 1. Syfte och vision
Bygg en snabb, minimalistisk och innehållsdriven webbplats (blogg, författarsajt, portfoliosajt eller kunskapsbank) baserad på fri och modern öppen källkod.
- **Filformat:** Allt innehåll skrivs i ren Markdown (.md) eller MDX.
- **Prestanda:** Statiskt genererade sidor (SSG) utan tung databas i bakgrunden.
- **Kostnad:** Helt gratis att utveckla, versionshantera och publicera.

---

## 2. Den rekommenderade verktygslådan på Mac

1. **Skrivverktyg:**
   - **Typora** (eller gratisalternativ som Obsidian, MacDown eller VS Code) för att skriva texter i ren Markdown med omedelbar förhandsvisning.
2. **Webbramverk:**
   - **Astro** – världens mest moderna ramverk för innehållssajter. Genererar statisk HTML med noll onödig JavaScript för besökaren.
3. **AI-parprogrammerare:**
   - **Antigravity** (eller Claude Code, Cursor) som körs direkt mot din kodmapp i macOS terminal/miljö.
4. **Versionshantering:**
   - **Git och GitHub** – håller reda på all historik och ändringar, tryggt och gratis i ett privat eller publikt arkiv.
5. **Driftsättning och hosting:**
   - **Cloudflare Pages** (eller GitHub Pages / Vercel / Netlify) – gratis global distribution med blixtsnabb CDN, automatisk SSL och driftsättning vid varje git push.

---

## 3. Grundläggande terminalkommandon på Mac

Öppna Terminalen på din Mac (eller terminalen inuti din AI-assistent) och kör följande steg:

### Steg A: Skapa ett nytt Astro-projekt
```bash
# 1. Skapa ett nytt projekt med Astro
npm create astro@latest min-nya-webbplats

# Följ instruktionerna i terminalen:
# - Välj en mall (t.ex. 'Blog' eller 'Empty')
# - Installera dependencies (ja)
# - Initiera git-arkiv (ja)

# 2. Gå till projektmappen
cd min-nya-webbplats

# 3. Starta lokal utvecklingsserver
npm run dev
```
Webbplatsen öppnas nu lokalt på `http://localhost:4321`.

### Steg B: Struktur för innehåll (Content Collections)
Skapa mappar under `src/content/`:
- `src/content/blog/` (för dina blogginlägg i .md-format)
- `src/content/sidor/` (för vanliga sidor)

Exempel på frontmatter i en markdown-fil:
```markdown
---
title: 'Mitt första inlägg'
publishDate: 2026-10-10
summary: 'En kort sammanfattning som visas i listor.'
tags: ['Skrivande', 'Kreativitet']
---

Här börjar min brödtext skriven i ren Markdown...
```

### Steg C: Koppla till GitHub och Cloudflare Pages
```bash
# Spara ändringar i git
git add .
git commit -m "Första versionen av min sajt"

# Skapa ett arkiv på GitHub och pusha
git remote add origin https://github.com/DITT-ANVANDARNAMN/min-nya-webbplats.git
git branch -M main
git push -u origin main
```
Gå sedan till [Cloudflare Pages](https://pages.cloudflare.com/), välj **Connect to Git**, peka ut ditt arkiv och välj bygginställningen **Astro** (`npm run build`, output: `dist`). Varje gång du sparar och pushar publiceras sajten globalt inom några sekunder!

---

## 4. Instruktion du kan klistra in i din AI-assistent

> "Du är min tekniska parprogrammerare. Vi bygger en ren och snabb webbplats med Astro och Markdown på macOS. 
> Följ dessa principer:
> 1. Allt textinnehåll ska ligga i `src/content/` som Markdown-filer med tydlig YAML frontmatter.
> 2. Koden ska vara ren, minimalistisk och följa modern webbstandard (semantisk HTML, god tillgänglighet och modern CSS utan onödiga ramverk).
> 3. Håll laddtiderna extremt låga och optimera alla bilder till WebP.
> 4. Hjälp mig att bygga snygga mallar och komponenter steg för steg så att jag förstår hur koden hänger ihop."

---

*Skapat i andan att dela med sig fritt och öppet. Lycka till med ditt skapande!*