Arbetsprocess för utveckling och publicering

Den här sidan beskriver hela arbetsprocessen för hur webbplatsen har utvecklats, automatiserats och publicerats. Fokus har varit att skapa en tydlig struktur där så mycket som möjligt sker automatiskt med hjälp av Node.js-baserade verktyg, samtidigt som projektet är enkelt att förstå och återskapa.

1. Versionshantering med Git och GitHub

Projektet versionshanteras med Git och lagras i ett publikt repository på GitHub. Arbetet är uppdelat i två grenar (branches):

development – används under själva utvecklingsarbetet
main – innehåller den stabila version som publiceras

Allt arbete sker på development-branchen. När en fungerande version är färdig merge:as den till main. Detta gör att halvfärdiga ändringar aldrig publiceras av misstag.

Regelbundna commits görs under arbetets gång, med tydliga och beskrivande commit-meddelanden som visar vad som har ändrats och varför.

2. Utvecklingsmiljö med Node.js, npm och Vite

Projektet använder Node.js och npm (Node Package Manager) för att hantera verktyg och automatiserade uppgifter.

När repot klonas kan hela projektet återskapas genom att köra:

npm install

Alla nödvändiga verktyg installeras då automatiskt via package.json.

Lokal utveckling

Under utveckling används Vite som utvecklingsserver. Den startas med:

npm run dev

Detta gör att webbplatsen körs via en lokal server i webbläsaren. Vite uppdaterar sidan automatiskt när filer sparas, vilket gör utvecklingsarbetet snabbare och mer effektivt.

3. Projektstruktur och filhantering

Projektet är uppdelat i tydliga delar för att skilja mellan arbetsfiler och publiceringsfiler.

Arbetsfiler

HTML-filer (index.html, bilder.html, process.html) ligger i projektets rot
CSS-filer ligger i src/css/
JavaScript-filer ligger i src/js/
Bilder hanteras i en strukturerad mappstruktur

Publiceringsfiler

När projektet byggs skapas en mapp som heter:

dist/

Den innehåller den färdiga versionen av webbplatsen och är den enda mapp som publiceras.

4. HTML och navigation

Webbplatsen består av tre HTML-sidor:

Startsida
Bildsida
Process-sida

Alla HTML-filer ligger i projektets rot, vilket gör att Vite kan inkludera dem som separata sidor i byggprocessen (så kallad multi-page build).

Navigationen använder relativa länkar (./) för att säkerställa att länkarna fungerar både lokalt och när webbplatsen publiceras via GitHub Pages.

5. CSS, JavaScript och interaktivitet

CSS används för layout, responsiv design och visuell presentation. Alla stilar är samlade i separata filer för bättre struktur.

JavaScript används för enklare funktionalitet, bland annat:

aktiv navigation, där aktuell sida markeras i menyn

Detta gör att användaren tydligt ser vilken sida som är aktiv.

6. Bildhantering och automatiserad optimering

Bilder är ofta den största delen av en webbplats i filstorlek. För att förbättra prestanda används automatiserad bildoptimering.

Struktur för bilder

Bildhanteringen är uppdelad i två steg:

Originalbilder (raw) – utgångsmaterial i hög kvalitet
Optimerade bilder (optimized) – genererade versioner i moderna format

Optimeringen görs med Sharp (via sharp-cli) och npm-scripts definierade i package.json.

Npm-scripts för bilder

Följande scripts används:

rensa gamla optimerade bilder
konvertera originalbilder till WebP och AVIF
automatiskt köra optimering vid ändringar (watcher)

Genom att köra:

npm run images

genereras alltid uppdaterade och optimerade bilder utan manuellt arbete.

7. Användning av public-mappen

För att säkerställa att bilder fungerar vid publicering används Vites public/-mapp.

Allt som placeras i public/:

bearbetas inte av Vite
kopieras automatiskt rakt in i dist/ vid build
behåller sin sökväg i den publicerade webbplatsen

Detta gör att bilder kan nås via enkla, relativa URL:er (t.ex. ./images/...) både lokalt och på GitHub Pages.

Användningen av public/-mappen är särskilt lämplig för statiska resurser som bilder, eftersom det garanterar att de inkluderas korrekt i publiceringsversionen.

8. Byggprocess (minifiering och publicering)

När projektet är redo för publicering körs:

npm run build

Detta gör att:

CSS och JavaScript minifieras automatiskt
alla sidor samlas i dist/
projektet optimeras för produktion

Vite hanterar hela byggprocessen utan att man behöver göra något manuellt.

9. Automatisk publicering med GitHub Actions

För att publicering ska ske automatiskt används GitHub Actions.

En workflow-fil (deploy.yml) ligger i .github/workflows/ och körs när kod pushas till main-branchen.

Workflowen:

hämtar projektet från GitHub
installerar dependencies
kör bildoptimering
bygger projektet
publicerar dist/ till GitHub Pages

Detta gör att hela publiceringsprocessen sker automatiskt utan manuella steg.

10. Publicerad webbplats

Webbplatsen är publicerad via GitHub Pages och nås på:

https://coco10023.github.io/site/

Alla ändringar i main publiceras automatiskt på denna adress.

Sammanfattning

Projektet använder:

Git och branches för versionshantering
Node.js och npm för automatisering
Vite för utveckling och build
Sharp för bildoptimering
GitHub Actions för automatisk publicering

Denna arbetsprocess gör projektet lätt att återskapa, lätt att vidareutveckla, effektivt att publicera och tydligt strukturerat även för framtida projekt.

Detta är i praktiken samma typ av flöde som ofta används i moderna frontend-projekt.