Der Leitfaden für faule Programmierer zur Pflege einer persönlichen Website

Viele Entwickler haben entweder eine persönliche Website oder möchten eine haben.

Obwohl es viele großartige Möglichkeiten gibt, eine schöne Website ohne Programmierkenntnisse zu erstellen, möchten wir als Softwareentwickler unsere Fähigkeiten unter Beweis stellen und etwas von Grund auf neu erstellen.

Das Codieren der Website ist eine Sache, die Sie möglicherweise in ein bis zwei Tagen erledigen können. Aber sobald Ihre Website online ist, müssen Sie sie pflegen, um sicherzustellen, dass sie verfügbar, aktuell und sicher ist.

Im Folgenden werfen wir daher einen Blick darauf, wie Sie in 10 einfachen Schritten mit minimalem Aufwand eine persönliche Website erstellen und pflegen. Denn obwohl wir das Programmieren lieben, lieben wir auch die Zeit abseits des Computers. 🌳🤸🍝

Als Beispiel verwende ich meine Website, die ich kürzlich in React neu erstellt habe. Den Quellcode finden Sie in meinem GitHub-Repository .

Die folgenden Tipps und Tricks gehen von einer supereinfachen, statischen Website aus, die nur aus einem Frontend-Teil besteht. Sie können diese Konzepte jedoch problemlos auf komplexere Projekte erweitern, einschließlich eines Backends, einer Datenbank oder anderer Teile der Infrastruktur.

Wir werden auf keine der genannten Technologien näher eingehen, sondern vielmehr einen allgemeinen Überblick geben, um sie technologieunabhängig zu halten.

1. Richten Sie ein Repository ein

Wählen Sie eine Entwicklungsplattform wie GitHub oder GitLab und richten Sie ein neues, leeres Repository ein. Stellen Sie sicher, dass Sie eine Lizenz beifügen und eine README-Datei hinzufügen, damit die Community weiß, was sie mit Ihrem Code machen kann.

2. Wählen Sie ein JS-Framework

Wählen Sie ein JavaScript-Framework oder eine JavaScript-Bibliothek wie React, Vue oder Svelte aus, die Sie zum Erstellen Ihrer Website verwenden möchten. Oder tun Sie es auch nicht und entscheiden Sie sich für Vanilla HTML und JavaScript, wenn Sie das ausprobieren möchten.

Bei der Wahl des Frameworks kommt es vor allem darauf an, dass es Ihnen Spaß macht, damit zu arbeiten.

Dies ist Ihre Website und Sie können die Tools verwenden, die Ihnen gefallen. Sie können etwas verwenden, das Sie bereits kennen und mögen, oder etwas völlig Neues ausprobieren, auf das Sie neugierig waren.

Ich habe meine erste persönliche Homepage in Vue.js erstellt. Ungefähr ein Jahr später habe ich es in React neu erstellt, weil ich mehr praktische React-Erfahrung sammeln und einige React-Bibliotheken ausprobieren wollte.

Verwenden Sie die Build-Tools Ihres JS-Frameworks, um Boilerplate-Code zu generieren, und erhalten Sie ein einfaches Beispiel im Hello World-Stil, das auf localhost bereitgestellt wird.

3. Wählen Sie eine UI-Komponentenbibliothek

Dieser Schritt ist optional, aber da es hier darum geht, den Aufwand minimal zu halten, würde ich empfehlen, eine UI-Komponentenbibliothek wie Material UI oder Bootstrap in Ihr Projekt einzubinden. Ich habe Chakra UI für meine Website ausgewählt.

Diese Bibliotheken enthalten eine Reihe von UI-Komponenten sowie Dienstprogramme für Layout und Stil und ermöglichen Ihnen eine superschnelle Erstellung.

Stellen Sie sicher, dass Sie eine gut dokumentierte Komponentenbibliothek wählen, die optisch ansprechend ist, viele Komponenten enthält und leicht angepasst werden kann. Um das Erscheinungsbild der Bibliothek auf Ihrer Website anzupassen, kann es Spaß machen, mit Schriftarten und Farbschemata herumzuspielen. 🎨

4. Bauen Sie etwas ganz Einfaches

Überlegen Sie, welche Informationen Sie auf Ihrer Homepage anzeigen möchten, und erstellen Sie dann einfach etwas mit den Komponenten aus Ihrer UI-Komponentenbibliothek. Denken Sie nicht zu viel darüber nach.

Das Hauptziel besteht nun darin, etwas schnell zum Leben zu erwecken, und wie Voltaire bereits wusste, ist Perfektion der Feind des Guten.

Wenn Sie viel zu sagen haben und viele Ideen haben, was Sie auf Ihrer Website zeigen möchten, ist das großartig! Machen Sie weiter und erstellen Sie, aber erstellen Sie zunächst einen Plan für die Organisation Ihrer Inhalte – denken Sie an Routing, verschiedene Ansichten, Abschnitte, Layout, Navigation usw.

Aber wenn Sie so sind wie ich, fragen Sie sich an dieser Stelle vielleicht, was Sie auf Ihre Homepage setzen sollen und warum Sie eine erstellen sollten, denn wen würde das überhaupt interessieren?! 😳

Ihre Gefühle sind völlig berechtigt, aber ich kann Ihnen sagen, dass Sie für eine Online-Präsenz weder die Erlaubnis von irgendjemandem noch ausgefallene Inhalte benötigen.

Halten Sie es ganz einfach und teilen Sie einfach einige Dinge über sich mit, die Sie gerne mit Besuchern teilen möchten (das kann jeder sein, der Zugang zum Internet hat – denken Sie daran).

Für meine Website habe ich sie recht minimalistisch gehalten, mit einem Bild und einem Slogan über mich selbst, einer Liste meines Tech-Stacks, einigen Dingen, die mir gefallen, und ein paar Buchempfehlungen. 📚 Ich habe auch Links zu meinem LinkedIn und GitHub eingefügt.

5. Fügen Sie etwas Lustiges hinzu

In Schritt 4 haben wir etwas supereinfaches gebaut, aber einfach sollte nicht langweilig sein. Also, lasst uns jetzt interaktiv werden. 🚀

Versuchen Sie, sich ein paar einfache Möglichkeiten auszudenken, wie Sie den Besuch Ihrer Website unterhaltsamer und interessanter gestalten können. Dazu können Dinge wie Animationen, Benutzerinteraktionen oder Änderungen des Farbschemas gehören. Erfinden Sie das Rad jedoch nicht neu.

Wenn Sie eine Idee haben, was zu tun ist, gibt es wahrscheinlich bereits ein npm-Paket, das genau das tut.

Ich habe mich für eine Scroll-Animation für die Navigationsleiste entschieden, eine Schaltfläche zum Umschalten zwischen dunklem und hellem Modus mit einem schönen Übergang und eine Symbolschaltfläche, mit der eine Überraschungs-Konfetti-Party gestartet wird

Reaktionskonfetti .

Und das war's, Sie haben sich eine Website erstellt! 🥳 Sehen wir uns als Nächstes an, wie es bereitgestellt und gewartet wird.

6. Bereitstellen

Es gibt viele Möglichkeiten, Ihre Website völlig kostenlos im Internet bereitzustellen, z. B. Netlify, Vercel oder GitHub Pages.

Die genauen Schritte hängen von dem von Ihnen gewählten Anbieter ab. Befolgen Sie daher die Anleitungen, bis Ihre Website unter einer bestimmten URL online ist.

Ich habe mich für Netlify entschieden und fand die Einrichtung unglaublich einfach.

Als optionalen Schritt können Sie sich entscheiden, einen benutzerdefinierten Domainnamen zu kaufen und ihn mit dem DNS Ihres Anbieters zu verbinden, um die beliebige URL, die Sie erhalten haben, zu ersetzen. Sie müssen das nicht tun, aber ich finde einen benutzerdefinierten Domainnamen eine nette Geste und der Kauf einer Domain sollte nicht viel mehr als 10 $/Jahr kosten.

7. CI/CD einrichten

Da Ihre Website nun im Internet verfügbar ist, möchten Sie sicherstellen, dass Sie sie bei zukünftigen Commits nicht versehentlich beschädigt. Sie möchten außerdem automatisch die neueste Version Ihres main bereitstellen.

Ihre Entwicklungsplattform verfügt möglicherweise bereits über integrierte CI/CD-Tools wie GitHub Actions oder GitLab CI/CD.

Ich verwende GitHub Actions, da mein Repository auf GitHub läuft.

Für die kontinuierliche Integration könnten Sie einige automatisierte Prüfungen für jede Pull-Anfrage und jede Zusammenführung mit dem main einrichten. Dazu können Prüfungen wie Flusen und Formatierung oder Komponententests gehören.

Es stehen auch viele Vorlagen zur Verfügung. Ich verwende beispielsweise eine vorgefertigte GitHub-Aktion, um Schwachstellen mit CodeQL zu entdecken.

Für die kontinuierliche Bereitstellung können Sie Ihr eigenes Bereitstellungsskript einrichten, das bei jedem Push an main ausgeführt wird, nachdem alle Prüfungen abgeschlossen sind. Abhängig vom Hosting-Anbieter, den Sie in Schritt 6 ausgewählt haben, müssen Sie jedoch möglicherweise nichts tun.

Netlify lässt sich beispielsweise gut in GitHub integrieren, sodass der main automatisch bereitgestellt wird.

8. Verwenden Sie Dependabot, um Ihre Abhängigkeiten auf dem neuesten Stand zu halten

Wir haben eine Website erstellt, sie live geschaltet und jetzt wollen wir uns nur noch entspannen. Aber das JS-Ökosystem entwickelt sich schnell weiter, und damit auch seine Schwachstellen.

Wir möchten sicherstellen, dass unsere Abhängigkeiten auf dem neuesten Stand sind, um die Sicherheit unserer Anwendung zu gewährleisten. Die Verwaltung von NPM-Abhängigkeiten kann jedoch mühsam sein, und wir möchten ganz sicher nicht jeden Tag nach Updates suchen.

Glücklicherweise gibt es ein brillantes kleines Tool namens Dependabot, das all das für uns erledigen kann. 🤖 Dependabot ist ein von GitHub entwickeltes Tool für automatisierte Abhängigkeitsaktualisierungen. Mittlerweile ist auch eine Version für GitLab verfügbar.

Sie müssen lediglich eine dependabot.yml Datei hinzufügen und GitHub erstellt automatisch Pull Requests, wenn eine neue Version der von Ihnen verwendeten Pakete verfügbar ist. Sie können Dependabot in der YAML-Datei konfigurieren, um beispielsweise den Beauftragten für PRs und die maximale Anzahl offener PRs festzulegen.

Da wir in Schritt 7 einige automatisierte Prüfungen für PRs eingerichtet haben, werden diese mit jedem Dependabot-PR ausgeführt und wir können sicher sein, dass eine neue Version unsere Website nicht kaputt macht.

In den Repository-Sicherheitseinstellungen können Sie Dependabot auch so konfigurieren, dass es Sie über alle Schwachstellen in Ihren Abhängigkeiten benachrichtigt.

9. Suchen Sie nach Barrierefreiheitsproblemen

Barrierefreiheit ist ein so seltsames Thema – sie ist überaus wichtig, wird aber oft vernachlässigt, obwohl es bei der Verbesserung der Barrierefreiheit einer Website so viele kleine Früchte gibt.

Wenn Sie ein JS-Framework und eine UI-Komponentenbibliothek verwenden, sollte Ihr Barrierefreiheits-Score nicht völlig schlecht sein. Es kann wahrscheinlich noch verbessert werden, insbesondere wenn Sie benutzerdefinierte Schriftarten oder Farbschemata hinzugefügt haben.

Sie können ein Tool wie Lighthouse in den Chrome Dev Tools ausführen, um mögliche Verbesserungen zu entdecken. Lighthouse erstellt für Sie einen Bericht und schlägt Änderungen zur Verbesserung der Barrierefreiheit vor.

Diese Vorschläge sind in der Regel einfach umzusetzen, wie z. B. das Erhöhen der Schriftgröße, das Ändern des Kontrasts zwischen Text und Hintergrund oder das Neuanordnen der Reihenfolge von HTML-Elementen im DOM.

Lighthouse kann auch Berichte zu Leistung, Best Practices und SEO erstellen. 🆒

10. Führen Sie einen Cron-Job aus, um Ihre Website anzupingen

Nachdem ich meine Website online gestellt hatte, verspürte ich den Drang, mindestens einmal am Tag nachzusehen, ob sie noch da ist. 🕵️‍♀️

Zuerst freute ich mich jedes Mal, wenn ich sah, dass meine Website noch verfügbar war, aber dann wurde es schnell langweilig.

Um sicherzustellen, dass Sie automatisch benachrichtigt werden, wenn Ihre Website aus irgendeinem Grund ausfällt, können Sie einen Cron-Job einrichten, der einfach in regelmäßigen Abständen einen Ping an die URL Ihrer Website sendet.

Wenn Ihr Projekt ein Backend und eine Datenbank umfasst, können Sie auch einige grundlegende Smoke-Tests einrichten, die beispielsweise einige GET Anfragen auf Ihrer API ausführen.

In meinem Fall habe ich einfach eine weitere GitHub-Aktion eingerichtet, die einmal am Tag ausgeführt wird und meine Seite anpingt. Erhöhen Sie die Häufigkeit, wenn Sie es für Ihre Homepage und die Art des erwarteten Datenverkehrs für angemessen halten.

Abschluss

Und wir sind fertig! Zumindest im Moment.

Für mich ist meine Website in erster Linie eine Spielwiese zum Ausprobieren von Technologien, die mich interessieren, daher verändere ich sie gerne ab und zu. Ich möchte Sie ermutigen, den Code Ihrer Website regelmäßig zu überprüfen und einfach Spaß damit zu haben. 💃

Ich hoffe, dieser Leitfaden hat Ihnen eine Vorstellung davon gegeben, wie einfach es sein kann, eine persönliche Homepage zu erstellen und zu pflegen. Sie könnten wahrscheinlich in 1-2 Tagen etwas Einfaches erstellen (wenn Sie wie ich sind, fügen Sie weitere zwei Tage hinzu, um das CSS-Layout richtig hinzubekommen 🙄).

Die Bereitstellung Ihrer Website und das Hinzufügen einiger Automatisierungen, um die Wartung zu einem Kinderspiel zu machen, könnten in weniger als 2 Stunden erledigt sein.

Ich freue mich darauf, all die tollen Websites zu sehen, die Sie erstellen werden! 🤩