At oprette en hjemmeside er en seriøs investering; du skal betale for hvert trin i at bygge en hjemmeside.

Vil du oprette en gratis hjemmeside til personlig eller professionel vækst? Her er en måde at designe dit næste websted med et brugerdefineret domænenavn, livstids gratis hosting og SSL-kryptering helt gratis. Puha! Hvad kan du ellers bede om?

Det er en no-brainer, at det at have en hjemmeside booster dine væksttal markant, og i dag er det mere en investering end en luksus. Dette gælder ikke kun for virksomheder, men også enkeltpersoner kan få stor gavn af et personligt websted.

Uanset om du registrerer et domænenavn, hoster dit websteds indhold, bygger webstedet eller aktiverer SSL-kryptering, bør du være klar til at tømme dine lommer. For at øge smerten er nogle af disse udgifter tilbagevendende og fortsætter for evigt.

Hvad hvis jeg fortalte dig, at du kunne oprette et gratis websted, mens du gør alle de ovennævnte afgørende trin i webstedsopbygningen også gratis? Hvor ujordisk det end lyder, kan du gøre alt dette gratis, hvis du er studerende.

Hvis du kender til GitHub, kender du måske til GitHub-sider. Det er gratis at bruge tjenesten, der følger med hver GitHub-konto. GitHub Pages lader enhver bruger oprette en gratis hjemmeside og hoste den, men der er en stor advarsel. Domænenavnene på disse gratis websteder slutter i det væsentlige med github.io, som ødelægger professionaliteten af ​​din hjemmeside.

Hvad er GitHub Student Developer Pack?

Færre brugere vil tage din hjemmeside seriøst, og det er aldrig en god idé at have et unødvendigt langt domænenavn. Men hey! Vi er ikke her for at tale om fordelene eller forbeholdene ved GitHub-sider. Jeg lovede en måde at lade dig oprette en gratis hjemmeside med det brugerdefinerede domænenavn, og her er hvordan du kan gøre det.

GitHub tilbyder en chance for at benytte et fantastisk sæt fyldt med praktiske onlineværktøjer til alle studerende, der er tilmeldt en grad eller diplomuddannelse, kendt som GitHub Student Developer Pack. Pakken inkluderer pro-abonnementer og fantastiske rabatter på populære værktøjer som Canva, Namecheap, Microsoft Azure, Discord, Name.com og StreamYard, blandt en gazillion andre.

I denne artikel vil vi bruge Namecheap til at registrere et gratis tilpasset domæne og bruge GitHub-sider til at være vært for vores hjemmeside. Vi vil derefter se på måder at designe og uploade dine HTML-, CSS- og JavaScript-filer til GitHub-sider. På sigt vil vi også aktivere SSL-kryptering for hjemmesiden, men først og fremmest skal vi tilmelde os Student Developer Pack.

Hvordan ansøger man om GitHub Student Developer Pack?

Processen med at tilmelde sig Student Developer Pack kommer ned til at have en universitetsgodkendt studerende-e-mailadresse. En studerendes e-mailadresse ender normalt med dit universitets domænenavn, f.eks. [email protected] Der er andre måder at tilmelde sig pakken på, men de kræver meget længere gennemgangstid end at bruge en studerendes e-mail. Hvis du har din studerendes e-mailadresse klar, kan du tilmelde dig pakken sådan her:

Trin 1: Gå til GitHub uddannelse og klik på Log ind.

Du kan logge ind med dine legitimationsoplysninger, hvis du allerede har pakken. Ellers kan du følge trinene nedenfor.

  10 Bedste Cloud Hosting Platform for opstart til stor organisation

Klik på Opret en konto i login-vinduet.

Trin 2: Tilmeld dig derefter ved hjælp af din studerendes e-mail og opret en konto.

Trin 3: Når du bliver bedt om “Hvilken beskriver bedst din akademiske status?”, skal du sørge for at vælge Student.

Trin 4: Udfyld nu de nødvendige felter med detaljer vedrørende din skoles navn og dit formål med at bruge GitHub.

Trin 5: Indsend endelig din ansøgning ved at bruge muligheden “Send dine oplysninger”.

Du bør modtage en bekræftelses-e-mail vedrørende udviklerpakken, hvis din ansøgning bliver godkendt af GitHub. Processen tager normalt et par dage, men tiden kan variere betydeligt i spidsbelastningsperioder.

Hvordan ansøger man om GitHub Student Developer Pack uden elev-e-mail?

GitHub giver dig også mulighed for at ansøge om pakken ved hjælp af et gyldigt studiekort eller ethvert andet bevis på din akademiske status. De eneste forbehold er den lange ventetid og højere afvisningsforhold. Anyways, her er, hvordan du kan ansøge om elevpakken gennem denne metode:

Trin 1: Følg trinene nævnt ovenfor for at oprette en konto via din personlige e-mail.

Trin 2: Upload nu beviset for din akademiske status ved hjælp af kameraindstillingen, eller upload billederne direkte til GitHub ved hjælp af Upload-knappen.

Trin 3: Udfyld derefter alle nødvendige detaljer såsom skolens navn og formålet med at bruge GitHub.

Trin 4: Indsend din ansøgning.

Hvordan registrerer man dit brugerdefinerede domæne ved hjælp af Namecheap?

Jeg går ud fra, at du har fået din GitHub Education-konto op at køre. De følgende trin involverer at bruge Namecheap til at registrere dit gratis tilpassede domæne og hoste det gennem GitHub Pages. Følg disse trin for at registrere dit foretrukne domænenavn:

Trin 1: Log ind på din GitHub Education-konto og gå til sektionen Fordele.

Du bør se et Web Dev Kit og et Virtual Event Kit.

Trin 2: Gå til Virtual Event Kit og rul ned for at finde Namecheap.

GitHub tilbyder en 1-årig registrering af domænenavn på .me TLD, som du kan få adgang til ved at klikke på Get Access-indstillingen.

Trin 3: Det følgende vindue vil bede dig om at godkende forbindelsesanmodningen fra Namecheap til din GitHub-konto. Godkend Namecheap og fortsæt til næste trin.

Du bør se en prompt, der siger: “Vi har verificeret din elevpakke med GitHub” efter vellykket godkendelse.

Trin 4: Find dit foretrukne domæne gennem søgelinjen, og klik på Find.

Du bør se tilgængeligheden af ​​domænenavnet på den næste skærm. Hvis dit domænenavn er tilgængeligt, kan du fortsætte med at købe det gratis.

Trin 5: Gå til kassen ved at bruge GitHub Education-e-mailadressen, og vælg GitHub Pages som din hostingmetode, mens du fortsætter.

Efter succesfuld registrering af dit brugerdefinerede domænenavn og valg af GitHub-sider som din hosting, skulle Namecheap automatisk oprette et lager på din GitHub-konto. Dette lager er helt tomt og indeholder kun en README.md-fil.

Du kan få adgang til dette lager ved at logge ind på din GitHub-konto og klikke på sektionen “Dine depoter”. GitHub Pages tilbyder ikke visuelle værktøjer og forudbyggede temaer til dit websted; du skal kode hele webstedet manuelt og uploade relaterede filer til dit nyoprettede GitHub-lager.

Hvordan opretter man et gratis websted og hoster det på GitHub-sider?

Som nævnt ovenfor skal du oprette alle HTML-, CSS- og JavaScript-filer relateret til dit websted. Hvis du er til Web Dev og ved, hvordan du koder dig igennem, er du god til at uploade dine filer i dit GitHub-lager og få din hjemmeside til at køre. Du kan rulle til afsnittet i denne artikel, der omhandler upload af webstedskoden til GitHub-sider.

Men hvis du er en person, der har lidt eller ingen information om Web Dev, har vi dækket dig. Du kan bruge nedenstående trin og designe dit eget websted ved hjælp af noget grundlæggende HTML:

  Sådan fjerner du kontakter fra delearket på iPhone eller iPad

Trin 1: Gå til HTML5 OP og rul til det webstedsdesign, du kan lide. Du kan vælge et hvilket som helst andet forudbygget tema fra enhver platform. Her har jeg valgt “Massivt” fra HTML5 UP, men du kan frit downloade og tilpasse ethvert hjemmesidedesign efter eget valg.

Trin 2: Udpak den downloadede zip-fil af dit foretrukne webstedsdesign.

Du bør se filer med navnet index.html og generic.html og mapper som aktiver og billeder i den udpakkede mappe.

Trin 3: Åbn nu de udpakkede filer ved hjælp af Visual Studio Code og vælg filen index.html.

Trin 4: Download og installer “Live Server”-udvidelsen i Visual Studio Code, hvis du ikke allerede har det.

Trin 5:Vælg filen index.html, klik på højre museknap, og vælg “Åbn i Live Server”. Denne mulighed lader dig visualisere ændringerne i din HTML-fil i din browser i realtid.

Hvordan tilpasser du dit webstedsdesign?

Jeg vil ikke betegne processen ud over dette punkt som “trin” til at tilpasse dit websted. Tilpasning af HTML-filer er helt op til din præference, men her er, hvordan jeg tilpassede designet “Massivt” fra HTML5 UP og konverterede det til en portefølje. Du kan vælge at hente inspiration fra dette eller tilpasse din hjemmeside helt selv. Det er dit valg!

Ændring af titel- og afsnitstags

I begyndelsen af ​​min tilpasningsproces ændrede jeg titeltagget “Massivt.” Titelkoden på din HTML-fil bestemmer dens navn, mens den åbnes i en browserfane. Standardtitlen for Massively skal være “Massively by HTML5 UP”, og jeg anbefaler, at du ændrer den til noget, dit websted ligner.

Jeg ændrede titelmærket til “Samyak Goswami | Tech Content Writer”, da det passede ideelt til min portefølje. Dernæst ændrede jeg Intro-sektionen på hjemmesiden, som sagde: “This is Massively” (indeholdt i H1-tagget) og gjorde det til “Samyaks Portfolio” af indlysende årsager. Efterfølgende ændrede jeg teksten nedenfor i afsnitstags til “Et udstillingsvindue for mine projekter og mine evner.”

Ved at gå til sektionen Navigation (Nav) i indeksfilen udelod jeg to ud af de tre navigationsknapper indeholdt i List-tagget. Jeg ønskede at oprette et enkeltsidet websted med alle detaljerne på en enkelt side, men du kan frit ændre antallet af navigationsknapper efter dit valg.

Jeg ændrede senere teksten “Dette er massivt” på navigationsknappen til “Mine artikler.”

Ændring af sociale mediers links og ikoner

Du skal også se de forskellige sociale medieikoner på live-serveren som Twitter, Facebook, Instagram og GitHub. Jeg besluttede at udelade Twitter og Facebook og beholde Instagram og LinkedIn til min brug.

Du kan ændre ikonerne for sociale medier og deres links ved at gå til sektionen Navigation (Nav) og rulle til Liste tags med Twitter, Instagram og mere skrevet i dem.

Bemærk, hvordan der ikke er knyttet links til disse sociale medier-ikoner, da href-tagget er tomt. Du kan tilføje links til href-tagget ved at erstatte “#” med dit foretrukne link.

Ændring af indholdet af hjemmesiden

Først ændrede jeg H2-tagget og lavede det “Mit navn er Samyak Goswami” og derefter ændrede jeg paragraf-tagget til “Jeg er en teknologientusiast…”. Jeg vil foreslå, at du ændrer H2-tagget med noget, der matcher indholdet på din hjemmeside og afsnitstagget, der forklarer det.

Vi kommer nu med den mest afgørende del af denne tilpasning; ændring af indholdet af artiklens fliser.

For at gøre dette skal du gå til afsnittet Indlæg i indeksfilen, og du bør se flere kodestykker indeholdt i artikeltags. Du kan tilføje links til dine historier ved at ændre href-sektionen, som vi gjorde, mens du tilføjede links til sociale medieikoner.

Senere kan du ændre navnet på artiklerne ved at ændre indholdet i H2 tags. Du kan også tilføje en beskrivelse til dine artikler ved hjælp af afsnits-tagget.

  Sådan rettes ingen lyd på tv, når du caster til Chromecast fra Chrome

Gentag processen for hver artikel ved at tilføje links, ændre navne og tilføje en beskrivelse til alle dine artikler.

Tilføjelse af billeder til dine websteder

Du må have bemærket, at forhåndsvisningen ser meget anderledes ud end billederne på HTML5 UP-webstedet. Dette er på grund af flyet og intetsigende billeder i den tilpassede fil. Lad os pifte vores hjemmeside op ved at tilføje brugerdefinerede billeder til den.

Originale billeder

For at gøre det skal du navigere til den mappe, hvor du tidligere havde udpakket “Massivt” zip-filen. Åbn den udpakkede mappe og gå til mappen Billeder. Du bør se forskellige billeder med navnet bg, pic01, pic02, og så videre. Dette er billederne, der er knyttet til vores artikler i artikel-tagget.

Du kan enten tilføje brugerdefinerede billeder og ændre indeksfilen med navnene på disse billeder eller tilføje billederne og navngive dem svarende til standardbillederne. At give billederne identiske navne sparer os for at ændre koden og en masse tid efterfølgende.

Ændrede billeder

Jeg foreslår, at du korrekturlæser og ændrer andre dele af dit websted, som ikke er vigtige. Her er porteføljen, jeg oprettede ved at bruge de trin, jeg nævnte ovenfor: samyakgoswami.me.

Hvordan uploader du din hjemmesidekode til GitHub-sider?

Efter endelig at have kodet og designet dit websted, er det tid til at uploade det til GitHub Pages og få det til at gå live på internettet.

Sådan kan du uploade dit websted til GitHub-sider:

Trin 1: Log ind på din GitHub-konto og gå til sektionen My Repositories.

Trin 2: Du bør se et lager med navnet dit_brugernavn.github.io. Gå ind i dette lager.

Trin 3: Du bør se en mulighed for at oprette din egen fil eller uploade filer til GitHub-lageret.

Trin 4: Vælg alle fem filer og mapper; aktiver, billeder, elementer, generisk, indeks, og træk og slip dem til lageret.

Når filerne er blevet uploadet, skal du indsætte koden og vente, indtil GitHub behandler dine filer.

Trin 5: Naviger til Indstillinger>GitHub-sider for at se status for dit websted. Du bør se prompten “Dit websted er offentliggjort på dit_brugerdefinerede_domæne.”

Du kan nu gå til din webadresse og selv se efter hjemmesiden. Husk, at webstedet kan tage noget tid, før det går live i første omgang.

Hvordan aktiverer man SSL-kryptering i GitHub-sider?

HTTP er en usikker måde at administrere brugeranmodninger på din hjemmeside. Enhver med ondsindet hensigt og solid teknisk viden kan opsnappe interaktionerne mellem brugeren og dit websted. På den anden side giver HTTPS alle dine besøgende en meget mere sikker browsing-session. GitHub-sider tilbyder gratis HTTPS-kryptering, og her er hvordan du kan benytte det:

Rul til sektionen Sider i lageret.

Du bør se indstillingen “Enforce HTTPS” i slutningen af ​​vinduet. SSL-krypteringen bør gå live, så snart du markerer afkrydsningsfeltet Håndhæv HTTPS.

Hvis du finder, at håndhæv HTTPS-indstillingen ikke er tilgængelig for dit domæne, kan du aktivere SSL-kryptering ved at bruge nedenstående trin:

Trin 1: Log ind på din Namecheap-konto og gå til sektionen “Domæneliste”.

Trin 2: Naviger nu til Administrer domæne og derefter til afsnittet “Avanceret DNS”.

Du bør se nogle eksisterende CNAME- og A-poster.

Tilføj følgende A Records med vært som “@” og IP-adresse som “185.199.108.153”. Næste med værtsnavnet “@” og IP-adresse som “185.199.109.153”.

Følg trenden, indtil du har 4 A Records op til IP-adressen “185.199.111.153”.

Fjern alle de tidligere A Records.

Trin 3: Dernæst skal du tilføje en CNAME Record med Host som “www” og Value som dit GitHub-brugernavn (dot) github (dot) io.

Fjern de tidligere CNAME Records. I sidste ende skal dine DNS-indstillinger have 4 A Records og 1 CNAME Record.

Trin 4: Gå nu til GitHub-siderne i afsnittet Indstillinger. Indstillingen Håndhæv HTTPS skulle nu være tilgængelig for dit domæne.

Opsummering 👈

GitHub giver enhver studerende en fantastisk mulighed for at oprette en gratis hjemmeside og administrere den. Selvom du ikke kan bruge GitHub-sider til at hoste massive trafikbelastninger, markerer det hvert afkrydsningsfelt for et statisk websted i lille skala. Det gratis tilpassede domænenavn, hosting og SSL-kryptering gør det endnu mere vidunderligt at have.

Nu kan du læse “Sådan vælger du en webhost til din nye hjemmeside.”

Her er nogle sidehastighedsovervågningsværktøjer til at give dig besked, når dit websted går ned.

By Anders