GitHub is niet alleen een geweldige plek om uw code op te slaan en te delen met anderen, maar ze bieden ook gratis webhosting van uw HTML, CSS en JavaScript projecten!

In dit artikel zal ik je laten zien hoe je instellingen kunt krijgen om je eigen statische HTML website op GitHub te publiceren en te delen met behulp van de GitHub Desktop app! 🚀

eerste ding is het eerste: krijg jezelf een GitHub account! Je hebt geen toegang tot de gratis hosting of andere geweldige functies die GitHub te bieden heeft zonder een.,

the GitHub homepage with signup form rechts van het scherm. Langs de top is het belangrijkste navigatiegebied. Aan de linkerkant van het scherm staat de tekst “gebouwd voor ontwikkelaars” met een beschrijving van waar GitHub om draait.

met een GitHub account kunt u ook chatten met andere webontwikkelaars, zoals uzelf, door middel van problemen, en bijdragen aan andere open source projecten!,

Download en installeer de GitHub Desktop app

Dit is de app die we zullen gebruiken om onze code op GitHub te krijgen. Het is makkelijk te gebruiken, dus maak je geen zorgen; de gebruikersinterface is gemakkelijk te leren!

The GitHub Desktop homepage with a “downloaden voor macOS” Link, samen met een Windows-link. Langs de top is het belangrijkste navigatiegebied. In het midden van de schermtekst staat “The new native” met een beschrijving van waar GitHub Desktop over gaat.,
  • Download GitHub Desktop voor macOS
  • Download GitHub Desktop voor Windows

(als deze links niet werken, verken dan de GitHub Desktop homepage.)

Open het gedownloade toepassingsbestand en ga door het installatieproces zoals vereist met het besturingssysteem van uw computer.

vervolgens maken we een nieuw guthub project aan!

Maak een nieuw GitHub project

voordat we onze code uploaden naar GitHub moeten we eerst GitHub Desktop bewust maken van onze projectbestanden., We doen dit door een nieuwe Repository map aan te maken en vervolgens onze website bestanden naar deze nieuwe map te kopiëren.

3.1-Open de GitHub Desktop app en klik op de” Create New Repository ” knop.

de” Create New Repository ” knop. Hierboven staat: “Create a new project and publish it to GitHub”

3.,2 – als het dialoogvenster” Create a New Repository “verschijnt, vul dan de tekstinvoer” Name”in als:

.github.io

Vervang door uw GitHub account gebruikersnaam.

Opmerking: Het is erg belangrijk om uw repository op deze manier een naam te geven; dit zal GitHub vertellen om de bestanden in dit project automatisch te hosten en ze weer te geven wanneer iemand zijn browser wijst naar:



Dit zal het webadres zijn dat u zult delen wanneer uw site klaar is om te publiceren en live te gaan!


3.,3-de” lokale pad ” tekstinvoer is waar uw repository zal leven op uw computer; Dit is niet waar uw website bestanden momenteel op de harde schijf van uw computer. GitHub Desktop moet een nieuwe, lege map aanmaken.


We moeten uw site bestanden later kopiëren, maar voor nu, selecteer een map zoals /Sites in uw persoonlijke map., Dit maakt een nieuwe map binnen de /Sites map met de naam van uw archief, dat zal er zo uitzien:


/Sites/.github.io














  






Het “Maken van een Nieuw Archief” dialoog venster. Form controles omvatten, “Name”, “Local Path”, “Initialiseer deze repository met een README”, “Git Ignore”, en “License”. Twee actie controles aan de onderkant zijn gelabeld, “Cancel” en “Create Repository”.,


3.4 — laat alle andere opties in het formulier op hun standaardinstellingen staan en klik op de” Create Repository ” knop. Voor nu willen we gewoon de map maken die GitHub Desktop zal herkennen als een map waarmee het kan werken. In het belang van De Gids, laten we deze nieuwe map beschrijven als je GitHub Repository map.,


nadat uw GitHub Repository map is aangemaakt door op de “Create Repository” knop te klikken, zou de GitHub Desktop app er ongeveer zo uit moeten zien:










 


  






de GitHub Desktop app met een lege repository map. Bovenaan staan de opties voor “Current Repository”, “Current Branch”en” Publish repository”., De linkerkant bevat een ruimte voor een lijst van bestanden, een “samenvatting” tekstinvoer, een “beschrijving” tekstvak, en een “Commit to master” knop.


Kopieer uw bestanden naar de nieuwe Repository map


laten we zeggen dat u tot nu toe op uw website hebt gewerkt in een map op /Documents/my-site; we zullen dit beschrijven als uw werkmap. Binnen deze werkmap bevinden zich waarschijnlijk enkele bestanden en mappen met de naam index.html, /css, of /javascript., Wat we moeten doen is alles kopiëren van de werkmap naar onze nieuwe GitHub Repository map.


In de vorige stap hebben we de Github Repository map aangemaakt in de /Sites map met de naam, .github.io. Dit betekent dat de Github Repository map zich moet bevinden op /Sites/.github.io.,


De GitHub Desktop app ziet er nu zoiets als dit:














  






GitHub Desktop app nu het weergeven van de toegevoegde bestanden aan de linkerkant een bar en de tekst van het gemarkeerde bestand in de main-sectie van de app.


met al onze bestanden in de Github Repository map, zijn we klaar om onze bestanden te committen!,




to” commit “files means to take a” snapshot ” of the files and mappen in their current state. Door dit te doen, maken we ze klaar om naar een repository op GitHub gepusht te worden.




4.2 — voordat we onze bestanden committen om te publiceren, moeten we eerst GitHub vertellen waar deze commit over gaat. Vul de” Summary “tekstinvoer in, linksonder in de gebruikersinterface, met een titel op hoog niveau van wat deze commit inhoudt; iets simpels als,” mijn eerste commit! 😀 “werkt prima in dit geval.,


Optioneel kunt u meer details over de commit toevoegen in het tekstvak” Description”. Meestal zou je dingen willen opnemen zoals wat er veranderd is; misschien heb je een bug opgelost of wat nieuwe inhoud toegevoegd. Het is geweldig om deze notities beschikbaar voor andere ontwikkelaars of zelfs de toekomst u om ervoor te zorgen dat u weet waarom u die wijzigingen oh zo lang geleden!


zodra de” Summary “en optionele” Description “velden naar wens zijn ingevuld, klik je op de” Commit to master ” knop!,


Publiceer uw website


na het klikken op de “Commit to master” knop in de vorige stap, vraagt u zich misschien af:




Wat is er zojuist gebeurd? Mijn bestanden zijn verdwenen en de app is nu leeg!




maak je geen zorgen! In de linkerbenedenhoek van de GitHub Desktop interface staat een kleine indicator dat je commit succesvol was.,








  


onder de “Commit to master” knop toont recente commit berichten, elk met een “ongedaan maken” knop om de recente commit ongedaan te maken.


nu onze bestanden zijn gecommit, staat dit ons toe om onze commit naar GitHub te pushen!




naar” push ” bestanden betekent om de gecommit bestanden in hun huidige staat te uploaden naar een repository op GitHub.




5.,1-Zoek de” Publish repository ” knop langs de bovenkant van de GitHub Desktop interface.








 




de knop “repository publiceren”, gevonden langs de bovenste balk van de Github desktopgebruiker interface. De tekst onder het hoofdlabel luidt: “publiceer deze repository naar GitHub”.


ga je gang en klik hierop om uw bestanden naar GitHu te sturen … 


oh wacht, we zijn nog niet aangemeld bij GitHub vanuit de GitHub Desktop app!, Laten we dat doen, eerst…


*record scratch*


5.05 — wanneer het “Publish Repository” dialoogvenster verschijnt na het klikken op de “Publish repository” knop, zal het je eerst vragen om je aan te melden bij GitHub als je dat nog niet hebt gedaan.


klik op de ” Sign In “knop om het” Sign In “dialoogvenster te tonen; vul uw gebruikersnaam en wachtwoord in en klik op de” Sign in ” knop om het proces te voltooien. Je moet nu ingelogd zijn en goed om verder te gaan!,














  




 het dialoogvenster “Sign In” met een “gebruikersnaam OF e-mailadres” en “wachtwoord” tekstinvoer. Een link naar optioneel “aanmelden met uw browser” is ook beschikbaar. Twee actie controles aan de onderkant zijn gelabeld, “Cancel” en “Sign In”.


5.1, neem 2 — Nu we zijn aangemeld bij GitHub, ga je gang en klik op de” Publish repository ” knop om het uploadproces te starten.


5.,2-het dialoogvenster” Publiceer Repository ” verschijnt met een paar laatste opties waaruit u kunt kiezen voordat u uw website live plaatst.


alle opties in het formulier zijn prima zoals-is, behalve het selectievakje “houd deze code privé”; Dit moet worden uitgeschakeld om uw site met vrienden en familie te kunnen delen.








 




een geanimeerde afbeelding van het dialoogvenster” Publish Repository”., Een computer muis cursor beweegt in en stelt de “Keep this code private” als niet aangevinkt. Andere besturingselementen omvatten, “naam”, “beschrijving”, en “organisatie”. Twee actie controles aan de onderkant zijn gelabeld, “Cancel” en “Publish Repository”.


5.3-klik op de” Publish Repository ” knop om uw bestanden naar GitHub te sturen!


nu, in uw browser, ga naar uw nieuwe GitHub repository pagina om er zeker van te zijn dat uw bestanden de reis naar hun nieuwe home hebben gemaakt:




zijn al uw bestanden aanwezig en verantwoord? Goed! Goed gedaan!, 👍


deel uw website!


de allerlaatste stap is om opgewonden te raken en uw website in uw browser te bekijken! Surf door naar:




uw website zou voor uw ogen moeten verschijnen! ✨ 😄 ✨








 


  








		
 

	
 

	

		
	

		
 

	
		


				

		
Geef een reactie 
Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *