Opprett din egen gratis nettside med et personlig domene
Det å lansere en nettside kan ofte oppleves som en kostbar affære, der man må betale for hver minste detalj i prosessen.
Men hva om du kunne lage en helt gratis nettside, enten for privat bruk eller for å fremme din karriere? Det er faktisk mulig å designe din neste nettside med et personlig domene, gratis hosting og SSL-kryptering, helt uten kostnad. Høres det for godt ut til å være sant? Det er det ikke!
Det er velkjent at en nettside kan gi en betydelig økning i vekst, og i dag er det mer en nødvendighet enn en luksus. Dette gjelder ikke bare for bedrifter, men også for privatpersoner som ønsker å bygge sin egen digitale identitet.
Enten det er snakk om å registrere et domene, hoste innholdet, bygge selve nettsiden, eller aktivere SSL-kryptering, er det ofte utgifter som tapper lommeboken. Og for å gjøre vondt verre, noen av disse utgiftene er tilbakevendende, og varer i det uendelige.
Men tenk om jeg fortalte deg at du kunne lage en gratis nettside, samtidig som du gjennomfører alle de essensielle stegene i byggeprosessen helt kostnadsfritt? Enten du er en erfaren utvikler eller nybegynner, kan du gjøre dette gratis som student.
Hvis du kjenner til GitHub, har du kanskje hørt om GitHub Pages. Dette er en gratistjeneste som følger med hver GitHub-konto. GitHub Pages lar brukere lage og hoste sine egne nettsider gratis, men det er et stort forbehold. Domenenavnene til disse gratis nettsidene ender som regel på github.io, noe som kan virke uprofesjonelt.
Hva er GitHub Student Developer Pack?
Få tar en nettside med et langt og uprofesjonelt domenenavn seriøst. Men vi er ikke her for å diskutere fordeler eller ulemper med GitHub Pages. Jeg har lovet deg en måte å lage en gratis nettside med et personlig domenenavn, og her er hvordan du gjør det.
GitHub gir studenter som er registrert på et grads- eller diplomstudium muligheten til å benytte seg av en fantastisk pakke med praktiske nettverktøy. Denne pakken er kjent som GitHub Student Developer Pack. Den inkluderer profesjonelle abonnementer og gode rabatter på populære verktøy som Canva, Namecheap, Microsoft Azure, Discord, Name.com og StreamYard, for å nevne noen.
I denne artikkelen skal vi bruke Namecheap for å registrere et gratis personlig domene, og GitHub Pages for å hoste nettsiden vår. Vi skal også se på hvordan man designer og laster opp HTML-, CSS- og JavaScript-filer til GitHub Pages. Til slutt skal vi aktivere SSL-kryptering for nettsiden. Men først må vi registrere oss for Student Developer Pack.
Hvordan søke om GitHub Student Developer Pack?
For å registrere deg for Student Developer Pack, trenger du i utgangspunktet en universitetsgodkjent student-e-postadresse. En slik e-postadresse slutter vanligvis med universitetets domenenavn, for eksempel [email protected] Det finnes også andre måter å registrere seg på, men de krever lengre behandlingstid. Hvis du har student-e-postadressen din klar, kan du registrere deg for pakken slik:
Trinn 1: Gå til GitHub Education og klikk på «Logg inn».
Hvis du allerede har pakken, kan du logge deg på med dine opplysninger. Ellers kan du følge trinnene nedenfor.
Klikk på «Opprett en konto» i påloggingsvinduet.
Trinn 2: Registrer deg med din student-e-post og opprett en konto.
Trinn 3: Når du blir spurt om «Hva beskriver best din akademiske status?», velg «Student».
Trinn 4: Fyll ut de nødvendige feltene med detaljer om skolens navn og formålet med å bruke GitHub.
Trinn 5: Send inn søknaden din ved å bruke «Send inn informasjonen din».
Du vil motta en bekreftelses-e-post angående utviklerpakken hvis søknaden din blir godkjent av GitHub. Behandlingstiden kan variere, spesielt i perioder med mange søknader.
Hvordan søke om GitHub Student Developer Pack uten student-e-post?
GitHub gir deg også muligheten til å søke om pakken ved å bruke et gyldig student-ID eller annen dokumentasjon på din akademiske status. Ulempene her er lengre ventetid og høyere risiko for å få avslag. Likevel, her er hvordan du kan søke om pakken via denne metoden:
Trinn 1: Følg trinnene ovenfor for å opprette en konto med din personlige e-post.
Trinn 2: Last opp beviset på din akademiske status via kamera eller ved å laste opp bildene direkte til GitHub via «Last opp»-knappen.
Trinn 3: Fyll ut de nødvendige detaljene, som skolens navn og formålet med å bruke GitHub.
Trinn 4: Send inn søknaden.
Hvordan registrere ditt egendefinerte domene via Namecheap?
La oss anta at du har fått din GitHub Education-konto i gang. De neste stegene innebærer å bruke Namecheap for å registrere ditt gratis, personlige domene og hoste det via GitHub Pages. Følg disse trinnene for å registrere ditt foretrukne domenenavn:
Trinn 1: Logg inn på din GitHub Education-konto og gå til «Fordeler».
Du burde se et «Web Dev Kit» og et «Virtual Event Kit».
Trinn 2: Gå til «Virtual Event Kit» og scroll ned til du finner Namecheap.
GitHub tilbyr en 1-års gratis domenenavnregistrering på .me TLD. Du får tilgang ved å klikke på «Få tilgang».
Trinn 3: I det neste vinduet må du godkjenne tilkoblingsforespørselen fra Namecheap til din GitHub-konto. Godkjenn Namecheap og fortsett.
Du bør se en melding som sier: «Vi har verifisert din studentpakke med GitHub» etter godkjenning.
Trinn 4: Finn ditt foretrukne domene i søkefeltet og klikk på «Finn».
Du vil se om domenenavnet er tilgjengelig på neste skjerm. Hvis det er tilgjengelig, kan du fortsette å kjøpe det gratis.
Trinn 5: Gå til kassen med din GitHub Education-e-postadresse, og velg GitHub Pages som hostingsmetode.
Etter å ha registrert ditt personlige domenenavn og valgt GitHub Pages som host, skal Namecheap automatisk opprette et depot i din GitHub-konto. Dette depotet er tomt og inneholder kun en README.md-fil.
Du kan få tilgang til dette depotet ved å logge på din GitHub-konto og klikke på «Dine repositorier». GitHub Pages tilbyr ikke visuelle verktøy og ferdige temaer; du må kode hele nettsiden manuelt og laste opp relaterte filer til ditt nyopprettede GitHub-depot.
Hvordan lage et gratis nettsted og hoste det på GitHub Pages?
Som nevnt må du lage alle HTML-, CSS- og JavaScript-filene som tilhører nettstedet ditt. Hvis du er interessert i webutvikling og vet hvordan du koder, er det bare å laste opp filene dine til GitHub-depotet for å få nettsiden din live. Du kan hoppe til den delen av artikkelen som omhandler opplasting av nettstedskoden til GitHub Pages.
Men hvis du ikke har mye kunnskap om webutvikling, fortvil ikke! Du kan følge trinnene nedenfor og designe ditt eget nettsted med litt grunnleggende HTML:
Trinn 1: Gå til HTML5 UP og finn et nettsidedesign du liker. Du kan velge et hvilket som helst ferdig tema fra hvilken som helst plattform. Her har jeg valgt «Massively» fra HTML5 UP, men du kan fritt laste ned og tilpasse hvilket som helst design du ønsker.
Trinn 2: Pakk ut den nedlastede zip-filen med nettsidedesignet.
Du vil se filer som index.html og generic.html, samt mapper med navn som «assets» og «images» i den utpakkede mappen.
Trinn 3: Åpne de utpakkede filene i Visual Studio Code og velg filen index.html.
Trinn 4: Last ned og installer utvidelsen «Live Server» i Visual Studio Code hvis du ikke allerede har den.
Trinn 5: Velg filen index.html, høyreklikk og velg «Åpne i Live Server». Dette lar deg se endringene i HTML-filen din i sanntid i nettleseren.
Hvordan tilpasse nettstedets design?
Jeg vil ikke kategorisere den videre prosessen med å tilpasse nettstedet ditt som «Trinn». Det er helt opp til deg hvordan du vil tilpasse HTML-filene. Men her er et eksempel på hvordan jeg tilpasset «Massively»-designet fra HTML5 UP og gjorde det om til en portefølje. Du kan la deg inspirere av dette, eller tilpasse nettsiden din helt etter eget ønske. Valget er ditt!
Endre tittel- og avsnittsetikettene
Først endret jeg tittelkoden «Massively». Tittelkoden i HTML-filen avgjør navnet som vises i nettleserfanen. Standardtittelen for Massively er «Massively by HTML5 UP», og jeg anbefaler at du endrer den til noe som passer med nettsiden din.
Jeg endret tittelkoden til «Samyak Goswami | Tech Content Writer» siden det passet perfekt med min portefølje. Deretter endret jeg intro-delen av nettsiden, som sa «This is Massively» (inneholdt i H1-taggen), til «Samyaks Portfolio». Jeg endret teksten under i avsnittsetikettene til «Et utstillingsvindu for mine prosjekter og mine evner».
I navigasjonsdelen (Nav) i indeksfilen fjernet jeg to av de tre navigasjonsknappene i liste-taggen. Jeg ville ha en enkeltsides nettside med all informasjon på én side. Du kan fritt endre antall navigasjonsknapper.
Jeg endret senere teksten «This is Massively» på navigasjonsknappen til «Mine artikler».
Endre lenker og ikoner for sosiale medier
Du vil også se de ulike sosiale medier-ikonene i live-serveren, som Twitter, Facebook, Instagram og GitHub. Jeg valgte å fjerne Twitter og Facebook, og beholdt Instagram og LinkedIn.
Du kan endre ikoner og lenker for sosiale medier ved å gå til Navigasjons-delen (Nav) og finne liste-taggene der Twitter, Instagram og andre står skrevet.
Legg merke til at det ikke finnes lenker knyttet til disse ikonene, siden href-taggen er tom. Du kan legge til lenker i href-taggen ved å erstatte «#» med din foretrukne lenke.
Endre innholdet på hjemmesiden
Først endret jeg H2-taggen til «Mitt navn er Samyak Goswami» og avsnittsetiketten til «Jeg er en teknologientusiast …». Jeg anbefaler at du endrer H2-taggen med noe som passer med innholdet på hjemmesiden din, og at avsnittsetiketten forklarer det.
Vi kommer nå til den viktigste delen av denne tilpasningen: endring av innholdet i artikkel-boksene.
For å gjøre dette, går du til «Innlegg»-delen i indeksfilen. Her vil du se flere kodebiter i artikkel-taggene. Du kan legge til lenker til historiene dine ved å endre href-delen, slik vi gjorde med lenkene til sosiale medier-ikonene.
Senere kan du endre navnene på artiklene ved å endre innholdet i H2-taggene. Du kan også legge til beskrivelser til artiklene dine ved hjelp av avsnittsetiketten.
Gjenta prosessen for hver artikkel ved å legge til lenker, endre navn og legge til beskrivelser.
Legge til bilder på nettsidene dine
Du har kanskje lagt merke til at forhåndsvisningen ser veldig annerledes ut enn bildene på HTML5 UP-siden. Dette skyldes bildene som følger med den tilpassbare filen. La oss legge til egne bilder på nettsiden vår.
For å gjøre det, navigerer du til mappen der du tidligere pakket ut «Massively»-zip-filen. Åpne den utpakkede mappen og gå til «Bilder»-mappen. Du bør se ulike bilder kalt bg, pic01, pic02, osv. Dette er bildene som er knyttet til artiklene våre i artikkel-taggen.
Du kan enten legge til egne bilder og endre indeksfilen med navnene på disse, eller legge til bilder og gi dem samme navn som standardbildene. Ved å gi bildene identiske navn slipper vi å endre koden, og vi sparer tid.
Jeg anbefaler at du korrekturleser og endrer andre deler av nettstedet som ikke er like viktige. Her er porteføljen jeg opprettet med trinnene nevnt ovenfor: samyakgoswami.me.
Hvordan laste opp nettstedskoden til GitHub Pages?
Etter å ha kodet og designet nettsiden din, er det på tide å laste den opp til GitHub Pages, slik at den blir live på Internett.
Slik laster du opp nettsiden til GitHub Pages:
Trinn 1: Logg på din GitHub-konto og gå til «Mine arkiver».
Trinn 2: Du vil se et depot med navnet ditt_brukernavn.github.io. Gå inn i dette depotet.
Trinn 3: Du vil se muligheten til å lage din egen fil, eller laste opp filer til GitHub-depotet.
Trinn 4: Velg alle fem filene og mappene: «assets», «images», «elements», «generic» og «index». Dra og slipp dem inn i depotet.
Etter at filene er lastet opp, bekreft koden og vent til GitHub behandler filene dine.
Trinn 5: Naviger til «Innstillinger > GitHub-sider» for å se statusen til nettsiden din. Du bør se «Nettsiden din er publisert på ditt_personlige_domene.»
Du kan nå gå til nettadressen din og se etter nettsiden selv. Husk at det kan ta litt tid før nettsiden publiseres.
Hvordan aktivere SSL-kryptering i GitHub Pages?
HTTP er en usikker måte å administrere brukerforespørsler på nettsiden din. Alle med onde hensikter og teknisk kunnskap kan avskjære kommunikasjonen mellom brukeren og nettsiden din. HTTPS gir derimot alle dine besøkende en mye sikrere opplevelse. GitHub Pages tilbyr gratis HTTPS-kryptering, og her er hvordan du benytter det:
Scroll til «Sider»-delen i depotet.
Du vil se valget «Håndhev HTTPS» nederst i vinduet. SSL-krypteringen skal bli aktivert så snart du huker av for «Håndhev HTTPS».
Hvis «Håndhev HTTPS» ikke er tilgjengelig for ditt domene, kan du aktivere SSL-kryptering ved hjelp av trinnene nedenfor:
Trinn 1: Logg på din Namecheap-konto og gå til «Domeneliste».
Trinn 2: Naviger til «Administrer domene» og deretter til «Avansert DNS».
Du vil se noen eksisterende CNAME- og A-poster.
Legg til følgende A-poster, med «Vert» som «@» og IP-adresse som «185.199.108.153». Deretter med «Vert» som «@» og IP-adresse som «185.199.109.153».
Fortsett til du har 4 A-poster, med IP-adresse opp til «185.199.111.153».
Fjern alle tidligere A-poster.
Trinn 3: Legg deretter til en CNAME-post med «Vert» som «www» og «Verdi» som ditt GitHub-brukernavn (punktum) github (punktum) io.
Fjern de tidligere CNAME-postene. Til slutt bør DNS-innstillingene dine ha 4 A-poster og 1 CNAME-post.
Trinn 4: Gå til GitHub-sider i Innstillinger-delen. «Håndhev HTTPS» skal nå være tilgjengelig for domenet ditt.
Oppsummering
GitHub gir en fantastisk mulighet for alle studenter til å lage og administrere en gratis nettside. Selv om GitHub Pages ikke passer for sider med stor trafikk, fungerer det utmerket for et statisk nettsted i liten skala. Det gratis, personlige domenet, hosting og SSL-kryptering gjør det enda mer attraktivt.
Nå kan du lese «Hvordan velge en webvert for din nye nettside.»
Her er noen verktøy for overvåking av sidehastighet som kan varsle deg når nettsiden din er nede.