Rechtliche Aspekte, Hosting und Ausblick
Welche rechtlichen Aspekte muss man bei einer Website beachten? Was gehört in ein Impressum rein? Und vor allem: Wie bekomme ich meine Website eigentlich ins Internet?
Wiederholung
Beim letzten Mal haben wir uns mit den verbleibenden Kernaspekten von CSS beschäftigt: Media-Queries für Responsivität und Progressive Enhancement, Pseudo-Elemente und -Klassen, Positionierung, Transformierung, Z-Index und zu guter Letzt Animationen und Transitions.
Wie definiere ich eine Media-Query?
Eine Media-Query kann innerhalb bestimmter HTML-Elemente wie <link> oder <script> als ein media-Attribut oder direkt in CSS als Teil der @media At-Regel definiert werden. Sie besteht aus einem (optionalen) Medientyp wie z.B. screen und einem oder mehreren Media-Features, z.B. (prefers-color-scheme: dark) oder (width < 40rem), die mit den Schlüsselworten and oder or verknüpft sind.
Muss ich in einer Media-Query alle CSS-Eigenschaften noch einmal auflisten?
Nein, innerhalb eines Stylesheets, das nur bei bestimmten Voraussetzungen geladen wird, oder innerhalb einer @media-Regel, müsst ihr nur die CSS-Eigenschaften eintragen, die ihr überschreiben möchtet.
Wie wähle ich in CSS ein Element aus, das gehovert wird?
Dafür verwendet ihr die :hover Pseudo-Klasse, z.B. a:hover für alle gehoverten Links. Weitere nützliche Pseudo-Klassen sind :focus-visible sowie :first-child und :last-child.
Generell werden Pseudo-Klassen dafür verwendet, HTML-Elemente in einem bestimmten Zustand auszuwählen.
Welche CSS-Eigenschaft muss ich setzen, damit die ::before- und ::after-Pseudo-Elemente im HTML eingefügt werden?
::before und ::after werden nur im DOM eingefügt, wenn sie eine content-Eigenschaft haben, die einen anderen Wert als none hat. Häufig verwendet man hier content: '';, wenn man die Pseudo-Elemente nicht für Inhalt, sondern für Styling-Zwecke benötigt.
Was passiert, wenn ein Element mit position: absolute; sich in einem Element mit position: relative; befindet?
Ein Element mit position: absolute; wird aus dem normalen Positionierungsfluss des Browsers genommen. Deshalb reserviert der Browser auch keinen Platz mehr dafür. Die Angaben in top, left, right und bottom beziehen sich dann auf die Padding-Box des nächsten Eltern-Elements, das eine position-Eigenschaft hat, die nicht static ist – oder auf den Viewport, falls das Element kein positioniertes Eltern-Element besitzt.
Das bedeutet, wenn ein Element position: relative hat, wird das Kind-Element mit position: absolute relativ zur Position des Eltern-Elements positioniert.
Wann sollte man Transformierungen Änderungen an der Position und Höhe/Breite eines Elements vorziehen?
Die Eigenschaften transform, translate, rotate und scale sind (zusammen mit opacity) für Animationen optimiert. Außerdem verändern sie nie die Position anderer Elemente im Dokument, was sie perfekt für Animationen und temporäre Veränderungen an einem Element macht.
Was ist der wesentliche Unterschied zwischen einer Animation und einer Transition?
Animationen bestehen aus einer Reihe von Keyframes, die über einen gewissen Zeitraum abgespielt werden. Damit lassen sich komplexe Bewegungen und Veränderungen animieren und auch unendlich wiederholen.
Transitions sind einfacher, sie animieren einfach die Änderung zwischen zwei Werten. Dafür müssen nicht extra Keyframes definiert werden, der Browser animiert implizit alle Werte, die sich zwischen Zustand A und Zustand B verändert haben.
Rechtliche Anforderungen einer Website
Disclaimer: Ich bin kein Anwalt. Die Rechtslage kann sich jederzeit ändern und ihr seid selbst dafür verantwortlich, gängiges Recht zu befolgen. Dennoch hoffe ich, dass euch diese Richtlinien von Nutzen sein können.
Das Impressum
Nur Websites, die rein persönlich oder familiär benutzt werden, sind von der Impressumspflicht entbunden, d.h. ihr braucht zwingend ein Impressum! Euer Portfolio dient nämlich indirekt einem kommerziellen Zweck, da ihr damit eine Arbeitsstelle oder sogar Kunden für euer Gewerbe erreichen möchtet.
Das Impressum muss unter dem Menüpunkt „Impressum“ oder „Kontakt“ aufgeführt werden und muss zu jedem Zeitpunkt mit maximal zwei Klicks erreichbar sein. Erstellt also in jedem Fall ein „impressum.html“-Dokument und verlinkt es auf jeder eurer Seiten. Der Footer bietet sich hierfür an.
Diese Informationen müssen mindestens enthalten sein:
Euer voller Name und eure Anschrift (keine Postfächer!)
Eure E-Mail-Adresse und Telefonnummer oder eine vergleichbare Methode zur unmittelbaren elektronischen Kontaktaufnahme
Es kann sein, dass ihr weitere Informationen angeben müsst, wie z.B. eure Umsatzsteueridentifikationsnummer etc. Hierfür bitte die unten verlinkten Seiten ansehen und / oder im Zweifel einen Anwalt fragen.
Quellen:
Die Datenschutzerklärung
Daten über die Besucherinnen und Besucher eurer Website zu sammeln, z.B. über Google Analytics, ist an sich kein Problem, aber Nutzerinnen und Nutzer müssen über diese Sammlung informiert werden und ihr aktiv zustimmen!
Außerdem benötigt ihr auf eurer Website zwingend eine gültige Datenschutzerklärung, die auf euren persönlichen Fall zugeschnitten ist. Es gibt im Web Generatoren dafür (z.B. bei eRecht24), aber oftmals sind diese Erklärungen für eure Verwendungszwecke zu ausführlich.
Wie euer Impressum sollte eure Datenschutzerklärung sich in einem separaten HTML-Dokument, z.B. „datenschutz.html“, befinden und über einen eigenständigen und klaren Link von jeder Seite aus erreichbar sein. Auch hierfür bietet sich der Footer eurer Website an.
Selbst wenn ihr keine Daten sammelt, müsst ihr das dem Nutzer mitteilen – und beachten, dass alles, was ihr extern auf eure Seite einbindet (Social Buttons, Videos, Fonts etc.), wahrscheinlich Daten von euren Nutzern sammelt, also aufpassen und es am besten ganz vermeiden!
Quellen:
Alle lieben Cookies
Als „Cookies“ werden allgemein alle Daten bezeichnet, die die Website im Browser des Nutzers hinterlegt – darunter auch die „echten“ Cookies. Das sind kleine Textdateien, die Informationen speichern, z.B. um euch eindeutig identifizieren zu können. Auch der Session-Storage, Local-Storage und die Browser-Datenbank IndexedDB fallen unter diesen Sammelbegriff.
Falls ihr selbst, oder eine andere Seite, die ihr z.B. über eine Videoeinbettung eingebunden habt, Cookies setzt, müsst ihr einen Cookie-Banner auf eurer Seite anzeigen. Dieser informiert den Nutzer über diese Cookies und gibt ihm eine Möglichkeit, sie zu blockieren, bevor die Cookies gesetzt werden. Dieser Banner sollte auch Links zu eurem Impressum und eurer Datenschutzerklärung beinhalten.
Die einzige Ausnahme: Cookies, die zwingend notwendig sind, damit eure Website ihren Zweck erfüllen kann, dürfen auch ohne vorherige Zustimmung gesetzt werden. Beruft euch aber nicht leichtfertig auf diese Ausnahme, gerade für eure Portfolio-Websites wird sie höchstwahrscheinlich nicht zutreffen.
Also speichert am besten keine Informationen im Browser zwischen und kommuniziert das auch so in eurer Datenschutzerklärung!
Quellen:
Lizenzen
Ihr benötigt für alles, was ihr auf eure Websites hochladet, Verwendungs- und Lizenzrechte. Es ist extrem wichtig, dass ihr darauf achtet und hier besonders vorsichtig seid – einen Lizenzrechtsstreit sollte sich niemand antun müssen.
Hier sind einige Aspekte, die ihr beachten solltet:
Viele kommerzielle Fonts erfordern eine separate Web-Lizenz, damit ihr sie auf eurer Website einbinden und „mitliefern“ dürft – verwendet deshalb besser freie Fonts, die unter einer Lizenz wie der OFL stehen, z.B. von Fontsource.
Sofern ihr Fotos auf eurer Website veröffentlicht, achtet darauf, dass ihr die Zustimmung der abgebildeten Personen besitzt und die Erlaubnis habt, Produkte und Gebäude abzubilden.
Bindet keine Inhalte (Text, Fotos, Musik, Videos) von anderen Quellen ein, es sei denn, ihr habt die explizite (schriftliche) Erlaubnis, das zu tun.
Passt auch unbedingt mit Marken auf! Verwendet keine eingetragenen Marken im Domainnamen und keine Logos von anderen Firmen auf eurer Website – außer ihr habt dazu eine explizite schriftliche Erlaubnis.
Wie man eine Website ins Web bekommt
Um eure Website für die Öffentlichkeit zugänglich zu machen, benötigt ihr drei Bestandteile: eine Domain, einen Webspace und ein SSL-Zertifikat.
Domains
Eine Domain ist eine für Menschen verständliche Adresse für einen Server im World Wide Web. Eigentlich sind Server nämlich nur mit ihren IP-Adressen, also z.B. 172.217.20.238, erreichbar.
Die meisten Menschen können sich Zahlenfolgen aber nicht so gut merken, deshalb können diesen IP-Adressen Web-Domains zugeordnet werden, z.B. google.com. Ihr könnt euch das wie ein riesiges Telefonbuch vorstellen, in dem für jede Domain eingetragen ist, auf welchen Server sie zeigt. Dieses Sytem nennt sich DNS, kurz für Domain Name System.
Wichtig hierbei ist, dass mehrere Domains auf die selbe IP-Adresse, also den selben Server und somit die selbe Website, zeigen können. Ihr könnt euch also ruhig sowohl die .de- als auch die .com-Version eurer Domain holen, falls ihr nicht nur deutsche, sondern auch internationalie Besucherinnen und Besucher ansprechen möchtet.
Domains können nicht einmalig gekauft werden, stattdessen „mietet“ ihr sie, indem ihr in regelmäßigen Abständen Gebühren dafür zahlt, in den meisten Fällen jährlich. Ihr könnt eure Domain frei wählen, dürft aber keine eingetragen Marken verletzen und solltet keine Umlaute verwenden. Auch bestimmte Zeichen wie Leerzeichen sind verboten. Es bietet sich an, euren eigenen Namen zu verwenden, z.B. max-mustermann.de.
Ich selbst kaufe meine Domains gerne bei INWX, aber es gibt noch viele weitere Anbieter auf dem Markt. Der typische Preis für eine .de-Domain liegt zwischen 4 und 6 Euro im Jahr, bei .com-Domains zwischen 12 und 16 Euro.
Zum Bestehen des Kurses müsst ihr euch aber keine Domain kaufen! Hostinganbieter geben euch meistens eine einfache Domain für euer Projekt, z.B. 123xyz.netlify.app mit, die für die Abgabe vollkommen ausreichend ist.
Hosting
Die Domain allein bringt euch noch nicht weit, ihr braucht auch einen Server auf den ihr eure Domain zeigen lassen könnt. Da ein kompletter eigener Server für eine einfache HTML-Website völlig Overkill wäre, solltet ihr euch stattdessen etwas Speicherplatz auf einem Server buchen. Diesen Speicherplatz nennt man auch Web-Space. Weil eure Dateien auf diesem Speicher „zu Gast“ auf dem Server sind, nennt man diesen Prozess auch Hosting.
Es gibt sehr viele verschiedene Hosting-Anbieter, die euch am liebsten Gott und ihre Großmutter verkaufen möchten. Glücklicherweise könnt ihr aber einfache Seiten wie eure inzwischen teilweise sogar kostenlos hosten lassen. Im Wesentlichen sind für euch zwei Pakete relevant: reines Web-Hosting (also nur Speicherplatz) oder Domain + Web-Hosting + Mail-Account.
Ich persönlich bin kein Freund davon, eine Domain als Teil eines Pakets zu erwerben, weil diese dann teilweise an das Paket gebunden ist. Dadurch wird ein Wechsel zu einem anderen Anbieter erschwert, auch wenn das Angebot anfangs besonders günstig zu sein scheint. Stattdessen trenne ich Domain und Hosting also lieber.
Einen Mail-Account benötigt ihr nur, wenn ihr eigene E-Mail-Konten für eure Domain anlegen möchtet, z.B. kontakt@example.org. Das wirkt sehr professionell, ist aber für diesen Kurs nicht notwendig.
Mein aktueller Favorit für kostenloses Hosting ist Netlify. Beachtet aber bitte, dass es sich hierbei um eine amerikanische Firma handelt und der kostenfreie Plan mit einigen Einschränkungen, z.B. bei der verfügbaren Bandbreite, einherkommt.
Falls ihr stattdessen lieber bei einem deutschen Anbieter hosten möchtet, kann ich euch Uberspace ans Herz legen. Hier hoste ich inzwischen fast alle meine Projekte und bin rundum zufrieden – weil der Support top ist, man extrem viel lernen kann, wenn man möchte, und sehr flexibel ist. Denn einfaches Web-Hosting ist bei Uberspace nur der Anfang. Man bekommt bei ihnen nämlich einen gemanagten virtuellen Server, auf dem man alles Mögliche machen kann. Oh, und E-Mail-Hosting ist auch dabei. All das für einen frei wählbaren Preis von 6–12 € im Monat.
Natürlich gibt es noch viele, viele weitere Anbieter, z.B. Hetzner, Surge, Vercel, 1&1, oder Strato, um nur eine Handvoll zu nennen. Wichtig ist: Lasst euch nicht über den Tisch ziehen, ihr braucht nur Speicherplatz und Bandbreite, keinen unnötigen Schnickschnack.
SSL
Der letzte Teil der Gleichung ist ein SSL-Zertifikat, denn heutzutage ist es sehr wichtig, dass eure Website über eine verschlüsselte Verbindung, also via https statt http, erreichbar ist. Stark vereinfacht gesagt sorgt SSL dafür, dass sich niemand zwischen euren Computer und den Webserver schleusen und eure Kommunikation mit dem Internet mitlesen kann.
Damit SSL für eure Domain aktiviert werden kann, benötigt ihr ein SSL-Zertifikat, das euch eure Hostinganbieter auch liebend gerne verkaufen möchten. Inzwischen gibt es aber auch eine kostenlose Lösung: Let’s Encrypt. Achtet also darauf, dass ihr eure Seite bei einem Anbieter hostet, der euch ein automatisch aktualisierendes Let’s-Encrypt-Zertifikat für eure Domain mitgibt (wie z.B. bei Netlify und Uberspace).
Habt ihr euer Hosting, eine Domain und ein SSL-Zertifikat, müsst ihr nur noch die Domain mit dem Webspace verbinden und eure Dateien hochladen, und eure Website ist online. 🥳
Ausblick für die Zukunft
Ich hoffe, ihr konntet im Verlauf dieses Kurses einiges lernen und für euch mitnehmen. Ich weiß, es waren sehr viele Informationen. Trotzdem haben wir gerade mal an der Oberfläche des Eisbergs gekratzt, der Web-Entwicklung ist.
Falls euch das Thema Spaß gemacht hat und ihr nach der Entwicklung eurer Abgabe weiter lernen möchtet, habe ich hier einige fortgeschrittene Themen zusammengestellt:
Für jede Seite immer das gleiche HTML zu schreiben, ist nervig und fehleranfällig. Deshalb gibt es Static-Site-Generatoren wie Astro, Hugo, Vuepress, 11ty, u.v.m.
Es ist auch echt anstrengend, die Inhalte einer Website immer mit einem Code-Editor wie Zed verändern zu müssen. Deshalb gibt es Content-Management-Systeme wie Mattrbld, WordPress, Drupal, hygraph, u.v.m.
Damit ihr im Web so richtig durchstarten könnt, solltet ihr Programmieren lernen, und zwar mit JavaScript, z.B.
mit diesem Buch: Eloquent Javascript
mit dieser Website: javascript.info
Am besten lernt ihr aber immer, indem ihr Dinge einfach ausprobiert und selbst macht. Gerade während des Studiums habt ihr mehr als genug Zeit, euch kleine Projekte zusammenzustellen, in denen ihr die verschiedensten Aspekte des Webdesigns und der Web-Entwicklung ausprobieren und üben könnt. Ich hoffe, dieser Kurs konnte in euch die Lust dazu wecken.
Praxis
In der Praxis für die heutige Stunde geht es darum, eine Website online zu bringen. Hierfür zeige ich euch zwei Wege, einmal mit Netlify und einmal mit Uberspace – es ist euch überlassen, für welchen ihr euch bei der Abgabe entscheidet.
Hosting mit Netlify
Das Hosting via Netlify könnte einfacher nicht sein: Ihr erstellt euch auf netlify.com{ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" } einen kostenlosen Account und könnt direkt loslegen, indem ihr den Ordner mit eurer Website via Drag-and-Drop auf das entsprechende Feld im Netlify-Dashboard zieht.
Sobald ihr euren Ordner hochgeladen habt und Netlify die Daten verarbeiten konnte, landet ihr in einem Dashboard für euer Projekt. Hier seht ihr die Domain, die Netlify dem Projekt automatisch zugeordnet hat und könnt es direkt öffnen.
Wollt ihr eure Website aktualisieren, zieht ihr hier wieder den Ordner in den gestrichelten Bereich und eine neue Version wird veröffentlicht.
Ihr könnt eurem Projekt über den Button oben rechts eine eigene Domain zuweisen, falls ihr euch eine gekauft habt. Andernfalls könnt ihr auch über den Reiter „Project configuration“ das Projekt umbenennen und so die Domain ändern, die Netlify eurem Projekt zugewiesen hat.
Wichtig: falls ihr eure eigene Domain für eure Netlify-Seite einrichten möchtet, müsst ihr nicht die Domain zu Netlify importieren. Es reicht, wenn ihr die DNS-Einträge bei eurem Domain-Registrar auf die Werte einstellt, die Netlify euch zeigt.
Der Vorteil von Netlify ist definitiv die Einfachheit des Hochladens und natürlich, dass es kostenlos ist. Allerdings habt ihr auch Einschränkungen, was die Anzahl der Aufrufe eurer Website, sowie die Bandbreite und Anzahl der Veröffentlichungen angeht.
Netlify gibt euch jeden Monat 300 Credits. Ein Upload kostet 15 Credits, 10.000 Aufrufe jeweils 3 Credits, jedes Gigabyte Bandbreite 10 Credits. Je nachdem wie gut eure Website optimiert ist und wie viele Aufrufe ihr bekommt kann es also passieren, dass ihr an diese Limits stößt – dann müsst ihr zahlen, oder eure Website wird nicht mehr angezeigt.
Realistisch gesehen werdet ihr mit euren Portfolios vermutlich nicht an dieses Limit stoßen. Wenn ihr also eine schnelle und einfache Lösung wollt und es euch nicht stört, dass Netlify eine amerikanische Firma ist und somit das Hosting außerhalb der EU liegt, ist es eine Option.
Hosting mit Uberspace
Alternativ möchte ich euch Uberspace ans Herz legen. Das ist ein deutscher Hosting-Anbieter, der sehr sozial aufgestellt ist und euch für einen sehr fairen Preis ein tolles Angebot bietet.
Falls ihr Uberspace verwenden möchtet, könnt ihr euch unter uberspace.de{ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" } einen Account erstellen. Hierbei gebt ihr auch gleich einen Namen für euren neuen „Asteroid“ ein, so bezeichnet Uberspace die virtuellen Server, die ihr dort erhaltet. Dieser Name ist gleichzeitig der Nutzername eures Accounts auf dem Server und die automatische Domain, die ihr von Uberspace zugewiesen bekommt.
Es dauert einen Moment, bis euer Asteroid eingerichtet wird, aber sobald das geschehen ist, bekommt ihr eine Bestätigungsmail und könnt euch einloggen. Das Uberspace-Dashboard zeigt euch verschiedene Reiter zu Themen wie Datenblatt, Zugänge und mehr.
Hier könnt ihr einige Basisfunktionen für euren Asteroiden konfigurieren, z.B. eure eigene Domain aufschalten, E-Mail-Postfächer anlegen und euren Wunschpreis festlegen sowie euer Guthaben aufladen.
Wichtig für uns sind vor allem zwei Reiter: Unter „Datenblatt“ könnt ihr nachsehen, auf welchem Server euer Asteroid angelegt wurde, z.B. stardust.uberspace.de. Diese Information wird gleich wichtig, wenn ihr euch mit dem Server verbindet, um eure Website hochzuladen.
Damit ihr euch auf dem Server einloggen könnt, müsst ihr aber erst ein Passwort für den Asteroid festlegen. Das macht ihr unter dem Reiter „Zugänge“. Habt ihr das getan, seid ihr bereit für den Upload.
Allerdings kann man bei Uberspace nicht einfach wie bei Netlify einen Ordner in den Browser ziehen, stattdessen benötigt ihr (wie bei den meisten anderen Hosting-Anbietern auch) ein FTP-Programm. Hier gibt es einige zur Auswahl, ich nehme für dieses Beispiel „Cyberduck{ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" }“, das es für macOS und Windows gibt.
Habt ihr die App installiert und gestartet, könnt ihr mit dem Button „neue Verbindung“ eine Verbindung zu eurem Asteroiden aufbauen:
Ihr benötigt zwingend eine SFTP (nicht FTP) Verbindung zu eurem Asteroid, wählt also SFTP (SSH Verbindung) aus dem Dropdown aus und stellt dann die Adresse des Servers, auf dem euer Asteroid liegt, im Feld „Server“ ein.
„Benutzername“ ist der Name eures Asteroiden, den ihr bei der Registrierung vergeben habt, „Passwort“ das Passwort, das ihr unter „Zugänge“ eingestellt habt – nicht das Passwort eures Uberspace-Accounts!
Mit einem Klick auf „Verbinden“ sollte sich das Dialogfenster schließen und eine Verbindung zu eurem Asteroid aufgebaut werden. Je nach Qualität eures Netzwerkzugangs kann das einige Sekunden dauern, aber wenn die Zugangsdaten stimmen, solltet ihr schnell eine Liste der Dateien auf eurem Asteroid sehen:
Der wichtigste Ordner hier ist für euch „html“ – dort ladet ihr die Dateien eurer Website hoch. Macht das am besten, indem ihr im Finder (oder Explorer auf Windows) den Ordner mit eurer Website öffnet und alle darin liegenden Dateien auswählt und in das Cyberduck-Fenster zieht.
Achtet dabei unbedingt darauf, dass ihr die Dateien in den Ordner „html“ zieht! Überprüfen könnt ihr das, indem ihr nach dem Upload den Ordner einklappt. Wenn eure Dateien dann nicht mehr sichtbar sind, habt ihr richtig gezielt. 😉
Um eure Website aufzurufen, geht ihr auf name-des-asteroid.uber.space. Wollt ihr eine neue Version hochladen, könnt ihr jederzeit via Cyberduck einzelne (oder alle) Dateien austauschen, oder sie sogar direkt bearbeiten.
Wie ihr seht, ist der Prozess bei Uberspace etwas umständlicher – aber auch näher an der Realität. Ich bin persönlich ein großer Fan von Uberspace, weil ihr hier für einen sehr fairen Preis (30 Tage kostenlos, dann 6€ im Monat, aber frei anpassbar, falls nötig!) nicht nur einen Webspace und E-Mail-Postfächer bekommt, sondern auch tolle Dokumentation und viel Raum zum Wachsen und Experimentieren erhaltet.
Denn auf einem Uberspace könnt ihr im Gegensatz zu Netlify alles Mögliche installieren: von einem Content-Management-System, über euren eigenen Analytics-Dienst, bis hin zu Anwendungen wie Nextcloud und vieles mehr. Schaut am besten mal im Handbuch{ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" } und dem Lab{ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" } vorbei, um einen Eindruck von all den Möglichkeiten zu bekommen.
Natürlich habt ihr auch bei Uberspace Einschränkungen, was den Speicherplatz und die Bandbreite angeht, aber sie sind deutlich großzügiger gesetzt als im kostenlosen Netlify-Paket. Falls ihr also die geringfügig höhere Komplexität und die monatlichen Kosten nicht als Dealbreaker anseht, würde ich euch ans Herz legen, eure Website bei Uberspace zu hosten.
Wie bereits angemerkt ist es für die Abgabe egal, wo ihr hostet – Hauptsache, die Website ist online erreichbar. 😉