Projektin vieminen GitHubiin vaihe vaiheelta

01Mitä tarvitset ennen aloitusta?

Projektin vieminen GitHubiin tarkoittaa, että muutat tietokoneesi kansion Git-repositorioksi ja yhdistät sen verkossa olevaan etärepositorioon. Siihen tarvitaan kolme asiaa: asennettu ja määritetty Git, GitHub-tili ja tunnistautumistapa.

Jos et ole vielä asentanut Gitiä tai määrittänyt nimeä, sähköpostia ja SSH-avainta, seuraa ensin Git-asennusoppaaseemme. Tämän artikkelin komennot olettavat, että asetukset on tehty.

• Git: komennon git --version pitäisi palauttaa versionumero terminaalissa.
• GitHub-tili: tili on ilmainen, ja sen voi luoda osoitteessa github.com.
• Tunnistautuminen: SSH-avain tai HTTPS:ää varten Git Credential Manager tai henkilökohtainen käyttöoikeustunnus (token). GitHub ei hyväksy tilin salasanaa Git-toiminnoissa.
• Siisti projektikansio: .gitignore-tiedosto, jolla turhat ja salaiset tiedostot suodatetaan pois.

02Repositorion luominen GitHubissa

Kirjaudu GitHubiin ja valitse oikean yläkulman plus-kuvakkeesta New repository. Kirjoita repositorion nimi lyhyesti ja pienillä kirjaimilla (esimerkiksi firma-sitesi), lisää kuvaus ja valitse näkyvyys.

Jos tietokoneellasi on jo projekti, älä lisää README-, .gitignore- tai lisenssitiedostoa; luo repositorio täysin tyhjänä. Muuten etärepositorioon syntyy commit, jota paikallisella puolella ei ole, ja ensimmäisessä pushissa tulee ristiriita.

03Poista turhat tiedostot .gitignorella

Tärkein tehtävä ennen ensimmäistä committia on päättää, mitkä tiedostot eivät kuulu repositorioon. node_modules, koontikansiot, käyttöjärjestelmän tiedostot ja etenkin salasanoja tai API-avaimia sisältävät .env-tiedostot eivät saa koskaan päätyä GitHubiin.

Luo projektin juurikansioon .gitignore-niminen tiedosto ja lisää siihen alla olevan kaltaisia rivejä. Olemme kertoneet, miksi riippuvuudet eivät kuulu repositorioon ja mikä on package.json-tiedoston rooli, npm-komennot-artikkelissamme.

• Jos olet vahingossa tehnyt commitin salaisesta tiedostosta, sen poistaminen jälkikäteen ei riitä; tiedosto jää historiaan. Vaihda kyseinen avain tai salasana heti.
• Jos haluat lopettaa jo seurattavan kansion seuraamisen, käytä komentoa git rm -r --cached kansion-nimi, lisää kansio sen jälkeen .gitignoreen ja tee commit.

node_modules/
dist/
build/
.env
.env.*
.DS_Store
Thumbs.db
*.log

04Ensimmäinen vienti komentoriviltä

Siirry terminaalissa projektikansioon ja suorita alla olevat komennot järjestyksessä. Etärepositorion osoitteen löydät GitHubissa tyhjän repositorion sivulta Code-painikkeen alta; kopioi SSH-osoite, jos olet määrittänyt SSH-avaimen, muuten HTTPS-osoite.

1. Muuta kansio Git-repositorioksi komennolla git init.
2. Lisää kaikki tiedostot valmisteluvaiheeseen komennolla git add ..
3. Luo ensimmäinen tallennus komennolla git commit.
4. Vakioi haaran nimeksi main.
5. Yhdistä etärepositorio komennolla git remote add origin.
6. Lähetä muutokset komennolla git push -u origin main; -u-lippu mahdollistaa sen, että seuraavissa pusheissa riittää pelkkä git push.

cd proje-klasoru
git init
git add .
git commit -m "Ensimmäinen commit"
git branch -M main

# SSH adresi
git remote add origin git@github.com:kullanici-adi/depo-adi.git
# ya da HTTPS adresi
# git remote add origin https://github.com/kullanici-adi/depo-adi.git

git push -u origin main

git remote -v
git status
git log --oneline

05Vienti GitHub Desktopilla ja gh CLI:llä

Komentorivi ei ole ainoa tapa. Graafista käyttöliittymää suosiville GitHub Desktop ja terminaalissa nopeammin työskenteleville GitHubin virallinen komentorivityökalu gh hoitavat saman muutamassa vaiheessa.

GitHub Desktop

Asenna GitHub Desktop ja kirjaudu tilillesi. Valitse File-valikosta Add local repository ja valitse projektikansiosi; jos kansio ei vielä ole repositorio, sovellus ehdottaa sen luomista. Näet muutokset vasemmassa paneelissa, kirjoitat viestin alla olevaan kenttään ja painat Commit-painiketta. Lopuksi Publish repository -painike luo repositorion GitHubiin ja lähettää sen.

gh CLI

gh-työkalulla repositorion luominen, yhdistäminen ja lähettäminen onnistuvat yhdellä komennolla. Ensimmäisellä käyttökerralla kirjaudut selaimen kautta komennolla gh auth login.

gh auth login

# Kun kansiossa on vähintään yksi commit
gh repo create depo-adi --private --source=. --remote=origin --push

VS Codella

Myös VS Coden versionhallintapaneelin Publish to GitHub -painike tarjoaa saman työnkulun. Editorin asennukseen ja Git-integraatioon löydät apua VS Code -asennusoppaastamme.

06Miten muutokset lähetetään?

Ensimmäisen viennin jälkeen päivittäinen työnkulku koostuu kolmesta komennosta: valmistele muutokset, tallenna ne ja lähetä. Jos olet työskennellyt toisella tietokoneella tai tiimitoverisi on tehnyt muutoksia, hae ajantasainen versio komennolla git pull ennen työn aloittamista.

Kirjoita commit-viestit lyhyiksi ja merkityksellisiksi: ”päivitys”-viestin sijaan esimerkiksi ”yhteydenottolomakkeeseen lisätty puhelinkenttä”. Kun katsot historiaa kuuden kuukauden päästä, näistä viesteistä ymmärrät, mitä muutettiin ja miksi.

git pull
git add .
git commit -m "Yhteydenottolomakkeeseen lisätty puhelinkenttä"
git push

Työskentely haarojen kanssa

Sen sijaan että tekisit ison muutoksen suoraan main-haaraan, luo uusi haara: git switch -c uusi-ominaisuus. Lähetä haara komennolla git push -u origin uusi-ominaisuus ja avaa GitHubissa pull request. Näin muutos tarkistetaan ennen yhdistämistä ja main-haara pysyy aina toimivana.

07Yleiset push-virheet ja ratkaisut

Suurin osa ensimmäisten pushien virheistä liittyy tunnistautumiseen, haaran nimeen tai etärepositorion odottamattomiin commiteihin.

• src refspec main does not match any: commitia ei ole vielä tehty tai haaran nimi on master. Tee git commit tai nimeä haara uudelleen komennolla git branch -M main.
• remote origin already exists: etärepositorio on jo määritetty. Vaihda osoite komennolla git remote set-url origin uusi-osoite.
• rejected (fetch first / non-fast-forward): etärepositoriossa on commit, jota paikallisesti ei ole, usein GitHubissa luotu README. Hae se komennolla git pull --rebase origin main ja tee push uudelleen. Jos historiat ovat täysin erilliset, saatat tarvita komennon git pull origin main --allow-unrelated-histories.
• Permission denied (publickey): SSH-avainta ei ole lisätty tiliisi; testaa komennolla ssh -T git@github.com.
• Suuren tiedoston virhe: GitHub ei hyväksy yli 100 MB:n yksittäisiä tiedostoja. Poista videot ja varmuuskopiot repositoriosta tai käytä Git LFS:ää.

08Mitä GitHub tuo yrityksen projekteihin?

Kun koodi on GitHubissa, projekti ei katoa tietokoneen rikkoutuessa tai hukkuessa. Vielä tärkeämpää on, että jokainen muutos on jäljitettävissä: kun virhe päätyy tuotantosivustolle, ongelman aiheuttanut commit löytyy nopeasti ja sen voi perua.

Kun verkkosivuston nopeuden ja suorituskyvyn parannukset, kuten kuvien pakkaus ja koodin minimointi, tallennetaan erillisinä commiteina, on helppo mitata, mikä muutos vaikutti kuinka paljon. Työskentelemme tällä kurinalaisuudella yrityksen kotisivu- ja verkkosivuprojekteissamme.

Muista lisätä repositorioon myös hyvin kirjoitettu README-tiedosto. Muutama kappale siitä, mitä projekti tekee, miten se asennetaan ja millä komennolla se käynnistetään, säästää uuden tiimin jäsenen tai sinut itsesi tuntikausia, kun palaat projektin pariin kuukausien päästä. Kirjoita ympäristömuuttujista vain nimet, älä arvoja.

Muita vaiheittaisia ohjeita löydät asennusoppaat-luokasta.