WEB · CLOUD · AZURE · DNS · CI/CD
Meine Portfolio-Website
Entwicklung und Betrieb einer eigenen Portfolio-Website mit HTML, CSS und JavaScript sowie Hosting über Microsoft Azure. Eigene Domain, Custom Domains, DNS-Verwaltung über Cloudflare und automatisiertes Deployment über GitHub Actions.
Projektbeschreibung
Diese Portfolio-Website wurde von mir vollständig selbst entwickelt und dient gleichzeitig als Präsentation meiner Kenntnisse, Projekte und praktischen Erfahrungen im Bereich Softwareentwicklung und IT-Infrastruktur.
Neben der eigentlichen Entwicklung der Website war insbesondere der technische Betrieb ein Bestandteil des Projekts. Die Website wird unter meiner eigenen Domain mschott.dev bereitgestellt und über Microsoft Azure gehostet.
Dadurch umfasst das Projekt nicht nur HTML, CSS und JavaScript, sondern auch Themen wie Cloud Hosting, Domainverwaltung, DNS, TLS/SSL, Custom Domains, Deployment und Versionsverwaltung.
Die Website wird kontinuierlich weiterentwickelt. Neue Projekte, technische Experimente und weitere Bereiche wie das vLab werden schrittweise integriert.
Bestandteile der Website
Portfolio
Zentrale Darstellung meiner beruflichen Qualifikationen, technischen Schwerpunkte und persönlichen Projekte.
Projektübersicht
Eigene Projekte werden auf separaten Detailseiten mit technischen Informationen, Screenshots und Quellcode vorgestellt.
Skills
Übersicht meiner Kenntnisse in Softwareentwicklung, Microsoft-Technologien, Cloud und IT-Infrastruktur.
vLab
Dokumentation meiner virtuellen Testumgebung mit Hyper-V, Windows Server und Windows 11-Clients.
Kontakt
Kontaktmöglichkeit über ein eigenes Formular mit Anbindung an das Newsletter-/Backend-System.
Newsletter
Integration eines eigenen Newsletter-Systems mit Double-Opt-in, Azure Functions, Azure SQL und SendGrid.
Projekt-Einblicke
Ausgewählte Screenshots zeigen die Website selbst sowie verschiedene technische Komponenten des Deployments und der Infrastruktur.
Eigene Domain und DNS
Die Website wird unter der eigenen Domain mschott.dev betrieben. Die Domainverwaltung und die DNS-Konfiguration bilden einen eigenen technischen Bestandteil des Projekts.
Für die Verbindung zwischen Domain und Azure werden entsprechende DNS-Einträge bei Cloudflare verwaltet.
Dabei werden unter anderem CNAME- bzw. Verifizierungs-Einträge verwendet, um die Domain mit den Azure-Diensten zu verbinden.
Zusätzlich werden Subdomains für unterschiedliche Komponenten meiner Projekte eingesetzt. Dadurch lassen sich Frontend und Backend eines Projekts technisch voneinander trennen. So wird zum Beispiel das Frontend meines GitHub-Newsletters unter newsletter.mschott.dev betrieben, das zugehörige Backend unter app.newsletter.mschott.dev.
Hosting mit Microsoft Azure
Die Portfolio-Website wird über Azure Static Web Apps bereitgestellt.
Dadurch kann die statische Website direkt aus dem Quellcode-Repository deployed werden. Azure übernimmt dabei die Bereitstellung der Website und stellt die benötigte Infrastruktur für den öffentlichen Zugriff zur Verfügung.
Zusätzlich können eigene Domains mit der Azure Static Web App verbunden werden. Dadurch ist die Website nicht ausschließlich über die von Azure bereitgestellte Standardadresse erreichbar.
Quellcode
HTML · CSS · JavaScript · Git
GitHub
Repository · Versionsverwaltung
GitHub Actions
Build · Deployment
Azure Static Web Apps
Hosting · Custom Domain
Custom Domains und HTTPS
Eine eigene Domain lässt sich bei einem beliebigen Registrar einrichten, in meinem Fall bei INWX. Diese Domain musste bei Azure registriert und mit einem Zertifikat abgesichert werden.
Die von Azure bereitgestellte Standardadresse wird dadurch durch die eigene Domain ersetzt. Die DNS-Einträge bei Cloudflare und die Domain-Verifizierung müssen dabei korrekt aufeinander abgestimmt werden.
Für den öffentlichen Zugriff wird die Website verschlüsselt über HTTPS bereitgestellt. Das Zertifikat für die Custom Domain wird dabei über die Azure-Infrastruktur bereitgestellt.
Deployment und CI/CD
Der Quellcode der Website wird mit Git versioniert und in einem GitHub-Repository verwaltet.
Änderungen am Projekt können über GitHub Actions automatisiert verarbeitet und anschließend auf die Azure Static Web App deployed werden.
Dadurch entsteht ein einfacher Continuous-Deployment-Prozess: Eine Änderung am Quellcode wird in GitHub gespeichert und anschließend automatisiert in die produktive Website übernommen.
Technische Architektur
Frontend
HTML · CSS · JavaScript
Versionsverwaltung
Git · GitHub
Deployment
GitHub Actions
Hosting
Azure Static Web Apps
Domain
Cloudflare DNS · Custom Domain · HTTPS
Die Website verbindet klassische Frontend- Entwicklung mit Cloud Hosting und automatisierten Deployment-Prozessen. Die Domain wird unabhängig vom Hosting über DNS verwaltet und mit der Azure- Infrastruktur verbunden.
Was ich dabei gelernt habe
- Entwicklung einer vollständigen, responsiven Website mit HTML und CSS
- Strukturierung einer größeren Website mit mehreren eigenständigen Seiten
- Entwicklung wiederverwendbarer CSS- Komponenten und Layouts
- Versionsverwaltung mit Git und GitHub
- Deployment einer Website über Microsoft Azure
- Einrichtung und Verwaltung einer eigenen Custom Domain
- Konfiguration von DNS-Einträgen über Cloudflare
- Verbindung einer eigenen Domain mit Azure-Diensten
- Automatisiertes Deployment über GitHub Actions
- Zusammenspiel von Domain, DNS, Cloud Hosting und HTTPS
Quellcode
Der vollständige Quellcode dieser Portfolio-Website ist auf GitHub verfügbar. Dort können die HTML-, CSS- und JavaScript-Dateien sowie die Struktur des Projekts eingesehen werden.