Å lage en nettside er en seriøs investering; du må betale for hvert trinn i å bygge et nettsted.
Ønsker du å lage en gratis nettside for personlig eller profesjonell vekst? Her er en måte å designe ditt neste nettsted med et tilpasset domenenavn, gratis hosting og SSL-kryptering helt gratis. Huff! Hva annet kan du be om?
Det er enkelt at det å ha en nettside øker veksttallene dine betydelig, og i dag er det mer en investering enn en luksus. Dette gjelder ikke bare for bedrifter, men enkeltpersoner kan også ha stor nytte av et personlig nettsted.
Enten du registrerer et domenenavn, er vert for nettstedets innhold, bygger nettstedet eller aktiverer SSL-kryptering, bør du være klar til å tømme lommene dine. For å øke smerten er noen av disse utgiftene tilbakevendende og fortsetter for alltid.
Hva om jeg fortalte deg at du kunne lage et gratis nettsted mens du gjør alle de ovennevnte viktige trinnene i å bygge nettsider det også gratis? Uansett om du er verdslig, kan du gjøre alt dette gratis hvis du er student.
Hvis du er klar over GitHub, kan du kanskje vite om GitHub-sider. Det er gratis å bruke tjenesten som følger med hver GitHub-konto. GitHub Pages lar hver bruker lage et gratis nettsted og være vert for det, men det er en stor advarsel. Domenenavnene til disse gratis nettstedene slutter i hovedsak med github.io, som ødelegger profesjonaliteten til nettstedet ditt.
Innholdsfortegnelse
Hva er GitHub Student Developer Pack?
Færre brukere vil ta nettstedet ditt på alvor, og det er aldri en god idé å ha et unødvendig langt domenenavn. Men hei! Vi er ikke her for å snakke om fordelene eller forbeholdene til GitHub-sider. Jeg lovet en måte å la deg lage et gratis nettsted med det tilpassede domenenavnet, og her er hvordan du kan gjøre det.
GitHub tilbyr en sjanse til å benytte et fantastisk sett fylt med praktiske nettverktøy til hver student som er påmeldt et grad eller diplomkurs, kjent som GitHub Student Developer Pack. Pakken inkluderer proff-abonnement og imponerende rabatter på populære verktøy som Canva, Namecheap, Microsoft Azure, Discord, Name.com og StreamYard, blant en gazillion andre.
I denne artikkelen vil vi bruke Namecheap til å registrere et gratis tilpasset domene og bruke GitHub-sider til å være vert for nettstedet vårt. Vi vil deretter se på måter å designe og laste opp HTML-, CSS- og JavaScript-filer til GitHub-sider. Etter hvert vil vi også aktivere SSL-kryptering for nettsiden, men først og fremst må vi registrere oss for Student Developer Pack.
Hvordan søke om GitHub Student Developer Pack?
Prosessen med å registrere seg for Student Developer Pack kommer ned til å ha en universitetsgodkjent student-e-postadresse. En student-e-postadresse slutter vanligvis med universitetets domenenavn, for eksempel, [email protected] Det finnes andre måter å registrere seg for pakken på, men de krever mye lengre gjennomgangstider enn å bruke en student-e-post. Hvis du har student-e-postadressen din klar, slik kan du registrere deg for pakken:
Trinn 1: Gå til GitHub utdanning og klikk på Logg inn-alternativet.
Du kan logge på med legitimasjonen din hvis du allerede har pakken. Ellers kan du følge trinnene nedenfor.
Klikk på alternativet Opprett en konto i påloggingsvinduet.
Trinn 2: Deretter registrerer du deg med student-e-posten din og oppretter en konto.
Trinn 3: Når du blir bedt om «Hvilken beskriver best din akademiske status?», sørg for å velge Student.
Trinn 4: Fyll nå de nødvendige boksene med detaljer om skolens navn og formålet med å bruke GitHub.
Trinn 5: Send til slutt inn søknaden din ved å bruke alternativet «Send inn informasjonen din».
Du bør motta en bekreftelses-e-post angående utviklerpakken hvis søknaden din blir godkjent av GitHub. Prosessen tar vanligvis noen dager, men tiden kan variere betydelig i rushtiden.
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 et annet bevis på din akademiske status. De eneste forbeholdene er lang ventetid og høyere avvisningsforhold. Uansett, her er hvordan du kan søke om studentpakken gjennom denne metoden:
Trinn 1: Følg trinnene nevnt ovenfor for å opprette en konto via din personlige e-post.
Trinn 2: Last nå opp beviset på din akademiske status ved å bruke kameraalternativet eller last opp bildene direkte til GitHub ved å bruke Last opp-knappen.
Trinn 3: Deretter fyller du inn alle nødvendige detaljer som skolens navn og formålet med å bruke GitHub.
Trinn 4: Send inn søknaden din.
Hvordan registrerer du ditt egendefinerte domene ved å bruke Namecheap?
Jeg antar at du har fått din GitHub Education-konto i gang. De følgende trinnene innebærer å bruke Namecheap til å registrere ditt gratis tilpassede domene og være vert for det gjennom GitHub-sider. Følg disse trinnene for å registrere ditt foretrukne domenenavn:
Trinn 1: Logg på GitHub Education-kontoen din og gå til Fordeler-delen.
Du bør se et Web Dev Kit og et Virtual Event Kit.
Trinn 2: Gå til Virtual Event Kit og rull ned for å finne Namecheap.
GitHub tilbyr en 1-årig domenenavnregistrering på .me TLD, som du får tilgang til ved å klikke på alternativet Få tilgang.
Trinn 3: Følgende vindu vil be deg om å godkjenne tilkoblingsforespørselen fra Namecheap til din GitHub-konto. Autoriser Namecheap og fortsett til neste trinn.
Du bør se en melding som sier: «Vi har verifisert studentpakken din med GitHub» etter vellykket godkjenning.
Trinn 4: Finn ditt foretrukne domene gjennom søkefeltet og klikk på Finn.
Du bør se tilgjengeligheten av domenenavnet på neste skjerm. Hvis domenenavnet ditt er tilgjengelig, kan du fortsette å kjøpe det gratis.
Trinn 5: Gå til kassen ved å bruke GitHub Education-e-postadressen og velg GitHub-sider som vertsmetode mens du fortsetter.
Etter å ha registrert ditt egendefinerte domenenavn og valgt GitHub-sidene som vert, bør Namecheap automatisk opprette et depot i GitHub-kontoen din. Dette depotet er helt tomt og inneholder kun en README.md-fil.
Du kan få tilgang til dette depotet ved å logge på GitHub-kontoen din og klikke på delen «Dine repositorier». GitHub Pages tilbyr ikke visuelle verktøy og forhåndsbygde temaer for nettstedet ditt; du må kode hele nettstedet manuelt og laste opp relaterte filer til ditt nyopprettede GitHub-lager.
Hvordan lage et gratis nettsted og være vert for det på GitHub-sider?
Som nevnt ovenfor, må du lage alle HTML-, CSS- og JavaScript-filene relatert til nettstedet ditt. Hvis du er interessert i Web Dev og vet hvordan du skal kode deg gjennom, er du flink til å laste opp filene dine til GitHub-depotet ditt og få nettstedet ditt til å kjøre. Du kan bla til delen av denne artikkelen som omhandler opplasting av nettstedskoden til GitHub-sider.
Men hvis du er noen som har lite eller ingen informasjon om Web Dev, har vi dekket deg. Du kan bruke trinnene nedenfor og designe ditt eget nettsted ved å bruke litt grunnleggende HTML:
Trinn 1: Gå til HTML5 OPP og bla til nettstedets design du liker. Du kan velge hvilket som helst annet forhåndsbygd tema fra hvilken som helst plattform. Her har jeg valgt «Massively» fra HTML5 UP, men du står fritt til å laste ned og tilpasse hvilken som helst nettsidedesign du ønsker.
Trinn 2: Pakk ut den nedlastede zip-filen til ditt favorittnettsidedesign.
Du bør se filer kalt index.html og generic.html og mapper som eiendeler og bilder i den utpakkede mappen.
Trinn 3: Åpne nå de utpakkede filene ved hjelp av 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, klikk med høyre museknapp og velg alternativet «Åpne i Live Server». Dette alternativet lar deg visualisere endringene i HTML-filen din i nettleseren din i sanntid.
Hvordan tilpasse nettstedets design?
Jeg vil ikke betegne prosessen utover dette punktet som «Trinn» for å tilpasse nettstedet ditt. Å tilpasse HTML-filene er helt opp til dine preferanser, men her er hvordan jeg tilpasset «Massively»-designet fra HTML5 UP og konverterte det til en portefølje. Du kan velge å hente inspirasjon fra dette eller tilpasse nettsiden din helt selv. Valget er ditt!
Endre tittel- og avsnittsetikettene
I begynnelsen av tilpasningsprosessen endret jeg tittelkoden «Massivt.» Tittelkoden til HTML-filen vil bestemme navnet mens den åpnes i en nettleserfane. Standardtittelen for Massively skal være «Massively by HTML5 UP», og jeg anbefaler at du endrer den til noe nettstedet ditt ligner.
Jeg endret tittelkoden til «Samyak Goswami | Tech Content Writer” ettersom den passet perfekt til porteføljen min. Deretter endret jeg Intro-delen av nettstedet, som sa: «This is Massively» (inneholdt i H1-taggen) og gjorde det til «Samyaks Portfolio» av åpenbare grunner. Deretter endret jeg teksten nedenfor i avsnittstagger til «Et utstillingsvindu for mine prosjekter og mine evner.»
Da jeg gikk til navigasjonsdelen (Nav) i indeksfilen, utelot jeg to av de tre navigasjonsknappene i List-taggen. Jeg ønsket å lage et enkeltsidenettsted med alle detaljene på en enkelt side, men du står fritt til å endre antall navigasjonsknapper i henhold til ditt valg.
Jeg endret senere «This is Massively»-teksten på navigasjonsknappen til «Mine artikler.»
Endre lenker og ikoner for sosiale medier
Du må også se de forskjellige sosiale medieikonene på live-serveren som Twitter, Facebook, Instagram og GitHub. Jeg bestemte meg for å utelate Twitter og Facebook og beholde Instagram og LinkedIn for min bruk.
Du kan endre ikonene for sosiale medier og koblingene deres ved å gå til Navigasjon (Nav)-delen og bla til Liste-tagger med Twitter, Instagram og mer skrevet i dem.
Legg merke til hvordan det ikke er noen lenker knyttet til disse sosiale medieikonene, siden href-taggen er tom. Du kan legge til koblinger til href-taggen ved å erstatte «#» med din foretrukne lenke.
Endre innholdet på hjemmesiden
Først endret jeg H2-taggen og gjorde den «Mitt navn er Samyak Goswami» og endret deretter paragraf-taggen til «Jeg er en teknologientusiast …». Jeg vil foreslå at du endrer H2-taggen med noe som samsvarer med innholdet på hjemmesiden din og avsnittstaggen som forklarer det.
Vi kommer nå med den mest avgjørende delen av denne tilpasningen; endre innholdet i artikkelflisene.
For å gjøre dette, gå til Innlegg-delen i indeksfilen, og du bør se flere kodebiter i artikkelkoder. Du kan legge til lenker til historiene dine ved å endre href-delen slik vi gjorde mens du la til lenker til sosiale medier-ikoner.
Senere kan du endre navnet på artiklene ved å endre innholdet i H2-taggene. Du kan også legge til en beskrivelse til artiklene dine ved å bruke avsnittskoden.
Gjenta prosessen for hver artikkel ved å legge til lenker, endre navn og legge til en beskrivelse for alle artiklene dine.
Legge til bilder på nettsidene dine
Du må ha lagt merke til at forhåndsvisningen ser veldig annerledes ut enn bildene på HTML5 UP-nettstedet. Dette er på grunn av flyet og blide bilder i den tilpassbare filen. La oss krydre nettstedet vårt ved å legge til tilpassede bilder på det.
Originale bilder
For å gjøre det, naviger til mappen der du tidligere hadde pakket ut «Massively» zip-filen. Åpne den utpakkede mappen og gå til mappen Bilder. Du bør se forskjellige bilder kalt bg, pic01, pic02, og så videre. Dette er bildene som er knyttet til artiklene våre i Artikkel-taggen.
Du kan enten legge til egendefinerte bilder og endre indeksfilen med navnene på disse bildene eller legge til bildene og navngi dem på samme måte som standardbildene. Å gi bildene identiske navn sparer oss for å endre koden og mye tid etterpå.
Modifiserte bilder
Jeg foreslår at du korrekturleser og endrer andre deler av nettstedet ditt som ikke er viktige. Her er porteføljen jeg opprettet ved å bruke trinnene jeg nevnte ovenfor: samyakgoswami.me.
Hvordan laster du opp nettstedskoden din til GitHub-sider?
Etter endelig å ha kodet og designet nettstedet ditt, er det på tide å laste det opp til GitHub-sider og få det til å gå live på Internett.
Slik kan du laste opp nettstedet ditt til GitHub-sider:
Trinn 1: Logg på GitHub-kontoen din og gå til delen Mine arkiver.
Trinn 2: Du bør se et depot med navnet ditt_brukernavn.github.io. Gå inn i dette depotet.
Trinn 3: Du bør se et alternativ for å lage din egen fil eller laste opp filer til GitHub-depotet.
Trinn 4: Velg alle fem filene og mappene; eiendeler, bilder, elementer, generisk, indekser og dra og slipp dem til 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 nettstedet ditt. Du bør se ledeteksten «Ditt nettsted er publisert på ditt_tilpassede_domene.»
Du kan nå gå til nettadressen din og se etter nettsiden selv. Husk at nettsiden kan ta litt tid før den publiseres.
Hvordan aktiverer jeg SSL-kryptering i GitHub-sider?
HTTP er en usikker måte å administrere brukerforespørsler på nettstedet ditt. Alle med ondsinnede hensikter og solid teknisk kunnskap kan avskjære interaksjonene mellom brukeren og nettstedet ditt. På den annen side gir HTTPS alle dine besøkende en mye sikrere nettlesingsøkt. GitHub-sider tilbyr gratis HTTPS-kryptering, og her er hvordan du kan benytte det:
Rull til Sider-delen i depotet.
Du bør se alternativet «Enforce HTTPS» på slutten av vinduet. SSL-krypteringen skal gå live så snart du merker av for Håndhev HTTPS.
Hvis du finner alternativet Enforce HTTPS utilgjengelig for domenet ditt, kan du aktivere SSL-kryptering ved å bruke trinnene nedenfor:
Trinn 1: Logg på Namecheap-kontoen din og gå til delen «Domeneliste».
Trinn 2: Naviger nå til Administrer domene og deretter til delen «Avansert DNS».
Du bør se noen eksisterende CNAME- og A-poster.
Legg til følgende A-poster med vert som «@» og IP-adresse som «185.199.108.153». Neste med vertsnavnet «@» og IP-adressen som «185.199.109.153».
Følg trenden til du har 4 A-poster opp til IP-adressen “185.199.111.153”.
Fjern alle tidligere A-poster.
Trinn 3: Neste opp, legg til en CNAME Record med Host som «www» og Value som ditt GitHub-brukernavn (dot) github (dot) io.
Fjern de tidligere CNAME-postene. Til slutt bør DNS-innstillingene dine ha 4 A-poster og 1 CNAME-post.
Trinn 4: Gå nå til GitHub-sidene i Innstillinger-delen. Alternativet Enforce HTTPS skal nå være tilgjengelig for domenet ditt.
Oppsummering 👈
GitHub gir en fantastisk mulighet til hver student til å lage en gratis nettside og administrere den. Selv om du ikke kan bruke GitHub-sider for å være vert for massive trafikkbelastninger, merker det av for hver avmerkingsboks for et statisk nettsted i liten skala. Det gratis tilpassede domenenavnet, hosting og SSL-kryptering gjør det enda mer fantastisk å ha.
Nå kan du lese «Hvordan velge en webvert for ditt nye nettsted.»
Her er noen overvåkingsverktøy for sidehastighet for å varsle deg når nettstedet ditt går ned.