Hoe maak je een gratis website met aangepaste domeinnaam, hosting en SSL-codering?

Het maken van een website is een serieuze investering; je moet betalen voor elke stap van het bouwen van een website.

Wil je een gratis website maken voor persoonlijke of professionele groei? Hier is een manier om uw volgende website te ontwerpen met een aangepaste domeinnaam, levenslange gratis hosting en SSL-codering helemaal gratis. Wauw! Wat zou je nog meer kunnen vragen?

Het is een no-brainer dat het hebben van een website uw groeicijfers aanzienlijk verhoogt, en tegenwoordig is het meer een investering dan een luxe. Dit geldt niet alleen voor bedrijven, maar ook particulieren kunnen veel baat hebben bij een persoonlijke website.

Of u nu een domeinnaam registreert, de inhoud van uw website host, de website bouwt of SSL-codering inschakelt, u moet klaar zijn om uw zakken leeg te maken. Om de pijn nog groter te maken, zijn sommige van deze uitgaven terugkerend en gaan ze voor altijd door.

Wat als ik je zou vertellen dat je een gratis website kunt maken terwijl je alle bovengenoemde cruciale stappen doet om die ook gratis te bouwen? Hoe wereldvreemd het ook klinkt, als student kun je dit allemaal gratis doen.

Als u GitHub kent, kent u wellicht GitHub Pages. Het is gratis om de service te gebruiken die bij elk GitHub-account wordt geleverd. Met GitHub Pages kan elke gebruiker een gratis website maken en hosten, maar er is een groot voorbehoud. De domeinnamen van deze gratis websites eindigen in wezen met github.io, wat de professionaliteit van uw website verpest.

Wat is het GitHub Student Developer Pack?

Minder gebruikers zullen uw website serieus nemen en een onnodig lange domeinnaam is nooit een goed idee. Maar hé! We zijn hier niet om te praten over de voordelen of voorbehouden van GitHub Pages. Ik heb een manier beloofd om je een gratis website te laten maken met de aangepaste domeinnaam, en hier is hoe je het kunt doen.

GitHub biedt een kans om gebruik te maken van een fantastische kit gevuld met handige online tools voor elke student die is ingeschreven voor een graad of diplomacursus, bekend als het GitHub Student Developer Pack. Het pakket bevat pro-abonnementen en verbluffende kortingen op populaire tools zoals Canva, Namecheap, Microsoft Azure, Discord, Name.com en StreamYard, naast een gazillion anderen.

In dit artikel zullen we Namecheap gebruiken om een ​​gratis aangepast domein te registreren en GitHub-pagina’s gebruiken om onze website te hosten. We zullen dan kijken naar manieren om uw HTML-, CSS- en JavaScript-bestanden te ontwerpen en te uploaden naar GitHub-pagina’s. Uiteindelijk zullen we ook SSL-encryptie voor de website inschakelen, maar eerst en vooral moeten we ons registreren voor het Student Developer Pack.

Hoe het GitHub Student Developer Pack aanvragen?

Het proces van registratie voor het Student Developer Pack komt neer op het hebben van een door de universiteit toegekend e-mailadres voor studenten. Een studenten-e-mailadres eindigt meestal op de domeinnaam van je universiteit, bijvoorbeeld [email protected] Er zijn andere manieren om je in te schrijven voor het pakket, maar deze vereisen veel langere beoordelingstijden dan het gebruik van een studenten-e-mail. Als je je studenten-e-mailadres bij de hand hebt, kun je je als volgt aanmelden voor het pakket:

Stap 1: Ga naar GitHub-onderwijs en klik op de optie Aanmelden.

U kunt inloggen met uw inloggegevens als u het pakket al heeft. Anders kunt u de onderstaande stappen volgen.

Klik op de optie Een account aanmaken in het aanmeldingsvenster.

Stap 2: Registreer je vervolgens met je studentenmailadres en maak een account aan.

Stap 3: Wanneer u wordt gevraagd met “Wat beschrijft uw academische status het beste?”, zorg er dan voor dat u Student selecteert.

  Wanneer is Discovery Plus beschikbaar op PS4?

Stap 4: Vul nu de benodigde vakken in met details over de naam van uw school en uw doel om GitHub te gebruiken.

Stap 5: Dien ten slotte uw aanvraag in met de optie “Verzend uw informatie”.

U zou een bevestigingsmail met betrekking tot het ontwikkelaarspakket moeten ontvangen als uw toepassing wordt goedgekeurd door GitHub. Het proces duurt meestal een paar dagen, maar de tijd kan aanzienlijk variëren tijdens piekuren.

Hoe het GitHub Student Developer Pack aanvragen zonder studentenmail?

GitHub geeft je ook de mogelijkheid om het pakket aan te vragen met een geldige studentenkaart of een ander bewijs van je academische status. De enige kanttekeningen zijn de lange wachttijd en de hogere afwijzingsratio. Hoe dan ook, hier is hoe je het studentenpakket op deze manier kunt aanvragen:

Stap 1: Volg bovenstaande stappen om een ​​account aan te maken via je persoonlijke e-mailadres.

Stap 2: Upload nu het bewijs van je academische status met behulp van de camera-optie of upload de foto’s rechtstreeks naar GitHub met behulp van de knop Uploaden.

Stap 3: Vul vervolgens alle benodigde details in, zoals de naam van de school en het doel van het gebruik van GitHub.

Stap 4: Dien uw aanvraag in.

Hoe registreer je je eigen domein met Namecheap?

Ik neem aan dat je je GitHub Education-account in de lucht hebt. De volgende stappen omvatten het gebruik van Namecheap om uw gratis aangepaste domein te registreren en te hosten via GitHub Pages. Volg deze stappen om uw favoriete domeinnaam te registreren:

Stap 1: Log in op uw GitHub Education-account en ga naar het gedeelte Voordelen.

U zou een Web Dev Kit en een Virtual Event Kit moeten zien.

Stap 2: Ga naar de Virtual Event Kit en scrol omlaag om Namecheap te vinden.

GitHub biedt een 1-jarige domeinnaamregistratie op .me TLD, die u kunt openen door op de optie Toegang krijgen te klikken.

Stap 3: In het volgende venster wordt u gevraagd om het verbindingsverzoek van Namecheap naar uw GitHub-account te autoriseren. Autoriseer Namecheap en ga verder met de volgende stap.

Je zou een prompt moeten zien met de tekst “We hebben je studentenpakket met GitHub geverifieerd” na succesvolle autorisatie.

Stap 4: Zoek uw voorkeursdomein via de zoekbalk en klik op Zoeken.

U zou de beschikbaarheid van de domeinnaam op het volgende scherm moeten zien. Als uw domeinnaam beschikbaar is, kunt u deze gratis kopen.

Stap 5: Afrekenen met het GitHub Education-e-mailadres en selecteer GitHub Pages als uw hostingmethode terwijl u doorgaat.

Na het succesvol registreren van uw aangepaste domeinnaam en het kiezen van de GitHub-pagina’s als uw hosting, zou Namecheap automatisch een repository in uw GitHub-account moeten maken. Deze repository is volledig leeg en bevat alleen een README.md-bestand.

U kunt toegang krijgen tot deze repository door in te loggen op uw GitHub-account en op het gedeelte “Uw repositories” te klikken. GitHub Pages biedt geen visuele hulpmiddelen en vooraf gemaakte thema’s voor uw website; je moet de hele website handmatig coderen en gerelateerde bestanden uploaden naar je nieuw gemaakte GitHub-repository.

Hoe maak je een gratis website en host je deze op GitHub-pagina’s?

Zoals hierboven vermeld, moet u alle HTML-, CSS- en JavaScript-bestanden maken die verband houden met uw website. Als je van Web Dev houdt en weet hoe je er doorheen moet coderen, is het goed om je bestanden naar je GitHub-repository te uploaden en je website te laten werken. U kunt naar het gedeelte van dit artikel scrollen dat gaat over het uploaden van de websitecode naar GitHub-pagina’s.

Maar als u iemand bent die weinig tot geen informatie heeft over Web Dev, hebben wij u gedekt. U kunt de onderstaande stappen gebruiken en uw eigen website ontwerpen met behulp van wat basis-HTML:

Stap 1: Ga naar HTML5 UP en blader naar het website-ontwerp dat u leuk vindt. U kunt elk ander vooraf gebouwd thema van elk platform kiezen. Hier heb ik “Massively” van HTML5 UP gekozen, maar je bent vrij om elk website-ontwerp naar keuze te downloaden en aan te passen.

Stap 2: Pak het gedownloade zip-bestand van uw favoriete website-ontwerp uit.

U zou bestanden met de namen index.html en generic.html en mappen zoals activa en afbeeldingen in de uitgepakte map moeten zien.

Stap 3: Open nu de uitgepakte bestanden met Visual Studio Code en selecteer het bestand index.html.

  Deel het scherm van uw pc met elke computer via wifi of LAN met behulp van ScreenTask

Stap 4: Download en installeer de extensie “Live Server” in de Visual Studio Code als u deze nog niet heeft.

Stap 5:Selecteer het bestand index.html, klik met de rechtermuisknop en selecteer de optie “Openen in Live Server”. Met deze optie kunt u de wijzigingen in uw HTML-bestand in uw browser in realtime visualiseren.

Hoe pas je het ontwerp van je website aan?

Ik zal het proces na dit punt niet meer “stappen” noemen voor het aanpassen van uw website. Het aanpassen van de HTML-bestanden is geheel aan uw voorkeur, maar hier is hoe ik het “Massively” ontwerp van HTML5 UP heb aangepast en omgezet in een portfolio. U kunt ervoor kiezen om hier inspiratie uit te halen of uw website geheel zelf aan te passen. De keuze is aan jou!

De titel- en alineatags wijzigen

Bij het begin van mijn aanpassingsproces heb ik de titeltag ‘Massively’ gewijzigd. De titeltag van uw HTML-bestand bepaalt de naam terwijl deze wordt geopend in een browsertabblad. De standaardtitel voor Massively zou “Massively by HTML5 UP” moeten zijn en ik raad aan deze te wijzigen in iets dat op uw website lijkt.

Ik heb de titeltag gewijzigd in “Samyak Goswami | Tech Content Writer” omdat het bij uitstek geschikt was voor mijn portfolio. Vervolgens veranderde ik het Intro-gedeelte van de website, dat zei: “This is Massively” (opgenomen in de H1-tag) en maakte het om voor de hand liggende redenen “Samyak’s Portfolio”. Vervolgens heb ik de onderstaande tekst in alinea-tags gewijzigd in “Een showcase van mijn projecten en mijn vaardigheden.”

Toen ik naar de sectie Navigatie (Nav) in het indexbestand ging, heb ik twee van de drie navigatieknoppen in de List-tag weggelaten. Ik wilde een website van één pagina maken met alle details op één pagina, maar je bent vrij om het aantal navigatieknoppen naar keuze aan te passen.

Ik heb later de tekst ‘Dit is massaal’ op de navigatieknop gewijzigd in ‘Mijn artikelen’.

De links en pictogrammen voor sociale media wijzigen

Je moet ook de verschillende sociale-mediapictogrammen op de liveserver zien, zoals Twitter, Facebook, Instagram en GitHub. Ik besloot om Twitter en Facebook weg te laten en Instagram en LinkedIn te behouden voor mijn gebruik.

U kunt de pictogrammen voor sociale media en hun links wijzigen door naar het gedeelte Navigatie (Nav) te gaan en te scrollen naar Lijsttags met Twitter, Instagram en meer erin geschreven.

Merk op dat er geen links zijn gekoppeld aan deze pictogrammen voor sociale media, aangezien de href-tag leeg is gelaten. U kunt links aan de href-tag toevoegen door “#” te vervangen door uw gewenste link.

De inhoud van de startpagina wijzigen

Eerst veranderde ik de H2-tag en maakte deze “Mijn naam is Samyak Goswami” en wijzigde vervolgens de alinea-tag in “Ik ben een tech-enthousiasteling …”. Ik stel voor dat je de H2-tag wijzigt met iets dat overeenkomt met de inhoud van je startpagina en de alinea-tag die dit uitlegt.

We komen nu met het meest cruciale onderdeel van dit maatwerk; het wijzigen van de inhoud van de artikeltegels.

Ga hiervoor naar het gedeelte Berichten in het indexbestand en u zou meerdere codefragmenten moeten zien in de artikeltags. Je kunt links naar je verhalen toevoegen door de href-sectie aan te passen zoals we deden bij het toevoegen van links naar sociale media-pictogrammen.

Later kunt u de naam van de artikelen wijzigen door de inhoud binnen de H2-tags aan te passen. U kunt ook een beschrijving aan uw artikelen toevoegen met behulp van de alinea-tag.

Herhaal het proces voor elk artikel door links toe te voegen, namen te wijzigen en een beschrijving toe te voegen aan al uw artikelen.

Afbeeldingen toevoegen aan uw websites

Het is je vast opgevallen dat de preview er heel anders uitziet dan de afbeeldingen op de HTML5 UP-website. Dit komt door de vlakke en saaie foto’s in het aanpasbare bestand. Laten we onze website wat meer pit geven door er aangepaste afbeeldingen aan toe te voegen.

Originele afbeeldingen

Ga hiervoor naar de map waar u eerder het “Massively” zipbestand had uitgepakt. Open de uitgepakte map en ga naar de map Afbeeldingen. U zou verschillende afbeeldingen moeten zien met de namen bg, pic01, pic02, enzovoort. Dit zijn de afbeeldingen die zijn gekoppeld aan onze artikelen in de artikeltag.

  Privacy-indicatoren inschakelen op uw Chromebook

U kunt aangepaste afbeeldingen toevoegen en het indexbestand wijzigen met de namen van deze afbeeldingen of de afbeeldingen toevoegen en ze een naam geven die lijkt op de standaardafbeeldingen. Door de afbeeldingen identieke namen te geven, hoeven we de code niet aan te passen en veel tijd daarna.

Gewijzigde afbeeldingen

Ik raad u aan om andere delen van uw website die niet belangrijk zijn, te proeflezen en aan te passen. Dit is de portfolio die ik heb gemaakt met behulp van de stappen die ik hierboven heb genoemd: samyakgoswami.me.

Hoe upload je je websitecode naar GitHub Pages?

Nadat je je website eindelijk hebt gecodeerd en ontworpen, is het tijd om hem te uploaden naar GitHub-pagina’s en hem live op internet te zetten.

Zo kunt u uw website uploaden naar GitHub-pagina’s:

Stap 1: Log in op uw GitHub-account en ga naar het gedeelte Mijn opslagplaatsen.

Stap 2: Je zou een repository moeten zien met de naam your_username.github.io. Ga naar deze repository.

Stap 3: U zou een optie moeten zien om uw eigen bestand te maken of bestanden te uploaden naar de GitHub-repository.

Stap 4: Selecteer alle vijf bestanden en mappen; activa, afbeeldingen, elementen, generiek, index, en sleep ze naar de repository.

Nadat de bestanden zijn geüpload, legt u de code vast en wacht u tot GitHub uw bestanden verwerkt.

Stap 5: Navigeer naar Instellingen> GitHub-pagina’s om de status van uw website te zien. U zou de prompt “Uw website is gepubliceerd op uw_custom_domain” moeten zien.

U kunt nu naar uw webadres gaan en zelf naar de website zoeken. Houd er rekening mee dat het enige tijd kan duren voordat de website live gaat.

Hoe SSL-codering in GitHub-pagina’s in te schakelen?

HTTP is een onveilige manier om gebruikersverzoeken op uw website te beheren. Iedereen met kwade bedoelingen en gedegen technische kennis kan de interacties tussen de gebruiker en uw website onderscheppen. Aan de andere kant geeft HTTPS al uw bezoekers een veel veiligere browsesessie. GitHub-pagina’s bieden gratis HTTPS-codering, en hier is hoe u deze kunt gebruiken:

Scrol naar het gedeelte Pagina’s in de repository.

U zou de optie “HTTPS afdwingen” aan het einde van het venster moeten zien. De SSL-codering zou live moeten gaan zodra u het selectievakje HTTPS afdwingen aanvinkt.

Als u vindt dat de optie HTTPS afdwingen niet beschikbaar is voor uw domein, kunt u SSL-codering inschakelen met behulp van de onderstaande stappen:

Stap 1: Log in op uw Namecheap-account en ga naar het gedeelte “Domeinlijst”.

Stap 2: Navigeer nu naar Domein beheren en vervolgens naar het gedeelte “Geavanceerde DNS”.

U zou enkele bestaande CNAME- en A-records moeten zien.

Voeg de volgende A-records toe met host als “@” en IP-adres als “185.199.108.153”. De volgende met de hostnaam “@” en het IP-adres als “185.199.109.153”.

Volg de trend totdat u 4 A-records hebt tot IP-adres “185.199.111.153”.

Verwijder alle vorige A-records.

Stap 3: Voeg vervolgens een CNAME-record toe met Host als “www” en waarde als uw GitHub-gebruikersnaam (punt) github (punt) io.

Verwijder de vorige CNAME-records. Uiteindelijk zouden uw DNS-instellingen 4 A-records en 1 CNAME-record moeten hebben.

Stap 4: Ga nu naar de GitHub-pagina’s in het gedeelte Instellingen. De optie HTTPS afdwingen zou nu beschikbaar moeten zijn voor uw domein.

Samenvattend

GitHub geeft elke student een fantastische kans om een ​​gratis website te maken en te beheren. Hoewel je GitHub-pagina’s niet kunt gebruiken voor het hosten van enorme verkeersbelastingen, vinkt het elk selectievakje aan voor een kleinschalige statische website. De gratis aangepaste domeinnaam, hosting en SSL-codering maken het nog mooier om te hebben.

Nu kunt u “Hoe u een webhost kiest voor uw nieuwe website” lezen.

Hier zijn enkele hulpprogramma’s voor het bewaken van de paginasnelheid om u op de hoogte te stellen wanneer uw website uitvalt.

gerelateerde berichten