Share
Un aspect foarte util al repo-urilor GitHub este că ne permit să găzduim site-uri web grafice datorită paginilor GitHub. Dar ați știut că puteți afișa în mod repetat toate replicile GitHub pe site-ul dvs., de asemenea?
În acest tutorial vă voi arăta un truc minunat folosind metadatele repository pentru a crea un portofoliu al proiectelor dvs. open source la fel ca și în cazul:
Înainte de a începe, va trebui să vă asigurați că toate proiectele dvs. open source sunt de până la zero. Asta înseamnă să vă asigurați că au un fișier de citire decent și o licență corespunzătoare. Nu pare bine dacă citirea dvs. lipsește sau este inexactă. În plus, va trebui să completați corespunzător câmpurile de descriere și url. Acestea vor fi utilizate ca parte a fiecărui element de portofoliu.
În primul rând, trebuie să facem un nou repo pe GitHub. Pentru a declanșa paginile GitHub, este necesar să denumiți repo-ul ca nume de utilizator urmat de .github.io așa, în cazul meu daviddarnes.github.io sau o repo denumită la alegere, dar cu o ramură principală numită GH-pagini.
Butonul "nou repo" de pe github.comDacă sunteți nou la GitHub și nu sunteți sigur cum să configurați un repo, aruncați o privire la această introducere la nivel de începător de la Dan Wellman.
Aș recomanda username.github.io repo, dacă nu îl folosiți deja pentru altceva. Multe companii precum Yelp, IBM și Square utilizează site-ul principal github.io pentru a prezenta proiectele lor open source, dar depinde în întregime de dvs..
Asigurați-vă că selectați Jekyll în .gitignore dropdown atunci când vă creați repo-ul.
Nu vom crea un site complet Jekyll, dar vom profita de unele dintre caracteristicile sale. Dacă aveți nevoie de ajutor folosind Jekyll, verificați cursul strălucit al lui Guy Routledge Construirea site-urilor statice cu Jekyll.
După ce ați clonat repo-ul (adăugându-l la mașina locală), puteți începe să adăugați fișierele esențiale necesare pentru a lista proiectele dvs. GitHub.
Pentru a configura site-ul nostru de proiecte trebuie să creați o _config.yml fişier. Acesta este cel folosit pentru configurarea proiectului nostru Jekyll. Nu este nevoie de multă configurație, trebuie să-i spunem lui Jekyll să ignore readme.md fişier:
# Ignorarea fișierelor repo exclude: - README.md
Fișierul de configurare va permite, de asemenea, serverului să știe că intenționăm să folosim Jekyll cu această repo.
Celălalt fișier de care avem nevoie este un fișier index.html. În cadrul acestui fișier, vom trece prin depozitele de pe GitHub prin API-ul metadatelor. Putem face asta cu puterea Lichidului, care este limba templantă din cadrul Jekyll. Va trebui să adăugați următoarele în partea superioară a fișierului index pentru a permite utilizarea funcției Liquid:
--- # Chestiunea frontului ---
Cele două seturi de liniuțe sunt folosite pentru a înfășura materia frontala pentru dosar; setările pentru acea pagină. Totuși, pentru că nu avem în prezent vreo setare pentru fișierul pe care tocmai l-am lăsat acolo.
În timp ce în fișierul index.html, trebuie să adăugăm niște structuri HTML și unele lichide în buclă prin proiecte. Iată structura HTML simplu:
Pentru început, avem doar o conținând un , dar intenționez să adaug mai multe detalii mai târziu.
Înainte vine codul lichid. În următorul exemplu am folosit structura listei și l-am combinat cu bucla de lichid:
Să facem doar o clipă pentru a distruge ce se întâmplă. Ne întoarcem peste fiecare repo site.github.public_repositories. site.github este locul în care sunt stocate toate metadatele pentru repo GitHub, o parte dintre acestea fiind toate depozitele publice.
Apoi, în scopul acestui demo, am limitat buclă cu Limita: 28, astfel încât pagina demo nu este prea lungă.
Înainte verifică dacă este un repo înălțat. Dacă repo.fork nu este adevărat vom continua cu ieșirea. Dacă vă place să contribuiți la alte proiecte pe GitHub, ca și mine, atunci aveți tendința de a avea câteva repo-uri furcate. Acest control, dacă îl doriți, îi va împiedica să apară în portofoliul dvs..
În cele din urmă, pentru fiecare repo, ieșim valorile repo.homepage și repo.name într-o ancoră.
Acum trebuie să faceți aceste schimbări și să le împingeți; fie pentru maestru sau GH-pagini (în funcție de configurația pe care ați ales-o). Apoi, pentru a vedea site-ul dvs. de bază de înregistrare a proiectului:
Nu va fi încă o ieșire extraordinară - iată cum arată demo-ul de bază folosind propriul cont GitHub:
Este timpul să adăugăm un anumit stil și detalii proiectelor noastre!
Puteți face tot felul de verificări și filtrare cu metadatele GitHub. Unele dintre valorile datelor au fost documentate, dar dacă doriți să prezentați câteva exemple mai detaliate, puteți să căutați în API-ul lor. Mai întâi de toate, ar trebui să adăugăm un fișier CSS, astfel încât să putem personaliza pagina.
Mulțumită lui Jekyll, putem folosi un fișier SCSS pentru a ne modela direct portofoliul. Creați un fișier styles.scss într-un nou director css și adăugați un comentariu de subiect frontal în partea de sus a fișierului:
--- # Stiluri ---
Acest comentariu funcționează la fel ca în index.html. Jekyll recunoaște fișierul și gestionează preprocesarea pentru noi. Puteți să faceți lucruri pe măsură ce doriți, dar după un pic de lucrare flexbox și adăugarea Google Fonts, am acum acest lucru:
Uitați-vă la SCSS fila de pe demo de mai sus pentru a vedea cum am desenat lucrurile.
Acum, să încercăm să aducem câteva informații suplimentare despre fiecare depozit. În primul rând, să adăugăm o descriere:
repo.description
repo.description va aduce prin descrierea care apare deasupra depozitului dvs. pe GitHub.
Ce zici de cât de multe stele și furci am avut în fiecare depozit? Putem realiza acest lucru cu repo.stargazers_count și repo.forks_count ca astfel:
repo.description
După cum arată acest lucru, puteți expune o mulțime de date din depozitele dvs. GitHub. Unele dintre acestea sunt încercări și erori; este doar o chestiune de a încerca diferite valori și de a verifica rezultatele. Jekyll nu ar trebui să arunce o eroare (de cele mai multe ori), astfel încât să puteți vedea dacă rezultatul funcționează sau nu pe pagina live.
În exemplul meu, am adăugat icoane și culori la fiecare element pentru a reflecta limba principală în care au fost scrise. Am realizat acest lucru prin adăugarea unei clase utilizând repo.language. Am fost apoi capabil să stil fiecare articol, în funcție de limba. Consultați următorul exemplu:
În exemplul de mai sus folosesc lichidul downcase filtrați pentru a elimina orice caractere majuscule. Veți vedea, de asemenea, că am adăugat o pictogramă sub forma unui sprite SVG. Din nou, folosesc repo.language ca ID-ul pentru fiecare dintre icoanele mele. Dacă doriți să aflați mai multe despre pictogramele SVG sprite, aruncați o privire la un tutorial pe care l-am scris un timp înapoi:
Desigur, propria pagină de proiecte nu trebuie să arate așa. Puteți fi la fel de creativ pe cât doriți! De exemplu, aici este site-ul meu personal cu surse deschise: https://daviddarnes.github.io. Am folosit destul de multe caracteristici și trucuri în a mea, deci dacă doriți să alegeți ceva de la el, puteți vedea codul pe GitHub.
Există una sau două detalii pe care nu le-am tratat și câteva caracteristici pe care le putem adăuga.
Spuneți-ne în comentariile dvs. despre cum vă duceți!
Accentsconagua