Forøg din udviklerportefølje med GitHub-sider og fyrtårn

For en person, der prøver at bryde ind i softwareudvikling, betyder det ikke noget, hvor du kigger - LinkedIn, karriererådgivningstavler, youtube-tutorials - rådgivningen er altid den samme: du har brug for en portefølje. freeCodeCamp kender dette råd, og de gør det obligatorisk at oprette en til at afslutte deres “Responsive Web Design” certificering.

Porteføljen formodes at være et levende dokument. Du afslutter et projekt, du kaster den dårlige dreng i din portefølje for at vise det ud for verden. Du føjer konstant til det og viser din personlige vækstbane. Du giver det til potentielle rekrutterere og ansættelsesledere for at tilføje en dimension til dit CV.

Ud af de fem projekter for at få denne certificering lagde jeg det mest arbejde i min portefølje. Hvis det skulle være mit digitale første indtryk, ville jeg sikre mig, at det var det bedste, jeg kunne lave.

De facto-metoden til at gennemføre projekterne på freeCodeCamp er at bruge codepen.io. Den gratis version lader dig kode i en HTML-, CSS- og JavaScript-rude og se dine ændringer, når du skriver dem i et vindue. Du kan åbne siden i fuld visning, hvilket eliminerer HTML-, CSS- og JavaScript-ruden, men efterlader et sort banner øverst. URL'en er en hash, noget som //codepen.io/cam-barts/full/ZPWpqo, som ikke er mindeværdig, giver ingen indikation om webstedsindholdet, og efter min mening giver det ingen bølger på en Genoptag. Desuden kan du ikke ændre det, medmindre du betaler for et medlemskab med codepen.

Omkring det tidspunkt, hvor jeg var færdig med mit projekt, justerede stjernerne, og jeg opdagede to teknologier, der ville hjælpe min portefølje med at skille sig ud: Github Pages og Google Lighthouse.

Github Pages giver dig mulighed for at være vært for et websted direkte fra et GitHub-arkiv. Det tilbyder en temmelig glat github.io url, som kildede min lyst til noget at sætte på et CV. Det ville give mig fuld kontrol over, hvad mine brugere ville se, når de navigerede til webstedet (så langt, sort banner), og jeg skulle ikke have at gøre med selvhosting eller at betale for en anden hostingtjeneste.

Jeg hørte om Google Lighthouse i CodeNewbie Podcast med Frances Coronel. Det reviderer dit websted direkte fra Chrome Dev Tools til fem områder: Ydeevne, Progressiv webapp, tilgængelighed, bedste praksis og SEO. SEO eller søgemaskineoptimering er det, der hjælper dit websted med at flyde til toppen af ​​søgemaskiner som Google, hvilket hjælper dig med at blive fundet. Nu, hvor jeg skulle være vært for mit websted på Pages, ville jeg også tage ansvar for mit websteds ydeevne og for effektivt at gøre det måtte jeg i det mindste have et benchmark.

Mit mål med at skrive denne artikel er at hjælpe dig med at oprette et lynhurtigt, professionelt porteføljeside uden omkostninger for dig. Jeg vil have, at det er noget, du er stolt af at skrive om på LinkedIn og gips øverst i dit CV, og jeg vil udnytte GitHub Pages og Google Lighthouse til at gøre det.

For at gå videre har jeg lavet et par antagelser. Den første er, at du har en Github-konto. Hvis du ikke allerede har en, er det let at oprette en. Det andet er, at du har en grundlæggende forståelse af git. Hvis du er helt ny, er der masser af fremragende artikler om at komme i gang. Denne artikel antager, at du har afsluttet din portefølje på codepen. Endelig skal du have Google Chrome installeret.

Denne artikel følger min personlige portefølje. Du kan finde pennen her, koden her, og det endelige produkt er på cam-barts.github.io.

Kom godt i gang

Opsætning af dit Github Pages-websted er ret ligetil. TL; DR-versionen er:

  • Opret lager efter navnekonvention [GitHub-brugernavn] .github.io
  • Klon lokalt
  • Opret index.html , style.css , script.js filer i arkivet
  • Føj kode til disse filer
  • Forpligt dig og skub til GitHub
  • Profit!

Du opretter et lager med en titel, der følger konventionen [Dit Github-brugernavn] .github.io. Her er min: cam- barts.github.io. Uanset hvilken kode der bliver skubbet til det arkiv, vises det, når du navigerer til dette websted.

Så når du har klonet lageret lokalt, hvad lægger du præcist i det?

Du skal starte med tre filer, en index.html- fil, en style.css- fil og en script.js- fil. Uanset hvilken editor du kan lide (jeg bruger Atom), skal du starte med følgende kodestykke i dit indeks.html :

Der foregår meget, der måske er ukendt, hvis du kun har arbejdet med codepen.io.

Den dir attribut i HTML-tag angiver, at dokumentet skal læses L enstre T o R ight. Det sikrer bare, at når din side vises, er alle elementerne retfærdige, hvilket er, hvordan engelsktalende læser.

Metatags i hovedet angiver metadata om siden, hvilket hjælper søgemaskiner som Google med at indeksere dit websted.

På dette tidspunkt skal du fortsætte med at udfylde metatags og titelmærke. Bemærk, at nøgleordets metatagsindhold skal adskilles med kommaer og skal indeholde udtryk, som du ønsker, at folk skal bruge i Google for at finde din portefølje. Sådan ser min ud:

Det næste trin er at kopiere HTML-sektionen i din porteføljepenn til body-sektionen i dit kodestykke. Når det er afsluttet, hvis du linkede til nogen uden for CSS eller JS i dine penindstillinger, f.eks. Til Bootstrap eller Font Awesome, skal du linke dem i dit index.html .

Opret flere link tags til css og script tags til JavaScript og tilføj de links, der er i indstillingerne til href og src attributterne. For at sikre, at dine stilarter og scripts vises, skal du sørge for at placere dem før de eksisterende link- og script-tags i kodestykket. For eksempel vil linke til Bootstrap og JQuery se ud:

Dernæst skal du tilføje din egen CSS til din style.css , og hvis du har noget JavaScript, skal du føje det til dit script.js .

Når du har gjort det, er du god til at forpligte alt dit arbejde og skubbe det til Github. Umiddelbart efter du har gjort det, kan du navigere til [Dit Github-brugernavn] .github.io og tjekke dit websted!

Optimering af din porteføljeside

Tillykke med udgivelsen af ​​din portefølje!

De næste trin involverer optimering af dit websted. Til dette bruger vi Google Lighthouse. Det er bedre at gøre dette i et privat browservindue, så eventuelle cache- eller Chrome-udvidelser, du måtte have, ikke påvirker resultaterne. Når du navigerer til dit websted, skal du åbne Chrome Developer Tools (Ctrl + Shift + i) og klikke på fanen Audits .

Progressive Web Apps er uden for omfanget af denne vejledning, men der er ingen skade ved at køre alle revisioner. Når du kører dem, skal du få en side, der ser sådan ud:

Det bedste ved disse rapporter er, at det giver dig "Muligheder" til at forbedre dine score.

I præstationsafsnittet fortæller det dig, at du skal tjene næste gen-filformater som WebP versus traditionelle .PNG-billeder og foreslår doven indlæsning af billederne.

I SEO-sektionen foreslår det SEO-forbedringer som f.eks. Tilføjelse af et metatag for beskrivelsen og brug af læselige skrifttypestørrelser. Ikke kun fremsætter disse forslag, det linker til artikler med praktiske eksempler med ting at ændre i din kode for at optimere til disse områder.

For mig tog det kun en time at få scoringerne til mit websted i de høje 90'ere for ydeevne, tilgængelighed, bedste praksis og SEO. Du kan se alle de ændringer, jeg har foretaget her.

Går videre

Næste trin for dit websted er op til dig. Du kan linke det til Google Analytics for at se, hvor mange besøgende din portefølje får. Du kan tilføje sektioner til dine priser for at vise dine freeCodeCamp-certificeringer, når du får dem. Udviklingen af ​​dit websted er helt i dine hænder! Kommentar links til din portefølje nedenfor.