GitHub er ikke bare et flott sted å lagre og dele koden med andre, men de tilbyr også gratis web hosting av HTML, CSS og JavaScript prosjekter!

I denne artikkelen skal jeg vise deg hvordan å få oppsettet for å publisere og dele dine egne statiske HTML nettside på GitHub med GitHub Desktop app! 🚀

første Første: få deg en GitHub-konto! Du har ikke tilgang til gratis hosting eller andre fantastiske funksjoner GitHub har å tilby uten.,

Den GitHub hjemmeside med registreringsskjemaet til høyre på skjermen. Langs den øverste er den viktigste navigasjon området. Til venstre på skjermen teksten lyder: «Bygget for utviklere» med en beskrivelse av hva GitHub er alle om.

Med en GitHub-konto vil du også være i stand til å chatte med andre web-utviklere, slike som deg selv, gjennom Saker, og bidra til andre åpen kildekode-prosjekter!,

Laste ned og installere GitHub Desktop app

Dette er appen som vi skal bruke for å få våre etiske opp på GitHub. Det er enkelt å bruke, slik at ikke bekymre deg; brukergrensesnittet er enkelt å lære!

Den GitHub Skrivebordet hjemmeside med en «Last ned for macOS» link, sammen med en Windows-koblingen. Langs den øverste er den viktigste navigasjon området. I midten av skjermen teksten lyder: «Den nye innfødte» med en beskrivelse av hva GitHub Skrivebordet er alle om.,
  • Last ned GitHub Desktop for mac os
  • Last ned GitHub Desktop for Windows

(Hvis disse linkene ikke virker, kan du utforske GitHub Skrivebordet hjemmeside.)

Åpne den nedlastede programmet filen og fortsett gjennom installasjonsprosessen som kreves med operativsystemet på datamaskinen.

Neste, vil vi opprette en ny GutHub prosjektet!

Opprette en ny GitHub prosjektet

Før vi laster opp våre koden til GitHub vi må først gjøre GitHub Skrivebordet klar over vårt prosjekt filer., Vi gjør dette ved å opprette et nytt Depot mappe, og deretter kopiere vår hjemmeside filene til den nye mappen.

3.1 — Åpne opp GitHub Desktop app, og klikk «Lage Nytt Depot» – knappen.

«Opprett Nytt Depot» – knappen. Ovenfor, tekst-leser, «Opprett et nytt prosjekt og publisere den på GitHub»

3.,2 — Når «Opprette et Nytt Depot» dialogvindu vises, fyll i «Navn» skriving som:

.github.io

Erstatt med GitHub konto brukernavn.

Merk: Det er svært viktig for å nevne depotet på denne måten; dette vil fortelle GitHub for å host filer i dette prosjektet automatisk og vise dem når noen poeng nettleseren til:


Dette vil være web-adressen du vil dele når nettstedet ditt er klar til å publisere og gå live!

3.,3 — Den «Lokale Banen» skriving er der depotet ditt, vil live på din datamaskin, og dette er ikke hvor ditt nettsted filer som for øyeblikket er lagret på din datamaskins hard drive. GitHub-Skrivebordet er behov for å opprette en ny, tom mappe.

Vi trenger en kopi av ditt nettsted filer over senere, men for nå, velg en mappe, for eksempel /Sites i hjem-mappen., Dette vil opprette en ny mappe inne i den /Sites mappe med navnet på depotet, som vil se slik ut:

/Sites/.github.io

«Opprett et Nytt Depot» dialogvindu. Skjema kontrollene inkluderer, «Navn», «Lokale Banen», «Initialisere dette depotet med en README», «Git Ignorer», og «Lisens». To action kontrollene nederst er merket, «Avbryt» og «Opprett Depotet».,

3.4 — La alle andre alternativer i form på sine standard innstillinger og klikk på «Opprett Depotet» – knappen. For nå er vi bare ønsker å opprette en mappe som GitHub Skrivebordet vil gjenkjenne som en mappe kan jobbe med. På grunn av guiden, la oss beskrive denne nye mappen som GitHub Depotet mappen.,

Etter at GitHub Depotet mappen har blitt opprettet ved å klikke «Opprett Depotet» – knappen, GitHub Desktop app skal se ut noe som dette:

Den GitHub Desktop app med en tom depotet mappen. Langs toppen er alternativet kontrollerer for «Aktive Depotet», «Gjeldende Gren», og «Publisere depotet»., På venstre side har en plass for en liste av filer, en «Oppsummering» ordbok, en «Beskrivelse» tekst-boksen, og en «Forplikte seg til master» – knappen.

Kopiere filer til den nye Depotet mappe

La oss si inntil nå som du har arbeidet på nettstedet ditt i en mappe som ligger på /Documents/my-site; vi vil beskrive dette som arbeider mappen. Innenfor denne arbeidsmappen er det sannsynligvis noen filer og mapper med navnet index.html, /css, eller /javascript., Hva vi trenger å gjøre er å kopiere alt fra arbeidsmappen over til vår nye GitHub Depotet mappen.

I det forrige trinnet, vi skapte GitHub Depotet mappe inni /Sites mappe med navnet, .github.io. Så, dette betyr at GitHub Depotet mappen skal være plassert på /Sites/.github.io.,

GitHub Desktop app skal nå se noe som dette:

Den GitHub Desktop app, nå viser det lagt til filer på venstre side bar og en tekst av den merkede filen i den viktigste delen av appen.

Med alle våre filer i GitHub Depotet mappen, vi er klar til å legge filene våre!,

for Å «begå» – filer betyr å ta et «øyeblikksbilde» av filer og mapper i sin nåværende tilstand. Ved å gjøre dette, kan vi få dem klar til å bli presset opp til et depot på GitHub.

4.2 — Før vi bestemmer oss for vår filer for publisering, vi må først fortelle GitHub hva dette commit er alle om. Fyll i «Sammendrag» – skriving, som ligger nederst til venstre i brukergrensesnittet, med en høy-nivå tittelen på hva dette begå innebærer; noe enkelt som, «Min første forplikte! 😀» fungerer helt fint i dette tilfellet.,

du kan Eventuelt legge til flere detaljer om innlegging i «Beskrivelse» – tekstboksen. Vanligvis du ønsker å inkludere ting som hva som er endret, kanskje du fikset en bug eller lagt til noe nytt innhold. Det er flott å ha disse notater er tilgjengelig for andre utviklere eller fremtidige du sørge for at du vet hvorfor du har gjort disse endringene, oh så lenge siden!

Når «Sammendrag» og valgfri «Beskrivelse» feltene er fylt ut til din smak, klikker på «Forplikte seg til master» – knappen!,

Publiser ditt nettsted

Etter at du klikker på «Forplikte seg til master» – knappen i forrige trinn, lurer du kanskje på:

Hva skjedde? Filene mine er borte, og appen er tom nå!

ikke bekymre deg! I nedre venstre hjørne av GitHub Desktop-grensesnitt det er en liten indikator på at din begå var vellykket.,

Under «Forplikte seg til master» – knappen viser nylig begå meldinger, hver med en «Angre» – knappen for å angre den siste begå.

Nå som vår filer som er begått, og dette gir oss muligheten til å presse våre forplikte seg til GitHub!

for Å «presse» – filer betyr å laste opp forpliktet filer i sin nåværende tilstand til et depot på GitHub.

5.,1 — Finn den på «Publiser depotet» – knappen øverst på GitHub Desktop-grensesnitt.

Den «Publiser depotet» – knappen, og ligger langs den øverste linjen på GitHub Skrivebordet brukergrensesnitt. Teksten nedenfor de viktigste labelnavn, «Publisere dette depotet til GitHub».

Gå foran og klikk denne for å sende filer til GitHu…

Oh vent, det har vi ikke logget inn for å GitHub fra GitHub Desktop app ennå!, La oss gjøre det, første…

*lagre scratch*

5.05 — Når «Publiser Depotet» dialog-vinduet vises etter at du klikker på «Publiser depotet» – knappen, det vil først be deg om å logge deg på GitHub hvis du ennå ikke har allerede.

Klikk på «Logg Inn» – knappen for å vise «Logg På» dialog-vinduet, fyll inn ditt Brukernavn og Passord og klikk på «Logg Inn» – knappen for å fullføre prosessen. Nå skal du være logget på og gode å gå videre!,

Logg På» dialogvindu med en «Brukernavn eller e-post-adresse» og «Passord» skriving. En link til eventuelt «Logg på med din browser» er også tilgjengelig. To action kontrollene nederst er merket, «Avbryt» og «Logg På».

5.1, ta 2 — Nå som vi er logget på GitHub, gå videre og klikk «Publiser depotet» – knappen for å starte opplastingen.

5.,2 — «Publiser Depotet» dialogvindu vises med en siste par alternativer for deg å velge mellom før du plasserer ditt nettsted live.

Alle alternativer i form er fine som de er, med unntak av i «Behold denne koden privat» – avkrysningsruten; dette må være avmerket i orden for deg å dele siden med venner og familie.

En animert grafikk på «Publiser Depotet» dialogvindu., En mus-markøren beveger seg i og setter «Holde denne koden private» som ukontrollert. Andre kontroller inkluderer, «Navn», «Beskrivelse» og «Organisasjon». To action kontrollene nederst er merket, «Avbryt» og «Publisere Depotet».

5.3 — Klikk «Publiser Depotet» – knappen for å sende filer opp til GitHub!

Nå, i din nettleser, gå til den nye GitHub depotet siden for å sørge for at filene gjort reisen til sitt nye hjem:


Er alle dine filer stede og stod for? Det er bra! Fin jobb!, 👍

Dele din hjemmeside!

Den aller siste trinnet er å bli spent og sjekk ut din nettside i nettleseren din! Surf over til:


Din nettside skal vises foran øynene dine! ✨😄✨

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *