Share
En väldigt användbar aspekt av GitHub repos är att de tillåter oss att vara värd för statiska webbplatser tack vare GitHub Pages. Men visste du att du kan dynamiskt visa alla dina GitHub repos på din webbplats också?
I denna handledning kommer jag att visa dig ett bra litet knep med hjälp av lagringsmetadata för att skapa en portfölj av dina open source-projekt på samma sätt:
Innan vi kommer igång måste du se till att alla dina öppna källprojekt är upp till skrapan. Det betyder att se till att de har en anständig readme-fil och lämplig licens. Det ser inte bra ut om din readme saknas eller är felaktig. Dessutom måste du fylla i beskrivning och url fält på lämpligt sätt. Dessa kommer att användas som en del av varje portföljartikel.
Först måste vi göra en ny repo på GitHub. För att utlösa GitHub Pages behöver du antingen namnge repo då ditt användarnamn följt av .github.io så, i mitt fall daviddarnes.github.io eller en repo som namnges efter eget val, men med en huvudgren som heter gh-pages.
"Ny repo" -knappen på github.comOm du är ny på GitHub och inte är säker på hur du installerar en repo, ta en titt på den här introduktionen på nybörjarnivå från Dan Wellman.
Jag skulle rekommendera username.github.io repo, om du inte redan använder det för något annat. Många företag som Yelp, IBM och Square använder sin huvudsakliga github.io webbplats för att visa upp sina open source-projekt, men det är helt upp till dig.
Se till att du väljer Jekyll i .gitignore dropdown när du skapar din repo.
Vi kommer inte att skapa en komplett Jekyll-sida, men vi kommer att dra nytta av några av dess funktioner. Om du behöver hjälp med att använda Jekyll, kolla Guy Routledges briljanta kurs Bygga statiska webbplatser med Jekyll.
Efter att du klonat ner repo (lägger till den på din lokala dator) kan du börja lägga till de viktiga filer som behövs för att lista ut dina GitHub-projekt.
För att konfigurera vår webbplats måste vi skapa en _config.yml fil. Det här är vad som används för att konfigurera vårt Jekyll-projekt. Det krävs inte mycket konfiguration, vi behöver bara berätta för Jekyll att ignorera readme.md fil:
# Ignorera repofiler utesluter: - README.md
Konfigureringsfilen kommer också att låta servern veta att vi avser att använda Jekyll med denna repo.
Den andra filen vi behöver är en index.html-fil. Inom den här filen går vi igenom arkiverna på GitHub via deras metadata API. Vi kan göra detta med Liquid-kraften, vilket är det templerande språket inom Jekyll. Du måste lägga till följande i toppen av indexfilen för att tillåta användningen av flytande:
--- # Främre sak ---
De två uppsättningarna av bindestreck används för att slingras främre delen för filen inställningar för den aktuella sidan. Men eftersom vi för närvarande inte har några inställningar för filen har jag precis lämnat en kommentar där.
I index.html-filen måste vi lägga till en del HTML-struktur och lite flytande att gå igenom projekten. Här är min vanliga HTML-struktur:
Till att börja med har vi bara en innehållande en , men jag planerar att lägga till mer information till det senare.
Nästa kommer den flytande koden. I det följande exemplet har jag använt listestrukturen och kombinerat den med flytande slingan:
Låt oss bara ta en stund att bryta ner vad som händer. Vi slingrar över varje repo i site.github.public_repositories. site.github är där alla metadata för GitHub repos lagras, en del av det är alla offentliga repositories.
Sedan har jag, för syftet med denna demo, begränsat slingan med gräns: 28, så demoversidan är inte för lång.
Nästa kontrollerar jag om det är ett gaffelt repo. Om repo.fork Det är inte sant att vi fortsätter med utgången. Om du gillar att bidra till andra projekt på GitHub, som jag själv, så brukar du ha några gafflar. Denna kontroll, om du vill ha det, kommer att förhindra att de visas i din portfölj.
Slutligen, för varje repo, matar vi ut värdena repo.homepage och repo.name i ett ankare.
Nu måste du begå dessa förändringar och driva dem. antingen att bemästra eller gh-pages (beroende på vilken inställning du valde). Då, för att visa din grundläggande projektnoteringssida:
Det kommer inte att bli en väldigt spännande produkt än-här är det som den grundläggande demo ser ut som att använda mitt eget GitHub-konto:
Det är dags att lägga till lite stil och detalj i våra projekt!
Du kan göra alla typer av kontroller och filtrering med GitHub-metadata. Några av datavärdena har dokumenterats, men om du vill ha mer detaljerade exempel kan du borra ner i deras API. Först och främst bör vi lägga till en CSS-fil så att vi kan ställa upp sidan.
Tack vare Jekyll kan vi använda en SCSS-fil för att direkt ställa in vår portfölj. Skapa en styles.scss-fil i en ny css-katalog och lägg till en främre sakkommentation längst upp i filen:
--- # Stilar ---
Den här kommentaren fungerar på samma sätt som den gör i index.html. Jekyll känner igen filen och hanterar förbehandlingen för oss. Du kan ställa saker du vill, men efter lite flexbox arbete och lägga till Google Fonts har jag nu följande:
Ta en titt på SCSS fliken på demo ovan för att se hur jag har stylade saker.
Låt oss nu försöka föra in ytterligare information om varje förråd. För det första, låt oss lägga till en beskrivning:
repo.description
repo.description kommer att föra igenom beskrivningen som visas ovanför ditt förråd på GitHub.
Hur är det med att vi visar hur många stjärnor och gafflar vi har haft på varje förråd också? Vi kan uppnå detta med repo.stargazers_count och repo.forks_count såhär:
repo.description
Som det här visar kan du exponera mycket data från dina GitHub-arkiv. Några av detta är försök och fel; Det handlar bara om att prova olika värden och kontrollera resultaten. Jekyll borde inte kasta ett fel (oftast) så att du kan se om resultatet fungerar eller inte på live-sidan.
I mitt exempel har jag lagt till ikoner och färger för varje objekt för att återspegla huvudspråket de skrivits i. Jag uppnådde detta genom att lägga till en klass med repo.language. Jag kunde sedan stela varje objekt beroende på språk. Se följande exempel:
I exemplet ovan använder jag flytande s downcase filtrera för att ta bort alla stora bokstäver. Du ser också att jag har lagt till en ikon i form av en SVG-sprite. Återigen använder jag repo.language som ID för var och en av mina ikoner. Om du vill veta mer på SVG sprite-ikoner, ta en titt på en handledning jag skrivit ett tag tillbaka:
Självklart behöver din egen projektsida inte se något så här. Du kan vara så kreativ som du vill! Till exempel, här är min personliga öppen källprojekt webbplats: https://daviddarnes.github.io. Jag har använt en hel del funktioner och knep i mina, så om du vill hämta något från det kan du se koden på GitHub.
Det finns en eller två detaljer som vi inte har behandlat, och ett par funktioner som vi kunde lägga till.
Låt oss veta i kommentarerna hur du går vidare!
Accentsconagua