Bli kjent med GitHub Pages Static Project Pages, Fast

La oss snakke om GitHub Pages; hva de er og hvordan du kan bruke tjenesten på få minutter til å distribuere statiske sider gratis. La oss komme i gang!


Hva det er

Ifølge GitHub er GitHub Pages:

... offentlige nettsider fritt vert og enkelt publisert via nettstedet vårt.

Hva betyr dette for deg? Det betyr gratis, pålitelig hosting av statisk innhold. Generelt ble dette opprettet av GitHub for å støtte open source-prosjekter som er hostet på GitHub, ved å gi dem et sted å tilby dokumentasjon, demoer eller annen gitt interaktiv opplevelse for å utfylle koden i depotet.


GitHub-sider kan imidlertid brukes til en rekke prosjekter, og støtter allerede Jekyll (en kraftig, Ruby-basert statisk nettstedgenerator). Så, la oss lære å bruke den!


Før vi kommer i gang

Du må registrere deg for en GitHub-konto før du kan komme i gang med GitHub-sider. For å få mest mulig nytte av GitHub, anbefales det sterkt at du setter opp SSH-tastene dine. I utgangspunktet kan instruksjonene på denne koblingen sikkert koble datamaskinen din med GitHub-kontoen din og alle dine arkiver på GitHub. Når du har opprettet en GitHub-konto og registrert nøklene dine, kan du enkelt laste ned GitHub-appen til Mac eller GitHub for Windows, både offisielt støttet av GitHub.

Sikkerhetskopiering - Hva i verden er GitHub?

GitHub er et sted for folk å lagre sin kode. Git er et kraftig versjonskontrollsystem som gjør det mulig for utviklere å spore endringer som gjøres for å kodes i trinn, kalt forplikter, og spore forskjellige veier for et bestemt prosjekt ved å bruke grener.


Det er mange funksjoner i Git, og enda mer strøm er låst opp i GitHub, men for nå vil vi bli fokusert på GitHub Pages. Hvis du vil lære mer om GitHub, sjekk ut Git for Designers, samt Git & GitHub: En nybegynnersveiledning, som inneholder litt mer informasjon om SSH-nøkler, samt noen grunnleggende Git-funksjonalitet som ligger utenfor omfanget av denne artikkelen.


Ulike måter å bruke GitHub Pages

Det finnes flere måter å bruke GitHub Pages på. Vi starter med en av de raskeste måtene.

GitHubs automatiske sidegenerator

Den automatiske sidegeneratoren lar brukerne lage sin side ved hjelp av Markdown, et språk som kan leses av mennesker, og som er laget for å hjelpe innholdsskapere til å lage dokumenter med et konsistent sett med retningslinjer for merking.

Så hvordan bruker du automatisk sidegeneratoren? Først vil du opprette et lager. Hvis du vil at repoen skal peke til ditt-navn.ogthub.com, opprett en repo som samsvarer med det navnet. For eksempel er min personlige repo navngitt jcutrell.github.com. For å få tilgang til den statiske nettstedgeneratoren, gå til den repoens innstillinger (tilgjengelig i en URL som følger formatet https://github.com/username/projectname/settings). Dette vil vise en editor, som drives av en Markdown rik tekstredigerer. Du kan automatisk kopiere i standard Readme.md-filen, eller du kan redigere innholdet ditt etter eget valg. Videre har den automatiske generatoren også plass til Google Analytics-sporing.

Når du har lagt til alt relevant innhold, kan du gå videre til layoutvelgeren. Med flere temaer å velge mellom, er dette et flott alternativ for umiddelbart å gi brukerne en ikke-innsats, DRY destinasjonsside basert på din Readme-fil som bare krever at du holder dokumentasjonen oppdatert (noe du allerede burde gjøre). Du kan også trekke disse sidene ned fra opprinnelsen, endre dem lokalt og deretter skyve dem på nytt.

Hvis du vil bruke GitHub-appen til å kontrollere GitHub-depotet ditt, kan du gjøre det her.

Først vil du installere appen fra mac.github.com eller windows.github.com, og følg de enkle oppsettinstruksjonene.


Deretter velger du et lager som du vil klone til datamaskinen din ved å velge ditt GitHub brukernavn til venstre og klikke Klon til datamaskin.


Deretter konfigurerer du plasseringen og navnet du vil klone oppbevaringsstedet som.


Deretter velger du grenfanen til venstre, og velger GH-sider gren som ble opprettet av generatoren. Du kan deretter gjøre endringene dine lokalt på stedet du angav tidligere.

Når du er klar til å trykke noen endringer for å være live, gå til Endringer fanen og opprett en forpliktelse med skjemaet øverst til venstre.


Til slutt velger du grener kategorien og klikk publisere til høyre for gh-sidene filialen. Dette vil skape alle dine forpliktede endringer i GitHub.


Hvis du vil bruke kommandolinjen til å kontrollere GitHub-depotet ditt, kan du gjøre det her.

 git klone [email protected]: brukernavn / prosjektnavn.git git kassen gh-sider

Hvis du genererte en brukerside (i stedet for et enkelt prosjekt), vil hovedgrenen er GitHub sider grenen. Bare klon ditt brukerprosjekt for å redigere det lokalt.

 git klone [email protected]: brukernavn / brukernavn.github.com.git git checkout mester # dette bør allerede være sjekket ut som standard

Den automatiske generatoren kan imidlertid ikke være løsningen på problemet ditt. Kanskje du allerede har bygget nettstedet ditt statisk, og bare ønsker å distribuere det et sted.

Bygg det ut manuelt

Dette andre alternativet er så enkelt som det høres ut. For å få GitHub-sider til å fungere med vilkårlig lokalt innhold, må du først opprette depotet på GitHub.

Hvis du har bestemt deg for å bruke GitHub-appen, Slik lager du dine egne manuelle sider.

Velg Mine oppbevaringssteder mappe-fanen, og klikk deretter pilen på depotet du vil opprette GitHub Pages med. Hvis du for øyeblikket ikke har noen repositorier å sparke ting med, kan du opprette en fra appen.


Hvis du lager GitHub Pages ved hjelp av username.github.com, hovedgrenen er sidene gren, så du kan gå videre og åpne prosjektet i en lokal mappe, hopper over opprettelsen av GH-sider gren. Hvis du oppretter GitHub Pages for et prosjekt, vil du opprette en ny avdeling som heter GH-sider; Klikk på knappen på høyre side av depotet, og klikk deretter på + -knappen på høyre side av gjeldende gren.


Dette vil tillate deg å skrive inn det nye grenenavnet.


Som standard vil den nye grenen ha alle dine nåværende prosjektfiler, så du vil fjerne alle filene i prosjektet mens GH-sider gren er valgt. (Forsikre deg om at "nåværende grenen" -indikatoren viser at du er på gh-sidene, med mindre du lager sider for brukernavn.github.com.)


Deretter kan du opprette et statisk område direkte i prosjektmappen din.

Når du har opprettet det statiske nettstedet i prosjektmappen, kommer du tilbake til GitHub-appen og går til Endringer fanen til venstre. Dette vil vise alle endringene du har gjort, inkludert sletning av de opprinnelige filene. Lag en forpliktelse ved å fylle ut skjemaet øverst til venstre. Når du har gjort dette, kan du gå tilbake til grenarkategorien og publisere GH-sidene filialen (eller hovedgrenen, hvis du lager sider for brukernavn.github.com). Dette er trinnet som skifter koden til GitHub og initierer det statiske nettstedet på serveren.

Du kan også enkelt klone depotet gjennom kommandolinjen ved å velge URL-adressen øverst på prosjektsiden og kjøre følgende kommando.

 git klone [email protected]: brukernavn / prosjektnavn.git

Deretter må du opprette en ny gren kalt GH-sider; Denne grenen må også være helt tom. Kjør disse kommandoene:

 git checkout - orphan gh-sider git rm -rf. git commit -am "innledende sider begår"

(For mer informasjon, sjekk ut den offisielle dokumentasjonen).

Dette vil trekke prosjektet ned til en mappe som heter prosjektnavn (hva prosjektet ditt er) i din nåværende arbeidskatalog, og vil også automatisk ha GitHub som ekstern opprinnelse. I utgangspunktet betyr dette at du kan lage filer og gjøre endringer, følg deretter de neste kommandoene for å spore disse filene og endringene, og trykk dem til GitHub.

 git status # henter og ekkos gjeldende status for depotet; Dette vil vise nye filer og untracked endringer git add. # dette legger til alle nye filer opprettet git commit -am "Her er min første forpliktelse" # dette skaper en forpliktelse på din nåværende gren (som standard, hovedgrenen) git push origin gh-pages #this skyver gh-sidene grenen tilbake til GitHub.

Denne prosessen vil bli gjentatt gjennom alle iterasjoner på nettstedet ditt når du gjør endringer. Dette fungerer bra, men hva om du vil være vert for en statisk blogg? Kanskje den mest populære statiske bloggingplattformen, Jekyll, støttes av GitHub sider som standard. (Jekyll ble bygd av et lagmedlem på GitHub.)

Bruk Jekyll med GitHub Pages

Å bruke Jekyll med GitHub Pages, må du først opprette et Jekyll-område lokalt. Du kan kompilere lokalt, eller du kan tillate GitHub å kompilere for deg. For å komme i gang kan du følge denne veiledningen om Octopress, et rammeverk som trekker ut noen av Jekylls grunnleggende funksjoner.

Alternativt kan du opprette et rå Jekyll-nettsted. Først må du installere jekyll-perlen. Vanligvis betyr dette at du kjører følgende kommando:

 perle installasjon jekyll

Hvis du har installert RubyGems, bør dette trekke den siste stabile utgivelsen.

Ta en titt på brukerveiledningen, så vel som denne veiledningen på NetTuts. Du må opprette den grunnleggende filstrukturen før Jekyll kan generere et nettsted. For å komme raskt opp, ta en titt på Daniel McGraws Jekyll-Base, som definerer filstrukturen som er nødvendig for Jekyll å generere et nettsted. Jeg har også tatt noen øyeblikk for å lage et gjenbrukbart skript kalt jekyll_structure. Følg installeringsinstruksjonene; Hvis det ikke fungerer for deg, kan du bare opprette den følgende strukturen manuelt.


.
| - .gitignore
| - README
| - _config.yml
| - _layouts
| | - layout.html
| '- post.html
| - _posts
| '- 1985-10-26-Test-Post.md
'- index.html

Den primære konfigurasjonen for Jekyll vil bli satt inn i _config.yml fil. _layouts vil holde layoutene som vil bli brukt ved generasjon.

Når du har opprettet innlegg og sider, og deretter redigerte dem, kan du ganske enkelt legge dem til ditt git-repository og forplikte dem, som tidligere forklart:

 git add. git commit -am "Lagt til et nytt innlegg" git push opprinnelse gh-pages # eller git push origin master for username.github.com sider

Merk: Det er mye enklere å bruke rammer som Octopress eller Jekyll Bootstrap til automatisk generering av innlegg og sider for Jekyll, med kommandoer som ligner på rake new_post ["Postnavn går her"] i stedet for å manuelt opprette post- eller sidefiler.


Andre viktige ting i notatet

Det er viktig å huske at lagre som er satt som private på GitHub, vil opprette offentlige sider. GitHub opprettet denne funksjonen for prosjekter for enkelt å publisere dokumentasjon; Dette er sentrert rundt ideen om åpenhet. Statiske nettsteder som er vert for GitHub vil ikke bli skjult for noen når som helst snart.

Ikke begrenset deg til designet eller strukturen som er forhåndsdefinert i de automatisk genererte sidene GitHub gir. Disse kan lett redigeres ved ganske enkelt å trekke lageret ned til din lokale maskin, gjøre endringer og sende dem.

Jo mer du lærer om Git og GitHub, desto mer behagelig vil du være med GitHub Pages. Ta en titt på dette innlegget på Treehouse, så vel som denne Tutsplus-opplæringen fra Jeffrey Way om GitHub for Designers.

Hvis du vil omdirigere ditt eget domene til et GitHub Pages-domener, kan du se denne veiledningen på GitHubs hjelpeside for å komme i gang. Hvem vet - kanskje du kan bli kvitt din personlige hostingleverandør og gå alle statisk!


Konklusjon

GitHub Pages er ekstremt praktisk å bruke, spesielt når de er sammenkoblet med andre verktøy som Jekyll. Å lære verktøyene som GitHub Pages er avhengig av, vil hjelpe deg til å bli en bedre og mer verdifull utvikler og designer for fremtiden, og det er en fin måte å vise frem dine prosjekter. Videre gir GitHub dette som en gratis tjeneste for alle, så kostnaden for å komme i gang er begrenset til verdien av tiden du bruker til å lære. Hva venter du på? Dykk inn!