Gata, setează, lansează: crearea unui site static cu pagini GitHub

Cu toate instrumentele și cadrele actuale de dezvoltare web fierbinte, crearea unui site web devine din ce în ce mai complicată. Dar uneori, nu aveți nevoie de multă interactivitate pe site-ul dvs. Dacă vă concentrați pe transmiterea informațiilor către spectator și nu aveți nevoie de funcționalități complexe, un site static ar putea fi alegerea potrivită.

În acest tutorial, veți afla ce este un site static, inclusiv avantajele sale, limitările sale și cum să creați și să implementați un site web personal simplu creat gratuit cu HTML și Bootstrap folosind Pagini GitHub.

Ce sunt paginile GitHub?

GitHub este o platformă web pentru găzduirea depozitelor Git și colaborarea la proiecte software. Oferă instrumente pentru partajarea și urmărirea modificărilor codului, gestionarea și revizuirea codului și posibilitatea de a deschide și revizui solicitările de extragere.

Nu confundați Git și GitHub! GitHub este un serviciu de găzduire care permite colaborarea între dezvoltatori, în timp ce Git este software-ul local de control al versiunilor pe care îl utilizați pentru a salva instantanee ale stării proiectului dvs. software.

Paginile GitHub este una dintre cele mai bune caracteristici ale GitHub. Este un serviciu care vă permite să găzduiți un site web static direct dintr-un depozit GitHub. Aceasta înseamnă că vă puteți folosi depozitul pentru a stoca codul și fișierele site-ului dvs., iar GitHub le va publica automat ca site web pe care îl puteți accesa online.

În rezumat, Paginile GitHub este o modalitate rapidă și ușoară de a vă pune site-ul în funcțiune și este deosebit de utilă pentru a vă prezenta portofoliul, proiectele open-source sau alt conținut static.

Site-uri web statice vs dinamice

După cum am văzut, GitHub Pages oferă o modalitate de a implementa site-uri web statice. Dar care este diferența dintre un site web static și un site web dinamic?

Să începem prin a discuta conținutul de pe site-urile menționate.

Conținutul static se referă la elementele site-ului web care rămân aceleași pentru toți utilizatorii, indiferent de cine sunt aceștia sau de ce acțiuni întreprind pe site. Acestea pot include lucruri precum textul, imaginile și aspectul site-ului web, precum și codul și fișierele care stau la baza site-ului. Un site static este livrat utilizatorului exact așa cum este stocat.

În schimb, conținutul dinamic este conținut care se modifică în funcție de acțiunile utilizatorului - cum ar fi conectarea, interacțiunea cu un paywall sau comentarea unei postări - sau alți factori, cum ar fi ora sau locația curentă.

De exemplu, un site web care afișează o imagine statică a unui produs va afișa întotdeauna aceeași imagine fiecărui utilizator (static). Pe de altă parte, un site web care afișează ora curentă va afișa o oră diferită fiecărui utilizator în funcție de locația (dinamică).

În general, putem spune că un site web este static dacă conține doar HTML, CSS și JavaScript pe front-end, fără tehnologii server precum PHP sau Python care interacționează cu o bază de date.

Deși nu este posibil să construiți site-uri web dinamice folosind Pagini GitHub, puteți utiliza cu ușurință crearea proprie folosind un CMS, cum ar fi WordPress, sau generatoare de site-uri statice precum Gatsby sau Hugo.

Caracteristici cheie ale paginilor GitHub

Să vedem punctele forte ale GitHub Pages ca serviciu de găzduire:

1. Configurare și publicare ușoară: GitHub Pages facilitează începerea cu doar câțiva pași simpli. Puteți activa Paginile GitHub pentru depozitul dvs. și puteți specifica sursa fișierelor site-ului dvs., iar GitHub vă va publica automat site-ul și îl va face disponibil la o adresă URL bazată pe numele dvs. de utilizator și pe numele depozitului.
2. Domenii personalizate: cu Pagini GitHub, puteți utiliza un nume de domeniu personalizat pentru site-ul dvs. web în loc de adresa URL implicită furnizată de GitHub. Acest lucru vă permite să utilizați propriul branding și să le fie mai ușor pentru utilizatori să găsească și să acceseze site-ul dvs. web.
3. Suport HTTPS: GitHub Pages oferă suport pentru HTTPS, care permite conexiuni sigure la site-ul dvs. Acest lucru este crucial pentru construirea încrederii site-ului dvs.
4. Suport Jekyll: GitHub Pages acceptă Jekyll, un generator de site-uri static care vă permite să creați site-uri web sofisticate folosind șabloane și alte caracteristici. Acest lucru facilitează crearea de site-uri web cu aspect profesional, fără a fi nevoie să scrieți tot codul de la zero.

Limitări

După cum sa menționat anterior, puteți crea site-uri statice numai cu Pagini GitHub. Daca vrei sa construiesti un proiect complex cu multe functionalitati ai avea nevoie de alte servicii de gazduire. De asemenea, ar trebui să rețineți că nu puteți utiliza Paginile GitHub în scopuri comerciale, cum ar fi derularea unei afaceri online sau comerțul electronic.

Paginile GitHub nu permite site-ului dvs. să fie mai mare de 1 GB, ceea ce înseamnă că fișierele din depozitul dvs. nu pot depăși această cantitate de memorie. De cele mai multe ori, 1 GB este mai mult decât suficient pentru un site static; asigurați-vă că vă comprimați imaginile.

De asemenea, are o limită de lățime de bandă moale de 100 GB pe lună. Această cantitate de lățime de bandă ar fi suficientă pentru a vă distribui site-ul la câteva mii de oameni pe lună, așa că, dacă nu aveți o audiență uriașă, veți fi gata.

Crearea și implementarea cu pagini GitHub: Ghid pas cu pas

Crearea unei pagini GitHub este un proces simplu și direct de a găzdui un site static. Nu uitați că, dacă aveți nevoie de un fel de conexiune la baza de date, ar trebui să aveți un furnizor extern de baze de date.

În următorul ghid, veți învăța cum să creați o pagină GitHub de la zero. Aceasta include crearea unui depozit de la distanță, construirea unui site web personal receptiv cu HTML și implementarea pe web cu GitHub.

Să intrăm în ea!

1. Înscrieți-vă pe GitHub

Pentru a începe lucrurile, trebuie să aveți un cont GitHub activ. Dacă nu aveți unul, accesați pagina lor de înscriere. Nu ar trebui să dureze mai mult de câteva minute pentru a completa formularul.

După conectare, ar trebui să puteți crea un depozit de la distanță.

2. Creați un depozit la distanță

Un depozit este un director în care stocați tot codul legat de un anumit proiect.

Din pagina de pornire GitHub, faceți clic pe butonul „Nou” sau „Creați depozit” situat în panoul din stânga site-ului. Acest lucru vă va redirecționa către un formular în care veți completa informațiile repo-ului dvs.

Acești pași următori sunt cruciali:

1. Setați numele depozitului dvs. la "yourusername".github.io .
2. Verificați butonul public. Trebuie să setați depozitul la Public pentru a vă publica site-ul.
3. Adăugați un README.

Puteți avea un depozit numai pentru un anumit cont personal sau organizație. De aceea, numele depozitului este numele dvs. de utilizator și domeniul github.io . Mai târziu, vom vedea cum să configurați un site dintr-un depozit.

Dacă nu aveți GitHub Pro, puteți publica o pagină GitHub numai dacă depozitul este public. Țineți cont de acest lucru dacă nu doriți să distribuiți public codul sursă al site-ului dvs.

După aceasta, ar trebui să aveți ceva de genul următor:

Dacă aveți deja codul sursă funcțional al site-ului dvs., puteți sări peste fluxul de lucru comun Git și să aruncați fișierele direct în depozit.

Pentru a face acest lucru, faceți clic pe meniul Add file din depozitul dvs. și selectați opțiunea Încărcare fișiere . Apoi selectați fișierele site-ului dvs., cu fișierul HTML principal numit index.html . Nu uitați să puneți toate fișierele dvs. CSS și JavaScript în depozit.

În cele din urmă, apăsați butonul Commit modificări .

În secțiunea următoare, vom construi un site web personal simplu cu HTML și Bootstrap. Apoi îl vom încărca în GitHub și îl vom configura ca pagină publică GitHub cu un domeniu personalizat.

3. Creați un site personal

Vom începe prin a clona depozitul GitHub pe care tocmai l-am creat. Pentru a face acest lucru, asigurați-vă că aveți deja instalat clientul Git pe computer. (Dacă nu, aruncați o privire la tutorialul nostru despre Git și GitHub.)

Accesați fila code a depozitului dvs. și copiați adresa URL SSH în opțiunea SHH .

Apoi, porniți un terminal sau o linie de comandă. Pe majoritatea distribuțiilor Linux și macOS, puteți utiliza comanda rapidă Ctrl + Alt + T sau puteți căuta prin meniul de aplicații al sistemului pentru Terminal . Pe Windows, puteți utiliza Git BASH instalat în mod implicit cu Git, CMD, PowerShell sau un client GUI.

Pe terminalul dvs., tastați git clone și adresa URL pe care ați copiat-o. Aceasta va descărca și va crea o copie a depozitului de la distanță pe mașina dvs. locală, astfel încât să vă puteți crea site-ul web.

Apoi introduceți noul folder numit yourusername.github.io cu cd și ls . Ar trebui să vedeți folderul .git , care conține configurația și metadatele proiectului dvs., precum și fișierul README.md dacă ați creat unul.

Deschideți editorul de text preferat (cum ar fi Sublime Text) și să începem să vă creăm site-ul web.

La rădăcina depozitului, creați un fișier numit index.html (acest nume este cerut de GitHub Pages) și introduceți structura tipică a codului HTML:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kinsta User</title> </head> <body> </body> </html>

După cum am spus anterior, vom folosi Bootstrap 5.0, un cadru CSS open-source care ne ajută să construim site-uri web receptive mai ușor. După cum veți vedea, nu va trebui să folosim CSS personalizat pentru acest site special.

Pentru a introduce Bootstrap în pagina noastră, va trebui să includem CSS și JavaScript compilat printr-un CDN. Lipiți următorul cod în HTML <head> pentru a putea folosi Bootstrap CSS:

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

În același mod, vom include și Devicon CDN pentru a putea folosi pictogramele SVG ale limbajelor și tehnologiilor de programare populare fără prea multe probleme:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">

Acum, pentru a include JavaScript, introduceți următorul cod chiar deasupra sfârșitului etichetei </body> :

 <!-- JavaScript: Above --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Vom începe lucrurile creând un antet pentru site-ul nostru web. Va fi un antet întunecat, cu link-uri către pagina noastră de index și alte două pagini — „Proiecte” și „Jurnal de citire” — pe care le puteți crea mai târziu:

 <nav class="navbar navbar-dark navbar-expand-lg bg-dark "> <div class="container-fluid"> <div class="mx-4"> <a class="navbar-brand" href="#">Kinsta User</a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reading Log</a> </li> </ul> </div> </div> </nav>

Folosim Bootstrap wrapper navbar și navbar-expand-lg pentru a crea un container receptiv care se prăbușește atunci când lățimea afișajului este mai mică de 992 px. Acest lucru se întâmplă din cauza opțiunii grid lg . Dacă doriți să aflați mai multe despre opțiunile de grilă, aruncați o privire pe pagina de aspect a Bootstrap.

Acum, să creăm două coloane receptive în interiorul unui container: una pentru o imagine gratuită din Unsplash și alta pentru o descriere a noastră:

 <div class="container my-4 "> <div class="row justify-content-center"> <div class="col-lg mb-lg-4"> <img src="image.jpg" class="img-fluid" alt=""> </div> <div class="col-lg mx-2 align-self-center"> <div class="my-3"> <h1 class="text-center">I'm a Kinsta User</h1> <p>As a passionate software developer, I am deeply enthusiastic about creating and developing software applications. I am constantly learning and experimenting with new technologies and approaches, and I have a strong desire to create innovative and effective solutions to complex problems. I am driven by my curiosity and love for problem-solving, and I am committed to producing high-quality, well-designed software that meets the needs of users. </p> </div> </div> </div> </div>

După cum puteți vedea, obținem o imagine dintr-un fișier local, așa că trebuie să fie în depozit atunci când împingem modificările noastre în depozitul GitHub.

În cele din urmă, în interiorul containerului nostru Bootstrap, vom folosi pictograme SVG de la Devicon, împreună cu un pic de CSS intern pentru a ne evidenția abilitățile:

 <!-- Inside the container created above --> <div class="my-4"> <div class="text-center mb-4"> <h1>My Skills</h1> </div> <div class="row "> <style> I { font-size: 4em; } </style> <!-- Skills --> <div class="col"> <div class="text-center"> <h4>WordPress</h4> <i class="devicon-wordpress-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Django</h4> <i class="devicon-django-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Python</h4> <i class="devicon-python-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>GitHub</h4> <i class="devicon-github-original" ></i> </div> </div> </div> </div>

Deoarece folosim eticheta HTML <i> , o putem trata ca pe un font. Astfel, am stabilit dimensiunea logo-urilor noastre la 4 em , declarându-l în eticheta style .

Iată rezultatul final al acestui simplu site web personal:

Știați că peste 50% din traficul site-ului vine de pe dispozitive mobile? Deoarece am folosit Bootstrap, am salvat o mulțime de codare CSS și am obținut, de asemenea, un site web receptiv, așa cum puteți aprecia mai jos.

Puteți personaliza acest site cât de mult doriți. Iată sursa completă pe GitHub, la dispoziția dumneavoastră.

Puteți chiar să atașați un CMS fără cap, cum ar fi Ghost, folosind una dintre soluțiile noastre de găzduire a aplicațiilor cu funcții complete. Vă puteți conecta direct la depozitul dvs. GitHub prin intermediul tabloului de bord MyKinsta și puteți avea noul site să funcționeze în doar câteva minute.

Este timpul să vă împingeți fișierele. Pentru a face acest lucru, rulați următoarele comenzi pe terminalul dvs., la nivelul superior al proiectului.

 git add . git commit -m "Added website source code and image" git push

Acum, putem folosi acest site web pentru a configura pagina noastră GitHub.

4. Publicarea unei pagini GitHub de utilizator

De îndată ce împingeți index.html în depozitul de la distanță numit după numele dvs. de utilizator, GitHub va începe automat un proces de flux de lucru pentru a vă configura site-ul online. Poate dura câteva minute, dar site-ul dvs. static va funcționa automat.

Adresa URL a site-ului dvs. va fi ceva de genul următor: https://kinstauser.github.io/

Dacă după 10 minute site-ul dvs. nu este online, puteți încerca să faceți o modificare inactivă codului dvs. (de exemplu, adăugarea unui spațiu) și să apăsați din nou pentru a reactiva procesul de creare a paginilor GitHub.

5. Publicarea unei pagini GitHub de depozit

Până acum, am creat un site de utilizator, dar dacă vrem să avem mai multe site-uri GitHub publicate? Atunci trebuie să mergem cu un site de proiect.

Ca exemplu, vom folosi site-ul de tehnologie HTML creat în tutorialul de dezvoltare Git pentru Web.

Cel mai simplu mod este să accesați fila Setări a depozitului nostru, apoi la opțiunea Pagini din secțiunea „Cod și automatizare”.

Selectați sursa Implementați dintr-o ramură și faceți clic pe ramura din care doriți să implementați fișierele. Este foarte recomandat să publicați din ramura principală , dar să creați caracteristici și să remediați erori folosind ramuri auxiliare, apoi să le îmbinați. Astfel nu vei introduce erori pe site-ul publicat atât de ușor.

După ce ați selectat ramura, selectați folderul din care doriți să serviți fișierele - de obicei rădăcina ( / ) - și faceți clic pe Salvare.

Din nou, așteptați câteva minute. Site-ul dvs. ar trebui să fie disponibil la "yourusername".github.io/ .

Pentru a anula publicarea unui site de depozit, puteți accesa Setări , apoi Pagini și faceți clic pe opțiunea cu trei puncte. Veți vedea o casetă cu mesajul Anulați publicarea site-ului .

Grozav! Aveți site-ul proiectului dvs. open-source deschis și rulant, dar numele de domeniu în sine este lung și cu siguranță nu este ușor de reținut. Să vedem cum putem îmbunătăți acest lucru.

6. Configurarea unui domeniu personalizat

Cel mai simplu mod de a configura un domeniu personalizat pentru o pagină GitHub și de a vă asigura că funcționează este să accesați furnizorul DNS și să creați patru înregistrări A pentru adresele IP ale paginilor GitHub:

 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

De asemenea, trebuie să configurați o înregistrare CNAME cu yourusername.github.io ca țintă. De obicei, modificările DNS sunt lente, așa că aveți răbdare, ar putea dura până la o zi întreagă.

După ce ați făcut acest lucru, accesați secțiunea Domeniu personalizat din setările depozitului dvs., introduceți domeniul dvs., faceți clic pe butonul Salvare și așteptați ca GitHub să vă verifice domeniul personalizat.

De asemenea, dacă DNS-ul dvs. îl acceptă, bifați caseta Aplicați HTTPS pentru a vă difuza site-ul numai prin HTTPS.

Felicitări! Dacă ați urmat până în acest punct al tutorialului, aveți un site web static găzduit în Pagini GitHub gratuit.

Cele mai bune practici pentru paginile GitHub

Înainte de a ne despărți, iată câteva dintre cele mai bune practici pe care ar trebui să le țineți cont atunci când publicați un site GitHub:

1. Nu faceți niciodată comite directe către filiala din care vă desfășurați. Creați modificări în alte ramuri, apoi creați o cerere de extragere.
2. Selectați un domeniu bun pentru site-ul dvs. dacă vă puteți permite. Este una dintre cele mai importante decizii pentru brandul tău personal sau de proiect.
3. Nu utilizați paginile GitHub în scopuri comerciale, cum ar fi crearea unui site de comerț electronic.
4. Evaluează-ți nevoile. Este grozav să poți publica un site static gratuit, dar dacă te aștepți la mult trafic sau vrei funcții complexe, plata pentru un serviciu de găzduire grozav este calea de urmat.

rezumat

Dezvoltarea web devine din ce în ce mai complicată în fiecare zi. Site-urile statice sunt aici de la apariția internetului și sunt o modalitate excelentă de a începe să creați proiecte.

În acest tutorial, ați învățat ce sunt site-urile statice și cum să le configurați online folosind Pagini GitHub. Ați creat un site personal simplu folosind Bootstrap și l-ați publicat ca site de utilizator GitHub. De asemenea, ați învățat cum să puneți în funcțiune site-ul unui proiect și cum să îl anulați publicarea, dacă este necesar.

În general, GitHub Pages este o modalitate convenabilă și puternică de a găzdui site-ul dvs. static gratuit. Indiferent dacă doriți să vă prezentați portofoliul, să vă împărtășiți proiectele open-source sau să începeți să creați o prezență online, GitHub Pages este o alegere excelentă. Și odată ce obțineți suficient trafic sau sunteți gata să creați un site cu stivă completă, puteți trece fără probleme la alte servicii de găzduire a aplicațiilor, cum ar fi Kinsta, fără să pierdeți o bătaie.