Erweitern Sie Ihr Entwicklerportfolio mit GitHub Pages und Lighthouse

Für jemanden, der versucht, in die Softwareentwicklung einzusteigen, spielt es keine Rolle, wo Sie suchen - LinkedIn, Karriereberatungsgremien, YouTube-Tutorials - der Rat ist immer der gleiche: Sie benötigen ein Portfolio. freeCodeCamp kennt diesen Rat und es ist obligatorisch, einen zu erstellen, um die Zertifizierung als „Responsive Web Design“ abzuschließen.

Das Portfolio soll ein lebendiges Dokument sein. Sie beenden ein Projekt, Sie werfen diesen bösen Jungen auf Ihr Portfolio, um es der Welt zu zeigen. Sie ergänzen es ständig und zeigen Ihren persönlichen Wachstumspfad an. Sie geben es potenziellen Personalvermittlern und Personalmanagern, um Ihrem Lebenslauf eine gewisse Dimension zu verleihen.

Von den fünf Projekten, um diese Zertifizierung zu erhalten, habe ich zweifellos die meiste Arbeit in mein Portfolio gesteckt. Wenn es mein digitaler erster Eindruck sein sollte, wollte ich sicherstellen, dass es der beste war, den ich machen konnte.

Die De-facto-Methode zum Abschließen der Projekte auf freeCodeCamp ist die Verwendung von codepen.io. Mit der kostenlosen Version können Sie in einem HTML-, CSS- und JavaScript-Bereich codieren und Ihre Änderungen anzeigen, während Sie sie in ein Fenster eingeben. Sie können die Seite in einer Vollansicht öffnen, wodurch die HTML-, CSS- und JavaScript-Bereiche entfernt werden, aber oben ein schwarzes Banner verbleibt. Die URL ist ein Hash, so etwas wie //codepen.io/cam-barts/full/ZPWpqo, der nicht einprägsam ist, keinen Hinweis auf den Inhalt der Website gibt und meiner Meinung nach keine Wellen auf a schlägt fortsetzen. Wenn Sie eine Mitgliedschaft nicht mit Codepen bezahlen, können Sie sie nicht ändern.

Ungefähr zu der Zeit, als ich mein Projekt beendete, stimmten die Sterne überein und ich entdeckte zwei Technologien, die meinem Portfolio helfen würden, sich abzuheben: Github Pages und Google Lighthouse.

Mit Github Pages können Sie eine Website direkt aus einem GitHub-Repository hosten. Es bietet eine ziemlich raffinierte github.io-URL, die mich dazu brachte, etwas für einen Lebenslauf zu erstellen. Dies würde mir die volle Kontrolle darüber geben, was meine Benutzer sehen würden, wenn sie zur Site navigieren (so langes, schwarzes Banner), und ich müsste mich nicht mit Selbsthosting befassen oder für einen anderen Hosting-Service bezahlen.

Ich habe im CodeNewbie-Podcast mit Frances Coronel von Google Lighthouse gehört. Es überprüft Ihre Website direkt von Chrome Dev Tools auf fünf Bereiche: Leistung, progressive Web-App, Barrierefreiheit, Best Practices und SEO. SEO oder Suchmaschinenoptimierung hilft Ihrer Website, an die Spitze von Suchmaschinen wie Google zu gelangen, damit Sie leichter gefunden werden. Jetzt, da ich meine Site auf Pages hosten wollte, wollte ich die Verantwortung für die Leistung meiner Site übernehmen, und um dies effektiv zu tun, musste ich zumindest einen Benchmark haben.

Mein Ziel beim Schreiben dieses Artikels ist es, Ihnen dabei zu helfen, eine blitzschnelle, professionell aussehende Portfolio-Site zu erstellen, die für Sie kostenlos ist. Ich möchte, dass Sie stolz darauf sind, auf LinkedIn zu posten und oben in Ihrem Lebenslauf zu verputzen, und ich möchte GitHub Pages und Google Lighthouse nutzen, um dies zu tun.

Um noch weiter zu gehen, habe ich einige Annahmen getroffen. Das erste ist, dass Sie einen Github-Account haben. Wenn Sie noch keinen haben, ist das Erstellen eines einfach. Das zweite ist, dass Sie ein grundlegendes Verständnis von Git haben. Wenn Sie brandneu sind, gibt es viele hervorragende Artikel zum Einstieg. In diesem Artikel wird davon ausgegangen, dass Sie Ihr Portfolio mit Codepen vervollständigt haben. Schließlich sollte Google Chrome installiert sein.

Dieser Artikel folgt meinem persönlichen Portfolio. Den Stift finden Sie hier, den Code hier und das Endprodukt finden Sie unter cam-barts.github.io.

Beginnen

Das Einrichten Ihrer Github Pages-Site ist ziemlich einfach. Die TL; DR-Version lautet:

  • Erstellen Sie ein Repository gemäß der Namenskonvention [GitHub-Benutzername] .github.io
  • Lokal klonen
  • Erstellen Sie die Dateien index.html , style.css und script.js im Repository
  • Fügen Sie diesen Dateien Code hinzu
  • Commit und Push an GitHub
  • Profitieren!

Sie erstellen ein Repository mit einem Titel, der der Konvention [Ihr Github-Benutzername] .github.io entspricht. Hier ist meins: cam-barts.github.io. Der Code, der in dieses Repository verschoben wird, wird angezeigt, wenn Sie zu dieser Site navigieren.

Was genau setzen Sie ein, wenn Sie das Repository lokal geklont haben?

Sie sollten mit drei Dateien beginnen, einer index.html- Datei, einer style.css- Datei und einer script.js- Datei. In jedem Editor, den Sie mögen (ich verwende Atom), sollten Sie mit dem folgenden Codeausschnitt in Ihrer index.html beginnen :

Hier ist viel los, was Ihnen vielleicht unbekannt ist, wenn Sie nur mit codepen.io gearbeitet haben.

Das dir - Attribut im HTML - Tag gibt an, dass das Dokument gelesen werden soll L inks T o R echts. Das stellt nur sicher, dass beim Anzeigen Ihrer Seite alle Elemente linksbündig bleiben, so wie Englisch sprechende Personen lesen.

Die Meta-Tags im Kopf geben Metadaten zur Seite an, mit deren Hilfe Suchmaschinen wie Google Ihre Website indizieren können.

An dieser Stelle sollten Sie die Meta-Tags und das Titel-Tag ausfüllen. Beachten Sie, dass der Inhalt des Keyword- Meta-Tags durch Kommas getrennt sein sollte und Begriffe enthalten sollte, die die Nutzer in Google verwenden sollen, um Ihr Portfolio zu finden. So sieht meine aus:

Der nächste Schritt besteht darin, den HTML-Bereich Ihres Portfolio-Stifts in den Hauptteil Ihres Snippets zu kopieren. Wenn Sie in Ihren Stifteinstellungen mit einem externen CSS oder JS verknüpft sind, z. B. mit Bootstrap oder Font Awesome, müssen Sie diese in Ihrer index.html verknüpfen .

Erstellen Sie weitere Link-Tags für CSS- und Skript-Tags für JavaScript und fügen Sie die in den Einstellungen enthaltenen Links zu den Attributen href bzw. src hinzu . Um sicherzustellen, dass Ihre Stile und Skripte angezeigt werden, müssen Sie sie vor den vorhandenen Link- und Skript-Tags im Snippet platzieren. Die Verknüpfung mit Bootstrap und JQuery sieht beispielsweise folgendermaßen aus:

Als nächstes müssen Sie Ihr eigenes CSS zu Ihrer style.css hinzufügen. Wenn Sie über JavaScript verfügen, fügen Sie dieses Ihrer script.js hinzu .

Nachdem Sie das getan haben, können Sie Ihre ganze Arbeit gut tun und an Github weiterleiten. Unmittelbar danach können Sie zu [Ihrem Github-Benutzernamen] .github.io navigieren und Ihre Website überprüfen!

Optimierung Ihrer Portfolio-Site

Herzlichen Glückwunsch zur Veröffentlichung Ihres Portfolios!

Die nächsten Schritte umfassen die Optimierung Ihrer Site. Dafür verwenden wir Google Lighthouse. Es ist besser, dies in einem Fenster im privaten Browser zu tun, damit eventuell vorhandene Cache- oder Chrome-Erweiterungen die Ergebnisse nicht beeinflussen. Wenn Sie zu Ihrer Site navigieren, öffnen Sie die Chrome Developer Tools (Strg + Umschalt + i) und klicken Sie auf die Registerkarte Audits .

Progressive Web Apps fallen nicht in den Rahmen dieses Lernprogramms, aber es schadet nicht, alle Audits durchzuführen. Wenn Sie sie ausführen, sollten Sie eine Seite erhalten, die folgendermaßen aussieht:

Das Beste an diesen Berichten ist, dass Sie die Möglichkeit haben, Ihre Punktzahlen zu verbessern.

Im Abschnitt "Leistung" werden Sie aufgefordert, Dateiformate der nächsten Generation wie WebP im Vergleich zu herkömmlichen PNG-Bildern bereitzustellen, und es wird empfohlen, die Bilder verzögert zu laden.

Im SEO-Bereich werden SEO-Verbesserungen vorgeschlagen, z. B. das Hinzufügen eines Meta-Tags für Beschreibungen und die Verwendung lesbarer Schriftgrößen. Es macht nicht nur diese Vorschläge, sondern verlinkt auch auf Artikel mit praktischen Beispielen, die Änderungen in Ihrem Code enthalten, um sie für diese Bereiche zu optimieren.

Für mich dauerte es in den hohen 90er Jahren nur eine Stunde, um die Ergebnisse für meine Website für Leistung, Barrierefreiheit, Best Practices und SEO zu erhalten. Sie können alle Änderungen sehen, die ich hier vorgenommen habe.

Weitergehen

Die nächsten Schritte für Ihre Site liegen bei Ihnen. Sie können es mit Google Analytics verknüpfen, um zu sehen, wie viele Besucher Ihr Portfolio erhält. Sie können Abschnitte für Ihre Auszeichnungen hinzufügen, um Ihre freeCodeCamp-Zertifizierungen anzuzeigen, sobald Sie diese erhalten. Die Entwicklung Ihrer Website liegt vollständig in Ihren Händen! Kommentieren Sie unten Links zu Ihrem Portfolio.