03/29/2024

Cum se creează un site web gratuit cu nume de domeniu personalizat, găzduire și criptare SSL?

Crearea unui site web este o investiție serioasă; trebuie să plătiți pentru fiecare pas al construirii unui site web.

Vrei să creezi un site web gratuit pentru dezvoltare personală sau profesională? Iată o modalitate de a vă proiecta următorul site web cu un nume de domeniu personalizat, găzduire gratuită pe viață și criptare SSL absolut gratuită. Uf! Ce altceva ai putea cere?

Este o idee deloc că a avea un site web îți crește semnificativ cifrele de creștere, iar astăzi este mai mult o investiție decât un lux. Acest lucru este valabil nu numai pentru companii, dar și persoanele fizice pot beneficia foarte mult de un site web personal.

Indiferent dacă înregistrați un nume de domeniu, găzduiți conținutul site-ului dvs., construiți site-ul sau activați criptarea SSL, ar trebui să fiți gata să vă goliți buzunarele. Adăugând la durere, unele dintre aceste cheltuieli sunt recurente și continuă pentru totdeauna.

Ce se întâmplă dacă ți-aș spune că ai putea crea un site web gratuit în timp ce faci toți pașii cruciali menționați mai sus în construirea unui site web gratuit? Oricât de neplăcut ar suna, poți face toate acestea gratuit dacă ești student.

Dacă știți despre GitHub, este posibil să știți despre Paginile GitHub. Este gratuit să utilizați serviciul care vine cu fiecare cont GitHub. Paginile GitHub permit fiecărui utilizator să creeze un site web gratuit și să-l găzduiască, dar există o mare avertizare. Numele de domenii ale acestor site-uri web gratuite se termină în esență cu github.io, ceea ce distruge profesionalismul site-ului dvs. web.

Ce este GitHub Student Developer Pack?

Mai puțini utilizatori vor lua în serios site-ul dvs., iar a avea un nume de domeniu inutil de lung nu este niciodată o idee bună. Dar hei! Nu suntem aici pentru a vorbi despre avantajele sau avertismentele Paginilor GitHub. V-am promis o modalitate de a vă permite să creați un site web gratuit cu numele de domeniu personalizat și iată cum puteți face acest lucru.

GitHub oferă șansa de a beneficia de un kit fantastic, plin cu instrumente online la îndemână, fiecărui student înscris la un curs de licență sau diplomă, cunoscut sub numele de Pachetul pentru dezvoltatori pentru studenți GitHub. Pachetul include abonamente profesionale și reduceri uluitoare la instrumente populare precum Canva, Namecheap, Microsoft Azure, Discord, Name.com și StreamYard, printre o mulțime de altele.

În acest articol, vom folosi Namecheap pentru a înregistra un domeniu personalizat gratuit și vom folosi paginile GitHub pentru a găzdui site-ul nostru. Apoi vom analiza modalități de proiectare și încărcare a fișierelor HTML, CSS și JavaScript în paginile GitHub. În cele din urmă, vom activa și criptarea SSL pentru site-ul web, dar, în primul rând, trebuie să ne înregistrăm pentru Student Developer Pack.

Cum să aplici pentru GitHub Student Developer Pack?

Procesul de înregistrare pentru Student Developer Pack se rezumă la a avea o adresă de e-mail a studenților acordată de universitate. Adresa de e-mail a unui student se termină de obicei cu numele de domeniu al universității dvs., de exemplu, [email protected] Există și alte modalități de înregistrare pentru pachet, dar necesită timpi de revizuire mult mai mari decât utilizarea unui e-mail de student. Dacă aveți pregătită adresa de e-mail a studentului, iată cum vă puteți înregistra pentru pachet:

Pasul 1: Accesați Educație GitHub și faceți clic pe opțiunea Conectare.

  5 îmbunătățiri noi Chrome tocmai le-a adus managerului său de marcaje

Vă puteți conecta folosind datele de conectare dacă aveți deja pachetul. În rest, puteți urma pașii de mai jos.

Faceți clic pe opțiunea Creați un cont în fereastra de conectare.

Pasul 2: Apoi, înregistrați-vă folosind adresa de e-mail de student și creați un cont.

Pasul 3: Când vi se solicită „Care vă descrie cel mai bine statutul academic?”, asigurați-vă că selectați Student.

Pasul 4: Acum completați casetele necesare cu detalii privind numele școlii dvs. și scopul dvs. de a utiliza GitHub.

Pasul 5: În cele din urmă, trimiteți cererea folosind opțiunea „Trimiteți informațiile”.

Ar trebui să primiți un e-mail de confirmare cu privire la pachetul de dezvoltatori dacă aplicația dvs. este aprobată de GitHub. Procesul durează de obicei câteva zile, dar timpul poate varia semnificativ în perioadele de vârf.

Cum să aplici pentru GitHub Student Developer Pack fără e-mailul studentului?

GitHub vă oferă, de asemenea, opțiunea de a aplica pentru pachet folosind o carte de student valabilă sau orice altă dovadă a statutului dvs. academic. Singurele avertismente sunt timpul lung de așteptare și rata de respingere mai mare. Oricum, iată cum poți aplica pentru pachetul de student prin această metodă:

Pasul 1: Urmați pașii menționați mai sus pentru a crea un cont prin e-mailul personal.

Pasul 2: Acum încărcați dovada statutului dvs. academic utilizând opțiunea camerei sau încărcați fotografiile direct în GitHub folosind butonul Încărcare.

Pasul 3: Apoi, completați toate detaliile necesare, cum ar fi numele școlii și scopul utilizării GitHub.

Pasul 4: Trimiteți cererea dvs.

Cum să vă înregistrați domeniul personalizat folosind Namecheap?

Presupun că aveți contul GitHub Education în funcțiune. Următorii pași implică utilizarea Namecheap pentru a vă înregistra domeniul personalizat gratuit și a-l găzdui prin Pagini GitHub. Urmați acești pași pentru a vă înregistra numele de domeniu preferat:

Pasul 1: Conectați-vă la contul GitHub Education și accesați secțiunea Beneficii.

Ar trebui să vedeți un kit de dezvoltare web și un kit de evenimente virtuale.

Pasul 2: Accesați setul de evenimente virtuale și derulați în jos pentru a găsi Namecheap.

GitHub oferă o înregistrare a numelui de domeniu de 1 an pe TLD .me, pe care o puteți accesa făcând clic pe opțiunea Obțineți acces.

Pasul 3: Următoarea fereastră vă va cere să autorizați cererea de conectare de la Namecheap la contul dvs. GitHub. Autorizați Namecheap și treceți la pasul următor.

Ar trebui să vedeți un mesaj care spune „Am verificat cu succes pachetul dvs. de student cu GitHub” după autorizarea cu succes.

Pasul 4: Găsiți domeniul preferat prin bara de căutare și faceți clic pe Găsiți.

Ar trebui să vedeți disponibilitatea numelui de domeniu pe ecranul următor. Dacă numele dvs. de domeniu este disponibil, puteți continua să îl cumpărați gratuit.

Pasul 5: Încheiați folosind adresa de e-mail GitHub Education și selectați Pagini GitHub ca metodă de găzduire în timp ce continuați.

După ce ați înregistrat cu succes numele de domeniu personalizat și ați ales Paginile GitHub ca găzduire, Namecheap ar trebui să creeze automat un depozit în contul dvs. GitHub. Acest depozit este complet gol și conține doar un fișier README.md.

Poți accesa acest depozit conectându-te la contul tău GitHub și făcând clic pe secțiunea „Arhivele tale”. GitHub Pages nu oferă instrumente vizuale și teme pre-construite pentru site-ul dvs.; trebuie să codificați manual întregul site web și să încărcați fișiere asociate în depozitul GitHub nou creat.

Cum să creezi un site web gratuit și să-l găzduiești pe GitHub Pages?

După cum am menționat mai sus, va trebui să creați toate fișierele HTML, CSS și JavaScript legate de site-ul dvs. Dacă sunteți pasionat de Web Dev și știți cum să vă codificați, este bine să vă încărcați fișierele în depozitul GitHub și să vă puneți site-ul în funcțiune. Puteți derula la secțiunea din acest articol care se ocupă de încărcarea codului site-ului web în Paginile GitHub.

Dar dacă sunteți cineva care nu are puține sau deloc informații despre Web Dev, noi vă oferim acoperire. Puteți folosi pașii de mai jos și puteți crea propriul site web folosind HTML de bază:

  Cum să copiați capturile de ecran Nintendo Switch pe un computer prin USB

Pasul 1: Accesați HTML5 UP și derulați la designul site-ului care vă place. Puteți alege orice altă temă preconstruită de pe orice platformă. Aici am ales „Masively” din HTML5 UP, dar sunteți liber să descărcați și să personalizați orice design de site la alegere.

Pasul 2: Extrageți fișierul zip descărcat al designului site-ului dvs. preferat.

Ar trebui să vedeți fișierele numite index.html și generic.html și foldere precum materiale și imagini în folderul extras.

Pasul 3: Acum deschideți fișierele extrase folosind Visual Studio Code și selectați fișierul index.html.

Pasul 4: Descărcați și instalați extensia „Live Server” în Visual Studio Code dacă nu o aveți deja.

Pasul 5: Selectați fișierul index.html, faceți clic pe butonul din dreapta al mouse-ului și selectați opțiunea „Deschide în Live Server”. Această opțiune vă permite să vizualizați în timp real modificările din fișierul HTML în browser.

Cum să-ți personalizezi designul site-ului web?

Nu voi numi procesul dincolo de acest punct drept „Pași” pentru personalizarea site-ului dvs. web. Personalizarea fișierelor HTML depinde în totalitate de preferințele dvs., dar iată cum am personalizat designul „Masiv” din HTML5 UP și l-am convertit într-un portofoliu. Puteți alege să vă inspirați din asta sau să vă personalizați site-ul în întregime singur. Alegerea este a ta!

Modificarea etichetelor Titlu și Paragraf

Începând procesul de personalizare, am schimbat eticheta de titlu „Masiv”. Eticheta de titlu a fișierului HTML va decide numele acestuia în timp ce este deschisă într-o filă de browser. Titlul implicit pentru Massively ar trebui să fie „Massively by HTML5 UP” și vă recomand să îl schimbați cu ceva asemănător site-ului dvs.

Am schimbat eticheta de titlu în „Samyak Goswami | Tech Content Writer”, deoarece se potrivea ideal pentru portofoliul meu. În continuare, am schimbat secțiunea Intro a site-ului, care spunea: „Acesta este masiv” (conținut în eticheta H1) și am făcut-o „Portofoliul lui Samyak” din motive evidente. Ulterior, am schimbat textul de mai jos în etichetele de paragraf în „O vitrină a proiectelor mele și a abilităților mele”.

Mergând la secțiunea Navigare (Nav) din fișierul index, am omis două din cele trei butoane de navigare conținute în eticheta Listă. Am vrut să creez un site web cu o singură pagină cu toate detaliile pe o singură pagină, dar sunteți liber să modificați numărul de butoane de navigare în funcție de alegerea dvs.

Ulterior, am schimbat textul „Acesta este masiv” de pe butonul de navigare în „Articolele mele”.

Modificarea link-urilor și pictogramelor de rețele sociale

De asemenea, trebuie să vedeți diferitele pictograme de rețele sociale pe serverul live, cum ar fi Twitter, Facebook, Instagram și GitHub. Am decis să omit Twitter și Facebook și să păstrez Instagram și LinkedIn pentru cazul meu de utilizare.

Puteți modifica pictogramele rețelelor sociale și link-urile acestora, mergând la secțiunea Navigare (Nav) și derulând la Lista etichete cu Twitter, Instagram și multe altele scrise în ele.

Observați cum nu există link-uri atașate la aceste pictograme de rețele sociale, deoarece eticheta href este lăsată necompletată. Puteți adăuga linkuri la eticheta href înlocuind „#” cu linkul preferat.

Modificarea conținutului paginii de pornire

Mai întâi, am schimbat eticheta H2 și am făcut-o „Numele meu este Samyak Goswami” și apoi am schimbat eticheta Paragraph în „Sunt un pasionat de tehnologie…”. Vă sugerez să schimbați eticheta H2 cu ceva care să se potrivească cu conținutul paginii dvs. de start și cu eticheta de paragraf care o explică.

Acum venim cu cea mai importantă parte a acestei personalizări; modificarea conținutului plăcilor articolului.

Pentru a face acest lucru, accesați secțiunea Postări din fișierul index și ar trebui să vedeți mai multe fragmente de cod conținute în etichetele articolului. Puteți adăuga linkuri către poveștile dvs. modificând secțiunea href așa cum am făcut în timp ce adăugați linkuri către pictogramele rețelelor sociale.

  Cum să afișați un calendar Google în Outlook

Ulterior puteți schimba numele articolelor modificând conținutul din etichetele H2. De asemenea, puteți adăuga o descriere articolelor dvs. folosind eticheta de paragraf.

Repetați procesul pentru fiecare articol adăugând linkuri, schimbând nume și adăugând o descriere la toate articolele dvs.

Adăugarea de imagini pe site-urile dvs. web

Trebuie să fi observat că previzualizarea arată foarte diferit de imaginile prezente pe site-ul HTML5 UP. Acest lucru se datorează fotografiilor plane și blânde din fișierul personalizabil. Să condimentăm site-ul nostru adăugându-i imagini personalizate.

Imagini originale

Pentru a face acest lucru, navigați la folderul în care ați extras anterior fișierul zip „Masiv”. Deschideți folderul extras și accesați folderul Imagini. Ar trebui să vedeți diferite imagini numite bg, pic01, pic02 și așa mai departe. Acestea sunt imaginile legate de articolele noastre din eticheta Articol.

Puteți fie să adăugați imagini personalizate și să modificați fișierul index cu numele acestor imagini, fie să adăugați imaginile și să le denumiți similar cu imaginile implicite. A da imaginilor nume identice ne scutește de modificarea codului și de mult timp ulterior.

Imagini modificate

Vă sugerez să corectați și să modificați alte secțiuni ale site-ului dvs. care nu sunt importante. Iată portofoliul pe care l-am creat folosind pașii menționați mai sus: samyakgoswami.me.

Cum să încărcați codul site-ului dvs. în paginile GitHub?

După ce în sfârșit ați codat și proiectat site-ul web, este timpul să îl încărcați pe GitHub Pages și să îl faceți live pe Internet.

Iată cum vă puteți încărca site-ul web pe Pagini GitHub:

Pasul 1: Conectați-vă la contul GitHub și accesați secțiunea Arhivele mele.

Pasul 2: Ar trebui să vedeți un depozit numit your_username.github.io. Intră în acest depozit.

Pasul 3: Ar trebui să vedeți o opțiune pentru a vă crea propriul fișier sau a încărca fișiere în depozitul GitHub.

Pasul 4: Selectați toate cele cinci fișiere și foldere; active, imagini, elemente, generice, indexați și trageți și plasați-le în depozit.

După ce fișierele sunt încărcate, comite codul și așteptați până când GitHub vă procesează fișierele.

Pasul 5: Navigați la Setări> Pagini GitHub pentru a vedea starea site-ului dvs. Ar trebui să vedeți mesajul „Site-ul dvs. web este publicat la your_custom_domain”.

Acum puteți accesa adresa dvs. web și puteți verifica site-ul dvs. Rețineți că site-ul web poate dura ceva timp înainte de a intra inițial în funcțiune.

Cum se activează criptarea SSL în paginile GitHub?

HTTP este o modalitate nesigură de a gestiona solicitările utilizatorilor pe site-ul dvs. web. Oricine are intenții rău intenționate și cunoștințe tehnice solide poate intercepta interacțiunile dintre utilizator și site-ul dvs. Pe de altă parte, HTTPS oferă tuturor vizitatorilor o sesiune de navigare mult mai sigură. Paginile GitHub oferă criptare HTTPS gratuită și iată cum o puteți folosi:

Derulați la secțiunea Pagini din depozit.

Ar trebui să vedeți opțiunea „Aplicați HTTPS” la sfârșitul ferestrei. Criptarea SSL ar trebui să fie activă de îndată ce bifați caseta de validare Aplicare HTTPS.

În cazul în care găsiți că opțiunea Aplicați HTTPS nu este disponibilă pentru domeniul dvs., puteți activa criptarea SSL urmând pașii de mai jos:

Pasul 1: Conectați-vă la contul dvs. Namecheap și accesați secțiunea „Lista de domenii”.

Pasul 2: Acum navigați la Gestionare domeniu și, ulterior, la secțiunea „DNS avansat”.

Ar trebui să vedeți câteva înregistrări CNAME și A existente.

Adăugați următoarele înregistrări A cu gazdă ca „@” și adresa IP ca „185.199.108.153”. Următorul cu numele de gazdă „@” și adresa IP ca „185.199.109.153”.

Urmați tendința până când aveți 4 înregistrări A până la adresa IP „185.199.111.153”.

Eliminați toate înregistrările A anterioare.

Pasul 3: În continuare, adăugați o înregistrare CNAME cu Host ca „www” și Value ca nume de utilizator GitHub (punct) github (punct) io.

Eliminați înregistrările CNAME anterioare. În cele din urmă, setările dvs. DNS ar trebui să aibă 4 înregistrări A și 1 înregistrare CNAME.

Pasul 4: Acum accesați paginile GitHub din secțiunea Setări. Opțiunea Aplicați HTTPS ar trebui să fie acum disponibilă pentru domeniul dvs.

Rezumând 👈

GitHub oferă fiecărui student o oportunitate fantastică de a crea un site web gratuit și de a-l gestiona. Deși nu puteți folosi Pagini GitHub pentru a găzdui încărcături masive de trafic, bifează fiecare casetă de selectare pentru un site web static la scară mică. Numele de domeniu personalizat gratuit, găzduirea și criptarea SSL îl fac și mai minunat.

Acum puteți citi „Cum să alegi o gazdă web pentru noul tău site web”.

Iată câteva instrumente de monitorizare a vitezei paginii pentru a vă anunța când site-ul dvs. web se defectează.