Laten we het hebben over GitHub-pagina's; wat ze zijn en hoe u de service binnen enkele minuten kunt gebruiken om statische pagina's gratis te implementeren. Laten we beginnen!
Volgens GitHub zijn GitHub Pages:
... openbare webpagina's worden gratis gehost en gemakkelijk gepubliceerd via onze site.
Wat betekent dit voor jou? Het betekent gratis, betrouwbare hosting van statische inhoud. In het algemeen is dit door GitHub gemaakt ter ondersteuning van open-sourceprojecten die op GitHub worden gehost door hen een plaats te bieden om documentatie, demo's of andere gegeven interactieve ervaring aan te bieden om de code in de repository aan te vullen..
GitHub-pagina's kunnen echter voor verschillende projecten worden gebruikt en ondersteunen al Jekyll (een krachtige, op Ruby gebaseerde statische-sitegenerator). Laten we dus leren hoe we het kunnen gebruiken!
Je moet je aanmelden voor een GitHub-account voordat je kunt beginnen met GitHub-pagina's. Om optimaal gebruik te kunnen maken van GitHub wordt het ten zeerste aanbevolen om je SSH-sleutels in te stellen. Kortom, de instructies op deze link kunt u veilig uw computer verbinden met uw GitHub-account en al uw archieven op GitHub. Nadat je een GitHub-account hebt gemaakt en je sleutels hebt geregistreerd, kun je eenvoudig de GitHub-app voor Mac of GitHub voor Windows downloaden, beide officieel ondersteund door GitHub.
GitHub is een plaats waar mensen hun code kunnen opslaan. Git is een krachtig versiebeheersysteem waarmee ontwikkelaars wijzigingen in code kunnen bijhouden in incrementen, genaamd begaat, en verschillende paden van een bepaald project volgen met behulp van takken.
Er zijn veel functies van Git, en zelfs meer macht zit opgesloten in GitHub, maar voorlopig blijven we gefocust op GitHub Pages. Als je meer wilt weten over GitHub, ga dan naar Git for Designers, evenals Git & GitHub: A Beginner's Guide, die wat meer informatie over SSH-sleutels bevat, evenals een aantal basisfuncties voor Git die buiten het bereik vallen van Dit artikel.
Er zijn verschillende manieren waarop GitHub-pagina's kunnen worden gebruikt. We beginnen met een van de snelste manieren.
Met de Automatic Page Generator kunnen gebruikers hun pagina maken met Markdown, een door mensen leesbare opmaaktaal die is ontworpen om makers van inhoud te helpen eenvoudig documenten te produceren met een consistente reeks markup-richtlijnen.
Dus hoe gebruik je de automatische paginagenerator? Eerst wil je een repository maken. Als u wilt dat de repo verwijst naar uw-username.github.com, maakt u een repo die overeenkomt met die naam. Mijn persoonlijke repo is bijvoorbeeld genoemd jcutrell.github.com
. Om toegang te krijgen tot de generator van de statische site, gaat u naar de instellingen van die repo (toegankelijk via een URL die de indeling volgt) https://github.com/username/projectname/settings
). Dit toont een editor, die wordt aangedreven door een Markdown rich text-editor. U kunt automatisch kopiëren in het standaardbestand Readme.md, of u kunt uw inhoud naar eigen inzicht bewerken. Verder heeft de automatische generator ook een ruimte voor het bijhouden van Google Analytics.
Nadat u alle relevante inhoud heeft toegevoegd, kunt u doorgaan naar de lay-outselector. Met meerdere thema's om uit te kiezen, is dit een geweldige optie om gebruikers onmiddellijk een DRY-bestemmingspagina te bieden op basis van uw Leesmij-bestand, waarvoor u alleen maar uw documentatie up-to-date moet houden (iets dat u al zou moeten doen). U kunt deze pagina's ook van hun oorsprong naar beneden halen, ze lokaal wijzigen en ze vervolgens terug duwen.
Als je de GitHub-app wilt gebruiken om je GitHub-repository te beheren, kun je dit als volgt doen.
Eerst wilt u de app installeren vanaf mac.github.com of windows.github.com en de eenvoudige installatie-instructies volgen.
Kies vervolgens een repository die u naar uw computer wilt klonen door uw GitHub-gebruikersnaam aan de linkerkant te selecteren en op te klikken Clone to Computer
.
Configureer vervolgens de locatie en naam die u als repository wilt gebruiken.
Kies vervolgens het tabblad takken aan de linkerkant en selecteer de gh-pagina's
tak die is gemaakt door de generator. U kunt uw bewerkingen vervolgens lokaal uitvoeren op de locatie die u eerder hebt opgegeven.
Als je klaar bent om een aantal wijzigingen door te voeren om live te zijn, ga je naar de veranderingen
tab en maak een commit met het formulier links bovenaan.
Selecteer ten slotte de takken
klik en klik publiceren
rechts van de tak gh-pages. Dit zal al je toegewijde veranderingen naar GitHub pushen.
Als je de commandoregel wilt gebruiken om je GitHub-repository te beheren, kun je dit als volgt doen.
git clone [email protected]: gebruikersnaam / projectname.git git checkout gh-pages
Als u een gebruikerspagina (in plaats van één project) hebt gegenereerd, is de mastertak is de GitHub-pagina's. Kloneer eenvoudig uw gebruikersproject om het lokaal te bewerken.
git clone [email protected]: gebruikersnaam / gebruikersnaam.github.com.git git checkout master # dit zou standaard al moeten zijn uitgecheckt
De automatische generator is mogelijk echter niet de oplossing voor uw probleem. Misschien hebt u uw site al statisch gebouwd en wilt u deze eenvoudig ergens implementeren.
Deze tweede optie is zo simpel als het klinkt. Om GitHub-pagina's te laten werken met willekeurige lokale inhoud, maakt u eerst de repository op GitHub.
Als je hebt besloten om de GitHub-app te gebruiken, Dit is hoe je je eigen handleidingpagina's zou maken.
Selecteer de Mijn repositories
mappentabblad en klik vervolgens op de pijl op de repository waarmee u GitHub Pages wilt maken. Als je momenteel geen opslagruimte hebt om dingen mee te beginnen, kun je er een aanmaken vanuit de app.
Als u GitHub-pagina's aan het maken bent met username.github.com
, de hoofdtak is de paginatak, zodat je kunt doorgaan en het project in een lokale map kunt openen, zonder de creatie van de gh-pagina's
tak. Als u GitHub-pagina's voor een project maakt, wilt u een nieuw filiaal maken met de naam gh-pagina's
; Klik op de knop aan de rechterkant van de repository en klik vervolgens op de knop + aan de rechterkant van de huidige vertakking.
Hiermee kunt u de nieuwe filenaam invoeren.
Standaard heeft de nieuwe vestiging al uw huidige projectbestanden, dus u wilt alle bestanden in het project verwijderen terwijl de gh-pagina's
tak is geselecteerd. (Zorg er wel voor dat de indicator "current branch" aangeeft dat u zich op de tak gh-pages bevindt, tenzij u pagina's aanmaakt voor gebruikersnaam.github.com.)
Vervolgens kunt u een statische site rechtstreeks in uw projectmap maken.
Nadat u de statische site in de projectmap hebt gemaakt, keert u terug naar de GitHub-app en gaat u naar veranderingen
tab aan de linkerkant. Dit toont alle wijzigingen die u hebt aangebracht, inclusief het verwijderen van de originele bestanden. Maak een commit door het formulier bovenaan links in te vullen. Zodra u dit hebt gedaan, kunt u teruggaan naar het tabblad takken en publiceren
de gh-pagina's tak (of de hoofdtak, als u pagina's aanmaakt voor gebruikersnaam.github.com). Dit is de stap die uw code naar GitHub pusht en de statische site op de server initieert.
U kunt de repository ook gemakkelijk via de opdrachtregel klonen door de URL boven aan de projectpagina te selecteren en de volgende opdracht uit te voeren.
git clone [email protected]: gebruikersnaam / projectname.git
Vervolgens moet u een nieuw filiaal maken met de naam gh-pagina's
; deze tak moet ook helemaal leeg zijn. Voer deze opdrachten uit:
git checkout --orphan gh-pages git rm -rf. git commit -am "initial pages commit"
(Raadpleeg voor meer informatie de officiële documentatie).
Hiermee wordt het project naar een map met de naam geretourneerd Naam van het project
(wat uw project ook is) in uw huidige werkdirectory, en zal ook automatisch GitHub hebben als de externe oorsprong
. In feite betekent dit dat je bestanden kunt maken en wijzigingen kunt aanbrengen, en vervolgens de volgende paar opdrachten kunt volgen om die bestanden en wijzigingen bij te houden, en ze naar GitHub kunt pushen.
git status # haalt de huidige status van de repository op en herkent deze; dit zal nieuwe bestanden en niet-getraceerde wijzigingen laten zien. # dit voegt alle nieuwe bestanden toe die gemaakt zijn git commit -am "Hier is mijn initiële commit" # dit creëert een commit op je huidige branch (standaard de master branch) git push origin gh-pages #dis duwt de gh-pages tak terug naar GitHub.
Dit proces wordt tijdens alle iteraties van uw site herhaald terwijl u wijzigingen aanbrengt. Dit werkt prima, maar wat als je een statische blog wilt hosten? Wellicht wordt het populairste statische blogplatform, Jekyll, standaard ondersteund door GitHub-pagina's. (Jekyll werd gebouwd door een teamlid op GitHub.)
Om Jekyll met GitHub-pagina's te gebruiken, moet je eerst een Jekyll-site lokaal maken. Je kunt lokaal compileren, of je kunt GitHub toestaan om voor je te compileren. Om aan de slag te gaan, kunt u deze gids volgen over Octopress, een raamwerk dat een aantal basisfuncties van Jekyll abstraheert.
U kunt ook een onbewerkte Jekyll-site maken. Eerst moet je de Jekyll-edelsteen installeren. Over het algemeen betekent dit het uitvoeren van de volgende opdracht:
gem installeer jekyll
Als je RubyGems hebt geïnstalleerd, zou dit de nieuwste stabiele release moeten zijn.
Bekijk de gebruikershandleiding en deze handleiding over NetTuts. U moet de basisbestandsstructuur maken voordat Jekyll een site kan genereren. Om snel aan de slag te gaan, bekijkt u Daniel McGraws Jekyll-Base, die de bestandsstructuur definieert die Jekyll nodig heeft om een site te genereren. Ik heb ook een paar momenten de tijd genomen om een herbruikbaar script te maken met de naam jekyll_structure. Volg de installatie-instructies; als het niet voor u werkt, maakt u eenvoudig de volgende structuur.
.
| - .gitignore
| - README
| - _config.yml
| - _layouts
| | - layout.html
| '- post.html
| - _posts
| '- 1985-10-26-Test-Post.md
'- index.html
De primaire configuratie voor Jekyll zal in de _config.yml
het dossier. _layouts
zal de lay-outs bevatten die zullen worden gebruikt bij het genereren.
Nadat je posts en pagina's hebt gemaakt en vervolgens hebt bewerkt, kun je ze gewoon toevoegen aan je git-repository en ze vastleggen, zoals eerder uitgelegd:
git add. git commit -am "Nieuwe post toegevoegd" git push origin gh-pages # of git push origin master voor gebruikersnaam.github.com pagina's
Notitie: het is veel eenvoudig te gebruiken frameworks zoals Octopress of Jekyll Bootstrap om posts en pagina's voor Jekyll automatisch te genereren, met commando's die lijken op hark new_post ["Berichtnaam komt hier"]
in plaats van handmatig je post- of paginabestanden te maken.
Het is belangrijk om te onthouden dat repository's die als privé zijn ingesteld op GitHub openbare pagina's zullen maken. GitHub creëerde deze functie voor projecten om gemakkelijk documentatie te publiceren; dit is gecentreerd rond het idee van openheid. Statische sites die op GitHub worden gehost, zullen op korte termijn voor niemand worden verborgen.
Beperk jezelf niet tot het ontwerp of de structuur die vooraf is gedefinieerd in de automatisch gegenereerde pagina's die GitHub biedt. Deze kunnen gemakkelijk worden bewerkt door eenvoudig de repository naar uw lokale computer te slepen, wijzigingen aan te brengen en ze in te dienen.
Hoe meer je leert over Git en GitHub, hoe comfortabeler je zult zijn met GitHub Pages. Bekijk deze post op Treehouse, evenals deze tutorial van Tutsplus van Jeffrey Way over GitHub voor ontwerpers.
Als u uw eigen domein naar een GitHub Pages-domein wilt omleiden, raadpleegt u deze handleiding op de GitHub-helppagina om aan de slag te gaan. Wie weet, misschien kunt u uw persoonlijke hostingprovider kwijtraken en helemaal stilstaan!
GitHub-pagina's zijn buitengewoon handig in gebruik, vooral in combinatie met andere hulpmiddelen zoals Jekyll. Het leren van de tools waar GitHub Pages van afhankelijk is, zal je helpen om een betere en waardevollere ontwikkelaar en ontwerper te worden, en het is een geweldige manier om je projecten onder de aandacht te brengen. Bovendien biedt GitHub dit als een gratis service voor iedereen, dus de kosten om te beginnen zijn beperkt tot de waarde van de tijd die je besteedt aan leren. Waar wacht je op? Induiken!