Frontend Academy · leksjon

git init, add, commit og status

Initialiser et repository, klargjør endringer med git add, opprett commits, og les git status og git log for å forstå historikken.

Leksjon 1 av 413 trinn

git init, add, commit og status er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hvorfor versjonskontroll?

Git sporer alle endringer i koden over tid. Du kan se hva som ble endret, når og hvorfor. Feil kan gjenopprettes. Flere personer kan arbeide på samme kodebase. Alle profesjonelle team bruker Git.

git init – starte et repository

Kjør git init i en hvilken som helst mappe for å initialisere et Git-repository. Git oppretter en skjult .git-mappe som lagrer hele prosjekt historikken.

mkdir my-project && cd my-project
git init
# Initialized empty Git repository in ./my-project/.git/

De tre områdene

Git har tre områder: Arbeidskatalog (filer Du redigerer), Staging-område (filer som er merket for neste commit) og Repository (historikk med commits). Staging-området lar Deg sette sammen presise commits.

git status – Hva er endret?

git status viser hvilke filer som ikke spores, er endret eller er lagt til i staging-området. Bruk kommandoen jevnlig i arbeidsflyten for å forstå den aktuelle tilstanden.

git status
# Output:
# On branch main
# Changes not staged for commit:
#   modified: index.html
# Untracked files:
#   styles.css

git add – legge endringer i staging

git add filename legger en bestemt fil i staging-området. git add . legger alle endringer i den gjeldende mappen i staging-området. git add -p legger endringer i staging interaktivt (del for del).

git add index.html           # stage one file
git add src/                 # stage a directory
git add .                    # stage everything
git add -p                   # interactive staging

git commit – lagre et øyeblikksbilde

git commit -m 'message' oppretter et varig øyeblikksbilde av endringene i staging-området. Meldingen bør beskrive hvorfor endringen ble gjort, ikke hva som ble endret. Hver commit har en unik SHA-hash.

git commit -m 'feat: add user authentication form'
git commit -m 'fix: correct email validation regex'
git commit -m 'refactor: extract validation into helper function'

Conventional Commits

Mange team bruker formatet Conventional Commits: type(scope): description. Vanlige typer er: feat, fix, refactor, test, docs, chore og perf. Dette muliggjør automatisk generering av endringslogger og semantisk versjonering.

feat(auth): add Google OAuth login
fix(cart): prevent duplicate item addition
docs(api): add rate limit documentation
chore(deps): upgrade React to 18.3

git log – vise historikken

git log viser commit-historikken. git log --oneline viser en kompakt visning med én linje per commit. git log --graph tegner grenstrukturen.

git log --oneline --graph
# * a1b2c3d feat: add dark mode toggle
# * d4e5f6g fix: resolve mobile nav overflow
# * 7h8i9j0 refactor: extract theme hook

git diff – se hva som er endret

git diff viser endringer som ikke er lagt i staging-området. git diff --staged viser endringer som er lagt i staging-området. git diff HEAD viser alle endringer siden forrige commit.

Filen .gitignore

List opp filer og mapper som skal utelates fra versjonskontroll, i .gitignore. Ignorer alltid node_modules, .env, dist og build-mapper. GitHub tilbyr gitignore-maler for alle språk og rammeverk.

# .gitignore
node_modules/
dist/
.env
.env.local
*.log
.DS_Store
coverage/

git restore – angre endringer utenfor staging

git restore filename forkaster endringer i en fil i arbeidskatalogen og tilbakestiller den til den sist committe versjonen. Dette er destruktivt – endringene går tapt.

git restore index.html        # discard unstaged changes
git restore --staged file.js  # unstage without losing changes

Hurtigsjekk

Hva gjør git add .?

Besvar den i den interaktive leksjonen

Oppsummering: Sentrale Git-kommandoer

git init starter et repo. git status viser den aktuelle tilstanden. git add legger filer i staging-området. git commit lagrer et øyeblikksbilde med en melding. git log viser historikken. git diff viser endringer. .gitignore utelater filer. Skriv alltid meningsfulle commit-meldinger som forklarer hvorfor, ikke hva.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «git init, add, commit og status» gratis?

Ja – hele teksten i «git init, add, commit og status» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «git init, add, commit og status»?

Initialiser et repository, klargjør endringer med git add, opprett commits, og les git status og git log for å forstå historikken. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «git init, add, commit og status»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Frontend Academy