Verkkosivuston luominen GitHub -sivuille: 12 vaihetta (kuvilla)

Sisällysluettelo:

Verkkosivuston luominen GitHub -sivuille: 12 vaihetta (kuvilla)
Verkkosivuston luominen GitHub -sivuille: 12 vaihetta (kuvilla)

Video: Verkkosivuston luominen GitHub -sivuille: 12 vaihetta (kuvilla)

Video: Verkkosivuston luominen GitHub -sivuille: 12 vaihetta (kuvilla)
Video: ‘Just The 3 Of Us’ FULL MOVIE | Jennylyn Mercado, John Lloyd Cruz 2024, Saattaa
Anonim

GitHub Pages on loistava tapa luoda oma henkilökohtainen sivusto tyhjästä. Se on täysin ilmainen ja vaatii vain GitHub -tilin. Huomaa kuitenkin, että GitHub Pages ei tarjoa kaikkein käyttäjäystävällisempää suunnittelua verkkosivustojen luomiseen (toisin kuin Wix tai Squarespace), mutta se on loistava tapa saada kokemusta HTML/CSS/JS: stä ja kaikista verkkosivuston elementeistä. Tämä wikiHow näyttää kuinka pääset alkuun.

Askeleet

Luo verkkosivusto GitHub -sivuille Vaihe 1
Luo verkkosivusto GitHub -sivuille Vaihe 1

Vaihe 1. Rekisteröi tili GitHubiin, jos sinulla ei vielä ole sitä

Ennen kuin voit luoda oman verkkosivuston GitHub -sivuille, sinun on luotava tili GitHubiin. Jos sinulla on jo tili GitHubissa, kirjaudu sisään. Molempiin pääsee käsiksi oikeasta yläkulmasta.

Luo verkkosivusto GitHub -sivuille Vaihe 2
Luo verkkosivusto GitHub -sivuille Vaihe 2

Vaihe 2. Luo arkisto GitHubiin.

Muista nimetä arkisto "" [GitHub -käyttäjänimesi täällä].github.io ". Tämä alustaa GitHub -verkkosivustosi.

Tapa 1 /2: Koodieditorin käyttäminen

Luo verkkosivusto GitHub -sivuille Vaihe 3
Luo verkkosivusto GitHub -sivuille Vaihe 3

Vaihe 1. Lataa GitHub -työpöytä, jos sinulla ei ole sitä jo asennettuna

GitHub -työpöydän asentaminen on yhtä helppoa kuin siirtyminen osoitteeseen https://desktop.github.com/ ja napsauttamalla suurta purppuraa "Lataa" -painiketta. Suorita sitten asennusohjelma. Tämä on välttämätöntä, jotta muutokset voidaan siirtää arkistoosi.

Luo verkkosivusto GitHub -sivuille Vaihe 4
Luo verkkosivusto GitHub -sivuille Vaihe 4

Vaihe 2. Asenna koodieditori

Tarvitset sellaisen saadaksesi syntaksin korostuksen GitHubissa. Suosittuja vaihtoehtoja ovat Atom, Visual Studio Code, Sublime Text ja Notepad ++, koska niissä on monipuolinen ja minimalistinen tunnelma. Koodieditorin asentamisen jälkeen olet valmis aloittamaan.

Luo verkkosivusto GitHub -sivuille Vaihe 5
Luo verkkosivusto GitHub -sivuille Vaihe 5

Vaihe 3. Luo tiedosto nimeltä "index.html"

Voit tehdä sen koodieditorissa tai verkossa. Voit myös siirtyä arkistosi sijaintiin kiintolevyllä ja luoda "index.html" -tiedoston aseman arkiston kansioon.

Luo verkkosivusto GitHub -sivuille Vaihe 6
Luo verkkosivusto GitHub -sivuille Vaihe 6

Vaihe 4. Lisää HTML -koodisi

Sinun on opittava HTML, jotta voit koodata perusverkkosivun. On myös hyödyllistä oppia CSS ja JavaScript, jotta voit lisätä tyyliä ja toimintoja verkkosivullesi.

Muista tallentaa tiedosto

Luo verkkosivusto GitHub -sivuille Vaihe 7
Luo verkkosivusto GitHub -sivuille Vaihe 7

Vaihe 5. Tee muutokset

Palaa GitHub -työpöydälle ja napsauta sinistä Sitoudu master -painiketta. Napsauta sitten Push Origin. Muutokset ladataan GitHubiin.

Jos aiot tehdä enemmän muutoksia, haluat vetää myös alkuperän. Napsauta GitHub -työpöydän Vedä alkuperä -painiketta ladataksesi uusimman sitoumuksen koneellesi

Luo verkkosivusto GitHub -sivuille Vaihe 8
Luo verkkosivusto GitHub -sivuille Vaihe 8

Vaihe 6. Tarkastele verkkosivua

Siirry verkkoselaimessa kohtaan "[GitHub -käyttäjänimesi täällä].github.io". Sinun on ehkä ohitettava selaimesi välimuisti pitämällä Ctrl- tai ⌘ -komento painettuna samalla, kun napsautat päivityspainiketta nähdäksesi uuden verkkosivun.

Tapa 2/2: Käytä GitHub Onlinea

Luo verkkosivusto GitHub -sivuille Vaihe 9
Luo verkkosivusto GitHub -sivuille Vaihe 9

Vaihe 1. Luo tiedosto nimeltä "index.html"

Napsauta Lisää tiedosto ja napsauta sitten Luo uusi tiedosto. Tämä avaa tiedostoeditorin. Lisää "index.html" "Nimeä tiedostosi" -kenttään.

Luo verkkosivusto GitHub -sivuille Vaihe 10
Luo verkkosivusto GitHub -sivuille Vaihe 10

Vaihe 2. Lisää HTML -koodisi

Sinun on opittava HTML, jotta voit koodata perusverkkosivun. On myös hyödyllistä oppia CSS ja JavaScript, jotta voit lisätä tyyliä ja toimintoja verkkosivullesi.

Muista tallentaa tiedosto

Luo verkkosivusto GitHub -sivuille Vaihe 11
Luo verkkosivusto GitHub -sivuille Vaihe 11

Vaihe 3. Tee muutokset

Tallenna tiedosto GitHubiin napsauttamalla vihreää Sitoudu uusi tiedosto -painiketta.

Luo verkkosivusto GitHub -sivuille Vaihe 12
Luo verkkosivusto GitHub -sivuille Vaihe 12

Vaihe 4. Näytä verkkosivusi

Siirry verkkoselaimessa kohtaan "[GitHub -käyttäjänimesi täällä].github.io". Sinun on ehkä ohitettava selaimesi välimuisti pitämällä Ctrl- tai ⌘ -komento painettuna samalla, kun napsautat päivityspainiketta nähdäksesi uuden verkkosivun.

Vinkkejä

  • Jos haluat lisätä alasivuja, luo uusi kansio GitHubiin ja lisää hakemistoon index.html -tiedosto.
  • Jos rekisteröit verkkotunnuksen, voit antaa GitHub -sivujen käyttää sitä toimialueen nimeä oletusasetuksen sijasta.
  • GitHub -sivujen arkistojen on oltava julkisia, paitsi jos sinulla on premium -tili.

Suositeltava: