Share
Et veldig nyttig aspekt ved GitHub repos er at de tillater oss å være vert for statiske nettsteder takket være GitHub Pages. Men visste du at du også kan vise alle dine GitHub reposer på din nettside dynamisk?
I denne opplæringen skal jeg vise deg et flott lite triks ved hjelp av lagringsmetadata for å lage en portefølje av åpen kildekodeprosjekt akkurat slik:
Før vi kommer i gang, må du sørge for at alle åpne kildeprosjektene dine er oppe. Det betyr at du skal ha en anstendig readme-fil og riktig lisens. Det ser ikke bra ut hvis din readme mangler eller er unøyaktig. I tillegg må du fylle ut beskrivelsen og url-feltene riktig. Disse vil bli brukt som en del av hvert porteføljeelement.
Først må vi lage en ny repo på GitHub. Hvis du vil utløse GitHub Pages, må du enten kjenne repoen som brukernavnet ditt etterfulgt av .github.io så, i mitt tilfelle daviddarnes.github.io eller en repo oppkalt etter eget valg, men med en hovedgren kalt GH-sider.
Den "nye repo" -knappen på github.comHvis du er ny på GitHub og ikke er sikker på hvordan du setter opp en repo, ta en titt på denne nybegynnerinnføringen fra Dan Wellman.
Jeg vil anbefale username.github.io repo, hvis du ikke allerede bruker det til noe annet. Mange bedrifter som Yelp, IBM og Square bruker deres viktigste github.io nettsted for å vise frem sine åpne kildeprosjekter, men det er helt opp til deg.
Pass på at du velger Jekyll i .gitignore dropdown når du lager din repo.
Vi vil ikke skape et fullstendig Jekyll-nettsted, men vi vil dra nytte av noen av funksjonene. Hvis du trenger hjelp med å bruke Jekyll, sjekk ut Guy Routledges briljante kurs Building Static Websites With Jekyll.
Etter kloning ned repoen (legger den til din lokale maskin), kan du begynne å legge til de essensielle filene som trengs for å liste ut dine GitHub-prosjekter.
For å konfigurere vår prosjektside må vi opprette en _config.yml fil. Dette er det som er vant til å konfigurere vårt Jekyll-prosjekt. Det er ikke mye konfigurasjon påkrevd, vi må bare fortelle Jekyll å ignorere readme.md fil:
# Ignorer repo-filer ekskluderer: - README.md
Konfigureringsfilen vil også la serveren vite at vi har tenkt å bruke Jekyll med denne repoen.
Den andre filen vi trenger er en index.html-fil. Innenfor denne filen løper vi gjennom lagringsplassene på GitHub via deres metadata API. Vi kan gjøre dette med kraften til væske, som er det templerende språket i Jekyll. Du må legge til følgende øverst i indeksfilen for å tillate bruk av væske:
--- # Forreste sak ---
De to settene av bindestreker brukes til å vikle frontmateriell for filen; innstillinger for den aktuelle siden. Men fordi vi for øyeblikket ikke har noen innstillinger for filen, har jeg nettopp lagt igjen en kommentar der.
Mens du er i filen index.html, må vi legge til litt HTML-struktur og litt væske å løse gjennom prosjektene. Her er min enkle HTML-struktur:
Til å begynne med har vi bare en inneholder en , men jeg planlegger å legge til flere detaljer til det senere.
Neste kommer væskekoden. I følgende eksempel har jeg brukt listestrukturen og kombinert den med væskesløyfen:
La oss bare ta et øyeblikk for å bryte ned hva som skjer. Vi looping over hver repo i site.github.public_repositories. site.github er der alle metadataene for GitHub repos er lagret, en del av det er alle de offentlige repositoriene.
Da, for denne demonstrasjons formål, har jeg begrenset sløyfen med grense: 28, så demoversiden er ikke for lang.
Deretter sjekker jeg om det er en forked repo. Hvis repo.fork Det er ikke sant at vi fortsetter med produksjonen. Hvis du liker å bidra til andre prosjekter på GitHub, som meg selv, så har du en tendens til å ha noen forked repos. Denne sjekken, hvis du vil ha det, vil forhindre at de vises i porteføljen din.
Til slutt, for hver repo, leverer vi verdiene repo.homepage og repo.name i et anker.
Nå må du forplikte disse endringene og presse dem; enten til herre eller GH-sider (avhengig av oppsettet du valgte). Så, for å se ditt grunnleggende prosjektoppføringssted:
Det vil ikke være en veldig spennende utgang ennå - her er hva den grunnleggende demoen ser ut som å bruke min egen GitHub-konto:
Det er på tide å legge til litt stil og detalj i våre prosjekter!
Du kan gjøre alle typer sjekker og filtrere med GitHub-metadataene. Noen dataverdier er dokumentert, men hvis du vil ha mer detaljerte eksempler, kan du bore ned i APIen sin. Først av alt, bør vi legge til en CSS-fil slik at vi kan style opp siden.
Takket være Jekyll, kan vi bruke en SCSS-fil til å direkte utforme vår portefølje. Opprett en styles.scss-fil i en ny css-katalog, og legg til en fremre kommentar til toppen av filen:
--- # Stiler ---
Denne kommentaren fungerer på samme måte som i indeksen.html. Jekyll gjenkjenner filen og håndterer forbehandlingen for oss. Du kan stile ting du vil, men etter litt flexbox arbeid og legge til Google Fonts, har jeg nå dette:
Ta en titt på SCSS fan på demo over for å se hvordan jeg har stilte ting.
La oss nå prøve å få inn mer informasjon om hvert lager. Først, la oss legge til en beskrivelse:
repo.description
repo.description vil bringe gjennom beskrivelsen som vises over ditt arkiv på GitHub.
Hva med vi viser hvor mange stjerner og gafler vi har hatt på hvert lager også? Vi kan oppnå dette med repo.stargazers_count og repo.forks_count som så:
repo.description
Som dette viser, kan du utsette mye data fra GitHub-depotene dine. Noen av dette er prøve og feil; Det handler bare om å prøve forskjellige verdier og sjekke resultatene. Jekyll burde ikke kaste en feil (mesteparten av tiden), så du vil kunne se om resultatet fungerer eller ikke på live-siden.
I mitt eksempel har jeg lagt til ikoner og farger for hvert element for å gjenspeile hovedspråket de ble skrevet inn. Jeg oppnådde dette ved å legge til en klasse ved å bruke repo.language. Jeg kunne da stile hvert element avhengig av språket. Se følgende eksempel:
I eksemplet ovenfor bruker jeg væske downcase filter for å fjerne eventuelle store bokstaver. Du vil også se at jeg har lagt til et ikon i form av et SVG-sprite. Igjen bruker jeg repo.language som ID for hver av mine ikoner. Hvis du vil vite mer om SVG sprite ikoner, ta en titt på en opplæring jeg skrev en stund tilbake:
Selvfølgelig trenger ikke din egen prosjektside å se noe slikt ut. Du kan være så kreativ som du vil! For eksempel, her er mitt personlige open source-prosjekter nettsted: https://daviddarnes.github.io. Jeg har brukt ganske mange funksjoner og triks i min, så hvis du vil plukke ut noe fra det, kan du se koden på GitHub.
Det er en eller to detaljer som vi ikke har behandlet, og et par funksjoner som vi kunne legge til.
Gi oss beskjed i kommentarene hvordan du går videre!
Accentsconagua