Frontend Academy · Oppitunti

git init, add, commit ja status

Alusta repositorio, lisää muutokset staging-alueelle git add -komennolla, luo committeja ja lue git status- sekä git log -komentojen avulla projektin historiaa

Oppitunti 1/413 vaihetta

git init, add, commit ja status on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Miksi versionhallintaa?

Git seuraa koodin jokaista muutosta ajan mittaan. Näette, mitä muuttui, milloin ja miksi. Virheistä voi palautua. Useat henkilöt voivat työskennellä saman koodikannan parissa. Jokainen ammattimainen tiimi käyttää Gitiä.

git init — Aloita repositorio

Suorittakaa git init missä tahansa kansiossa Git-repositorion alustamiseksi. Git luo piilotetun .git-hakemiston, joka sisältää koko projektin historian.

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

Kolme aluetta

Gitissä on kolme aluetta: työhakemisto (muokkaamanne tiedostot), staging-alue (seuraavaa committia varten merkityt tiedostot) ja repositorio (commitoitu historia). Staging-alueella voitte muodostaa täsmällisiä committeja.

git status — Mitä on muuttunut?

git status näyttää, mitkä tiedostot ovat seuraamattomia, muokattuja tai staging-alueelle siirrettyjä. Käyttäkää sitä jatkuvasti työnkulun aikana ymmärtääksenne nykyisen tilan.

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

git add — Siirrä muutokset staging-alueelle

git add filename siirtää tietyn tiedoston staging-alueelle. git add . siirtää kaikki nykyisen hakemiston muutokset staging-alueelle. git add -p siirtää muutokset staging-alueelle vuorovaikutteisesti, pala kerrallaan.

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

git commit — Tallenna tilannevedos

git commit -m 'message' luo pysyvän tilannevedoksen staging-alueelle siirretyistä muutoksista. Viestin pitäisi kuvata, miksi muutos tehtiin, ei mitä tehtiin. Jokaisella commitilla on yksilöllinen SHA-tiiviste.

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

Monet tiimit käyttävät Conventional Commits -muotoa: type(scope): description. Yleisiä tyyppejä ovat feat, fix, refactor, test, docs, chore ja perf. Tämä mahdollistaa muutoslokien automaattisen luonnin ja semanttisen versioinnin.

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 — Näytä historia

git log näyttää commit-historian. git log --oneline näyttää tiiviin näkymän, jossa kustakin commitista on yksi rivi. git log --graph piirtää haararakenteen.

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

git diff — Näytä muuttuneet asiat

git diff näyttää staging-alueelle siirtämättömät muutokset. git diff --staged näyttää staging-alueelle siirretyt muutokset. git diff HEAD näyttää kaikki viimeisimmän commitin jälkeiset muutokset.

.gitignore-tiedosto

Luetelkaa versionhallinnasta pois jätettävät tiedostot ja hakemistot .gitignore-tiedostossa. Jättäkää aina node_modules, .env, dist ja build-hakemistot versionhallinnan ulkopuolelle. GitHub tarjoaa gitignore-mallit kaikille kielille ja viitekehyksille.

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

git restore — Kumoa staging-alueelle siirtämättömät muutokset

git restore filename hylkää tiedoston muutokset työhakemistossa ja palauttaa sen viimeksi commitoituun versioon. Toiminto on tuhoisa — muutokset menetetään.

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

Pikatarkistus

Mitä git add . tekee?

Vastaa interaktiivisessa oppitunnissa

Kertaus: Gitin keskeiset komennot

git init aloittaa repositorion. git status näyttää nykyisen tilan. git add siirtää tiedostot staging-alueelle. git commit tallentaa tilannevedoksen viestin kera. git log näyttää historian. git diff näyttää muutokset. .gitignore jättää tiedostoja versionhallinnan ulkopuolelle. Kirjoittakaa aina merkitykselliset commit-viestit, jotka selittävät miksi, eivät mitä.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”git init, add, commit ja status” ilmainen?

Kyllä – oppitunnin ”git init, add, commit ja status” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”git init, add, commit ja status”?

Alusta repositorio, lisää muutokset staging-alueelle git add -komennolla, luo committeja ja lue git status- sekä git log -komentojen avulla projektin historiaa Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”git init, add, commit ja status”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

git init, add, commit ja status
Haarautuminen: branch, checkout ja merge
Etärepositoriot: push, pull ja clone
GitHubin pull request -työnkulku

← Takaisin: Frontend Academy