Een website maken op GitHub-pagina's: 12 stappen (met afbeeldingen)

Inhoudsopgave:

Een website maken op GitHub-pagina's: 12 stappen (met afbeeldingen)
Een website maken op GitHub-pagina's: 12 stappen (met afbeeldingen)

Video: Een website maken op GitHub-pagina's: 12 stappen (met afbeeldingen)

Video: Een website maken op GitHub-pagina's: 12 stappen (met afbeeldingen)
Video: RARE MANIEREN OM ETEN TE SMOKKELEN || Grappige manieren om populair te worden door 123 GO! 2024, Mei
Anonim

GitHub Pages is een geweldige manier om je eigen persoonlijke site helemaal opnieuw te maken. Het is volledig gratis en vereist alleen een GitHub-account. Merk echter op dat GitHub Pages niet het meest gebruiksvriendelijke ontwerp biedt voor het maken van websites (in tegenstelling tot Wix of Squarespace), maar het is een geweldige manier om ervaring op te doen met HTML/CSS/JS en alle elementen van een website. Deze wikiHow laat je zien hoe je aan de slag kunt gaan.

Stappen

Maak een website op GitHub-pagina's Stap 1
Maak een website op GitHub-pagina's Stap 1

Stap 1. Registreer een account op GitHub, als je er nog geen hebt

Voordat u uw eigen website op GitHub-pagina's kunt maken, moet u een account op GitHub maken. Als je al een account op GitHub hebt, moet je inloggen. Beide zijn toegankelijk via de werkbalk rechtsboven.

Maak een website op GitHub-pagina's Stap 2
Maak een website op GitHub-pagina's Stap 2

Stap 2. Maak een opslagplaats op GitHub.

Zorg ervoor dat u de repository "[uw GitHub-gebruikersnaam hier].github.io" noemt. Hiermee wordt uw GitHub-website geïnitialiseerd.

Methode 1 van 2: Een code-editor gebruiken

Maak een website op GitHub-pagina's Stap 3
Maak een website op GitHub-pagina's Stap 3

Stap 1. Download GitHub-bureaublad, als je het nog niet hebt geïnstalleerd

Het installeren van GitHub-desktop is net zo eenvoudig als naar https://desktop.github.com/ gaan en op de grote paarse knop "Downloaden" klikken. Voer vervolgens het installatieprogramma uit. Dit is nodig om wijzigingen in uw repository door te voeren.

Maak een website op GitHub-pagina's Stap 4
Maak een website op GitHub-pagina's Stap 4

Stap 2. Installeer een code-editor

Je hebt er een nodig om syntaxisaccentuering op GitHub te krijgen. Populaire keuzes zijn onder meer Atom, Visual Studio Code, Sublime Text en Notepad++, gezien hun veelzijdige en minimalistische uitstraling. Nadat u een code-editor hebt geïnstalleerd, bent u klaar om aan de slag te gaan.

Maak een website op GitHub-pagina's Stap 5
Maak een website op GitHub-pagina's Stap 5

Stap 3. Maak een bestand met de naam "index.html"

U kunt dit doen in uw code-editor of online. Je kunt ook naar de locatie van je repository op je harde schijf gaan en een "index.html"-bestand maken in de map van de repository op je schijf.

Maak een website op GitHub-pagina's Stap 6
Maak een website op GitHub-pagina's Stap 6

Stap 4. Voeg uw HTML toe

U moet HTML leren om een eenvoudige webpagina te kunnen coderen. Het is ook handig voor u om CSS en JavaScript te leren, zodat u styling en functionaliteit aan uw webpagina kunt toevoegen.

Vergeet niet om het bestand op te slaan

Maak een website op GitHub-pagina's Stap 7
Maak een website op GitHub-pagina's Stap 7

Stap 5. Voer de wijzigingen door

Ga terug naar het GitHub-bureaublad en klik op de blauwe knop Commit to master. Klik vervolgens op Push Origin. Hiermee worden de wijzigingen geüpload naar GitHub.

Als u van plan bent meer wijzigingen aan te brengen, wilt u ook de oorsprong trekken. Klik op de Pull origin-knop op het GitHub-bureaublad om de laatste commit naar uw computer te downloaden

Maak een website op GitHub-pagina's Stap 8
Maak een website op GitHub-pagina's Stap 8

Stap 6. Bekijk uw webpagina

Ga naar "[uw GitHub-gebruikersnaam hier].github.io" in een webbrowser. Mogelijk moet u de cache van uw browser omzeilen door Ctrl of ⌘ Command ingedrukt te houden terwijl u op de vernieuwingsknop klikt om de nieuwe webpagina te bekijken.

Methode 2 van 2: GitHub Online gebruiken

Maak een website op GitHub-pagina's Stap 9
Maak een website op GitHub-pagina's Stap 9

Stap 1. Maak een bestand met de naam "index.html"

Klik op Bestand toevoegen en vervolgens op Nieuw bestand maken. Dit opent een bestandseditor. Voeg "index.html" toe aan het veld "Geef uw bestand een naam".

Maak een website op GitHub-pagina's Stap 10
Maak een website op GitHub-pagina's Stap 10

Stap 2. Voeg uw HTML toe

U moet HTML leren om een eenvoudige webpagina te kunnen coderen. Het is ook handig voor u om CSS en JavaScript te leren, zodat u styling en functionaliteit aan uw webpagina kunt toevoegen.

Vergeet niet om het bestand op te slaan

Maak een website op GitHub-pagina's Stap 11
Maak een website op GitHub-pagina's Stap 11

Stap 3. Voer de wijzigingen door

Klik op de groene knop Nieuw bestand vastleggen om het bestand op GitHub op te slaan.

Maak een website op GitHub-pagina's Stap 12
Maak een website op GitHub-pagina's Stap 12

Stap 4. Bekijk uw webpagina

Ga naar "[uw GitHub-gebruikersnaam hier].github.io" in een webbrowser. Mogelijk moet u de cache van uw browser omzeilen door Ctrl of ⌘ Command ingedrukt te houden terwijl u op de vernieuwingsknop klikt om de nieuwe webpagina te bekijken.

Tips

  • Om subpagina's toe te voegen, maakt u eenvoudig een nieuwe map op GitHub en voegt u een "index.html"-bestand toe aan die map.
  • Als je een domeinnaam registreert, kun je GitHub Pages die domeinnaam laten gebruiken in plaats van de standaardnaam.
  • Repository's voor GitHub-pagina's moeten openbaar zijn, tenzij je een premium-account hebt.

Aanbevolen: