Webhosting: Unterschied zwischen den Versionen
Codica (Diskussion | Beiträge) |
Codica (Diskussion | Beiträge) |
||
(20 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 3: | Zeile 3: | ||
* Siehe [[Dynamisches DNS]]. | * Siehe [[Dynamisches DNS]]. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== Plattformanbieter == | == Plattformanbieter == | ||
Zeile 26: | Zeile 19: | ||
==== Provider ==== | ==== Provider ==== | ||
− | |||
Zeile 95: | Zeile 87: | ||
| 21.12.2008 | | 21.12.2008 | ||
|} | |} | ||
+ | |||
+ | * https://ackermann-edv.de/v-server/, ab 2,50 € pro Monat, persönlicher Support meist durch Herrn Ackermann selbst | ||
* http://www.netcup.de/bestellen/produkt.php?produkt=85 bietet unbegrenzten Traffic, 20 GB Speicherplatz und 200 MB MindestRAM für 3,50 € im Monat (Stand: 1.8.2009) | * http://www.netcup.de/bestellen/produkt.php?produkt=85 bietet unbegrenzten Traffic, 20 GB Speicherplatz und 200 MB MindestRAM für 3,50 € im Monat (Stand: 1.8.2009) | ||
Zeile 137: | Zeile 131: | ||
* Zum Markenrecht siehe | * Zum Markenrecht siehe | ||
** http://blog-markenrecht.de/ | ** http://blog-markenrecht.de/ | ||
+ | |||
+ | * Domain-Provider gibt es viele, | ||
+ | ** z.B. | ||
+ | *** https://ackermann-edv.de/domains/ | ||
+ | ** Suchmaschinen für Domain-Provider: | ||
+ | ** https://www.hostsuche.de/suche_domain.php | ||
== Webserver einrichten == | == Webserver einrichten == | ||
Zeile 173: | Zeile 173: | ||
* Right Media | * Right Media | ||
+ | === Werbung technisch umsetzen === | ||
+ | |||
+ | Das [[MediaWiki]]-System erlaubt das Hinzufügen von Werbung, z.B. [[Google AdSense]]. | ||
+ | |||
+ | Siehe auch | ||
+ | * [http://www.elektronikinfo.de/pc/geldverdienen.htm Geldverdienen mit der eigenen Homepage] | ||
+ | * [http://contextualads.yahoo.net/features.php Yahoo Bing Ads Network] ([http://www.techulator.com/resources/8308-Compare-Google-AdSense-Yahoo-Bing-Ad-Network.aspx angeblich nur für Premium Websites]) | ||
+ | |||
+ | |||
+ | === Werbung ohne Cookies === | ||
+ | |||
+ | Siehe | ||
+ | * https://pyngu.com/webseite-ohne-cookie-banner/ | ||
== WebServer-Software == | == WebServer-Software == | ||
Zeile 216: | Zeile 229: | ||
* [http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil CSS-best practices] | * [http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil CSS-best practices] | ||
* https://every-layout.dev/ | * https://every-layout.dev/ | ||
+ | * https://cssreference.io/ | ||
+ | |||
+ | ==== Farbpaletten ==== | ||
+ | |||
+ | * [https://coolors.co coolors.co] | ||
==== Tooltips ==== | ==== Tooltips ==== | ||
Zeile 232: | Zeile 250: | ||
* https://purecss.io/ - minimales CSS, unterstützt von Yahoo | * https://purecss.io/ - minimales CSS, unterstützt von Yahoo | ||
* https://milligram.io/ | * https://milligram.io/ | ||
− | * https://bulma.io/ - nur CSS, kein JavaScript | + | * [https://bulma.io/ Bulma] - nur CSS, kein JavaScript |
+ | ** [https://dfee.github.io/rbx rbx] integriert Bulma mit [[React]]; rbx scheint nicht mehr aktualisiert zu werden | ||
+ | ** https://github.com/couds/react-bulma-components - Integration mit [[React]] | ||
+ | ** https://jenil.github.io/bulmaswatch/help/ - Themes für Bulma | ||
* https://tailwindcss.com/ | * https://tailwindcss.com/ | ||
** https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation | ** https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation | ||
+ | |||
+ | ===== Ant.Design ===== | ||
+ | |||
+ | Siehe | ||
+ | * https://ant.design/docs/react/introduce | ||
+ | |||
+ | ====== Einbindung in React / Typescript-Projekt ====== | ||
+ | |||
+ | Ant.Design wird mit | ||
+ | npm install --save antd | ||
+ | dem Create-React-App-Projekt hinzugefügt. | ||
+ | |||
+ | Im Code muss man einerseits das CSS einbinden: | ||
+ | import "antd/dist/antd.css"; | ||
+ | |||
+ | Andererseits benötigt man auch den JavaScript-Code, z.B. für das Input-Element: | ||
+ | import {Input} from "antd"; | ||
+ | ... | ||
+ | return (<Input placeholder="Hallo" />); | ||
+ | ... | ||
===== Bootstrap ===== | ===== Bootstrap ===== | ||
Zeile 252: | Zeile 293: | ||
* [http://www.mashup-template.com/ Mashup Template] | * [http://www.mashup-template.com/ Mashup Template] | ||
+ | ====== Integration mit Nextjs ====== | ||
+ | |||
+ | Siehe [[Nextjs]] | ||
+ | |||
+ | * https://www.kindacode.com/article/how-to-correctly-use-bootstrap-5-in-next-js/ | ||
+ | * https://feralamillo.medium.com/bootstrap-in-create-react-app-typescript-1a0365fdd111 | ||
+ | * https://stackoverflow.com/questions/69527455/could-not-find-a-declaration-file-for-module-bootstrap-dist-js-bootstrap | ||
+ | |||
+ | npm install --save-dev sass | ||
+ | npm install --save bootstrap | ||
+ | |||
+ | In src/styles/globals.scss importiere Bootstrap-SCSS | ||
+ | @import '~bootstrap/scss/bootstrap.scss'; | ||
+ | |||
+ | Die Tilde ~ ist dabei eine Kurzform für das node_modules/-Verzeichnis. | ||
+ | |||
+ | In src/pages/_app.tsx importiere globals.scss und Bootstrap.js | ||
+ | <pre> | ||
+ | import "../styles/globals.scss"; | ||
+ | import type { AppProps } from "next/app"; | ||
+ | import { useEffect } from "react"; | ||
+ | |||
+ | function MyApp({ Component, pageProps }: AppProps) { | ||
+ | useEffect(() => { | ||
+ | |||
+ | //import("bootstrap/dist/js/bootstrap"); | ||
+ | typeof document !== undefined | ||
+ | ? require('bootstrap/dist/js/bootstrap') | ||
+ | : null | ||
+ | }, []); | ||
+ | return <Component {...pageProps} />; | ||
+ | } | ||
+ | |||
+ | export default MyApp; | ||
+ | </pre> | ||
+ | |||
+ | ====== Themes ====== | ||
* Im Wesentlichen kostenpflichtige Themes finden sich auch auf [https://bootstrapmade.com/ BootstrapMade.com] | * Im Wesentlichen kostenpflichtige Themes finden sich auch auf [https://bootstrapmade.com/ BootstrapMade.com] | ||
** https://bootstrapmade.com/demo/MyResume/ | ** https://bootstrapmade.com/demo/MyResume/ | ||
Zeile 257: | Zeile 335: | ||
** https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/ | ** https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/ | ||
− | |||
− | https://www.noorix.com.au/blog/how-to/static-website-hugo-bootstrap-serverless-2/ | + | |
+ | Bootstrap-Themes mit MIT-Lizenz finden sich auch auf | ||
+ | * https://themes.gohugo.io/ | ||
+ | ** https://themes.gohugo.io/theme/hugo-scroll/ | ||
+ | ** https://www.noorix.com.au/blog/how-to/static-website-hugo-bootstrap-serverless-2/ | ||
====== Navigationsleiste, die auf Scrollen reagiert ====== | ====== Navigationsleiste, die auf Scrollen reagiert ====== | ||
* https://startbootstrap.com/template/scrolling-nav benutzt Bootstrap's ScrollSpy | * https://startbootstrap.com/template/scrolling-nav benutzt Bootstrap's ScrollSpy | ||
+ | * [https://blog.devgenius.io/diy-scrollspy-4f1c270cafaf Anleitung für ScrollSpy auf Basis von React] | ||
Siehe auch - ohne Bootstrap -: https://css-tricks.com/sticky-smooth-active-nav/ | Siehe auch - ohne Bootstrap -: https://css-tricks.com/sticky-smooth-active-nav/ | ||
Zeile 335: | Zeile 417: | ||
* Typo3 | * Typo3 | ||
* [http://www.silverstripe.com/ Silverstripe], ein [[Open Source]]-[[CMS]] | * [http://www.silverstripe.com/ Silverstripe], ein [[Open Source]]-[[CMS]] | ||
+ | |||
==== Dateibasierte CMS ==== | ==== Dateibasierte CMS ==== | ||
Zeile 343: | Zeile 426: | ||
* https://getgrav.org/ | * https://getgrav.org/ | ||
* http://picocms.org/ | * http://picocms.org/ | ||
+ | |||
+ | ==== Headless CMS ==== | ||
+ | |||
+ | Headless CMS sorgen nur für das Content-Management, bieten allenfalls eine Benutzeroberfläche, um den Content zu erfassen, nicht aber ihn gegenüber den Benutzern/Kunden darzustellen. Sie bieten dafür eine API an, über die das Frontend an den Content gelangt. | ||
+ | |||
+ | Beispiel: | ||
+ | |||
+ | * strapi | ||
+ | * [https://jamstack.org/headless-cms/ Übersicht bei jamstack.org] | ||
+ | |||
+ | == Authetifizierung und Berechtigungen == | ||
+ | |||
+ | * [[KeyCloak]] | ||
+ | ** siehe auch [[Phoenix]] | ||
+ | ** https://scalac.io/blog/user-authentication-keycloak-1/ | ||
== Tools == | == Tools == |
Aktuelle Version vom 13. September 2024, 20:05 Uhr
Dynamisches DNS
- Siehe Dynamisches DNS.
Plattformanbieter
Cloud-Anbieter
Im Gegensatz zu herkömmlichen virtuellen Servern bieten Cloud-Anbieter hoch skalierbare Lösungen, die auch nach tatsächlicher Benutzung abgerechnet werden:
Storage - Anbieter
- Hetzner StorageBox bietet u.a. SSH, WebDAV-Zugriff. Die Angebote starten bei 3,50 €/Monat für 100 GB.
Traditionelle virtuelle Server im Netz
Provider
Provider | RAM statisch | RAM insgesamt (inkl. Swap) | Festplatte | Betriebssysteme | Kosten | Stand |
proplay.biz | 128 | 256 MB | 4 GB | OpenSuse 10.3 | 2 € / Monat | 21.12.2008 |
heckrath.net | k.A. 256? | k.A. 256? | 10 GB | OpenSuse 10.3 | 5 € / Monat | 21.12.2008 |
Greatnet VServer-Entry, | 128 MB | 384 MB | 10 GB | OpenSuse 10.2 | 6 €/Monat | 21.12.2008 |
ispOne vServer | 128 MB ~-je 128 MB zus. 15 € einmalig -~ | k.A. | 5 GB | OpenSuse 10.3 / Debian 4 | 3,90 €/Monat | 21.12.2008 |
lgh Mini vServer | k.A. | 200 MB | 4 GB | Debian/Ubuntu | 3 €/Monat | 21.12.2008 |
fairhosting x1.1 | 64 MB | 128 MB | 5 GB | Debian 5/OpenSuse 10 | 3 €/Monat | 21.12.2008 |
fairhosting x2.1 | 128 MB | 256 MB | 15 GB | Debian 5/OpenSuse 10 | 4 €/Monat | 21.12.2008 |
- https://ackermann-edv.de/v-server/, ab 2,50 € pro Monat, persönlicher Support meist durch Herrn Ackermann selbst
- http://www.netcup.de/bestellen/produkt.php?produkt=85 bietet unbegrenzten Traffic, 20 GB Speicherplatz und 200 MB MindestRAM für 3,50 € im Monat (Stand: 1.8.2009)
(5 GB Speicherplatz für 5 Euro/Monat, 10 Euro Einrichtung; Toplevel-Domain zusätzlich 3,30 €/Jahr)
(5 Euro/Monat inklusive 1 Domain, 4,5 GB Webspace)
- http://www.netdirekt.de/c/cms/front_content.php?client=1&lang=1&idart=110&idcat=34
- http://www.netdirekt.de/
- http://www.netfabrik.de/
- https://www.server4you.de/de/v/index.html
- http://www.hosteurope.de/
- http://www.strato.de/v-power/index.html
Mindestanforderungen
- Fixes RAM: 256 MB
- Free harddisk space: 4GB
- OpenOffice 2.4
- Java 1.5
- Citadel
SSH Clients for Java
- Überblick - http://linuxmafia.com/ssh/java.html
- SSH2-Bibliothek (BSD-Lizenz) - http://www.ganymed.ethz.ch/ssh2/
- MindTerm (frei für den persönlichen Gebrauch) - http://www.appgate.com/products/80_MindTerm/110_MindTerm_Download/
- Siehe auch die JavaScript-Lösung Shell-In-A-Box.
Webspace
Domains
- Zur Vermarktung von Domains siehe
- sedo.de
- Domainvermarkter.de
- Zum Markenrecht siehe
- Domain-Provider gibt es viele,
- z.B.
- Suchmaschinen für Domain-Provider:
- https://www.hostsuche.de/suche_domain.php
Webserver einrichten
- Eigenes Root-Passwort setzen
- aptitude installieren, aktualisieren (aptitude update) und System auf den neuesten Stand bringen (aptitude upgrade)
- Normalen Benutzer anlegen
- sudo für normalen Benutzer anlegen, siehe http://www.webhostlist.de/root-server/meine-ersten-5-minuten-auf-jedem-server/
- SSH:
- ssh-copy-id
- Evtl.: Anmelden mit Passwort verbieten, siehe http://www.webhostlist.de/root-server/meine-ersten-5-minuten-auf-jedem-server/
- Check Mail-Versand
- Evtl. logwatch und fail2ban installieren, siehe http://www.webhostlist.de/root-server/meine-ersten-5-minuten-auf-jedem-server/
- SSL-Zertifikat hinterlegen
Siehe auch Root-Server
Werbung
Durch Werbung auf der eigenen Website lässt sich Geld verdienen. Sie kann allerdings auch abschreckend wirken.
Vermittler von Werbung gibt es eine ganze Menge. Sie stellen einen sogenannten AdServer, der automatisch aktuelle oder auch personalisierte Werbung ausliefert. Beispiele:
- Google AdSense
- Criteo
- DoubleClick (gehört zu Google)
- DART
- Open X
- Zedo
- OAS
- Emediate-Ad
- Adtech
- Right Media
Werbung technisch umsetzen
Das MediaWiki-System erlaubt das Hinzufügen von Werbung, z.B. Google AdSense.
Siehe auch
Werbung ohne Cookies
Siehe
WebServer-Software
Allgemeines
- Komplettes Buch über Linux-Server-Administration
Redirects
Testen
- Die virtuelle Maschine BrowserBox bietet mehrere Browser (u.a. Internet Explorer unter Linux mit Wine) an, um die Darstellung einer Webseite testen zu können[1],.
- Siehe auch Selenium
XAMPP
XAMPP gibt es auch für Windows.
Siehe auch diese Anleitung, um XAMPP für Windows mit VirtualHosts zu konfigurieren.
Apache Webserver
Siehe Apache Webserver
Node.js
Siehe Node.js
Mini-Web-Server
- Rejetto HFS, OpenSource
- Aidex Mini Webserver, Freeware, wird nicht mehr weiterentwickelt.
HTML
CSS
Allgemeines
Farbpaletten
Tooltips
Tabellen
Siehe
CSS-Frameworks
- http://getskeleton.com/ - sehr minimales CSS Framework
- https://purecss.io/ - minimales CSS, unterstützt von Yahoo
- https://milligram.io/
- Bulma - nur CSS, kein JavaScript
- rbx integriert Bulma mit React; rbx scheint nicht mehr aktualisiert zu werden
- https://github.com/couds/react-bulma-components - Integration mit React
- https://jenil.github.io/bulmaswatch/help/ - Themes für Bulma
- https://tailwindcss.com/
Ant.Design
Siehe
Einbindung in React / Typescript-Projekt
Ant.Design wird mit
npm install --save antd
dem Create-React-App-Projekt hinzugefügt.
Im Code muss man einerseits das CSS einbinden:
import "antd/dist/antd.css";
Andererseits benötigt man auch den JavaScript-Code, z.B. für das Input-Element:
import {Input} from "antd"; ... return (<Input placeholder="Hallo" />); ...
Bootstrap
Twitter Bootstrap ist ein Open Source-Framework, das im Wesentlichen mit CSS und entsprechenden Klassen (class = "container-fluid"
) aus dem Stand ein ganz ansehnliches Layout bereitstellt.
Siehe
Siehe auch
- Auf den Demoseiten der Bootstrap-Themes auf Bootswatch.com kann der zugehörige Code angezeigt werden.
- Open Source - Bootstrap Themes:
Integration mit Nextjs
Siehe Nextjs
- https://www.kindacode.com/article/how-to-correctly-use-bootstrap-5-in-next-js/
- https://feralamillo.medium.com/bootstrap-in-create-react-app-typescript-1a0365fdd111
- https://stackoverflow.com/questions/69527455/could-not-find-a-declaration-file-for-module-bootstrap-dist-js-bootstrap
npm install --save-dev sass npm install --save bootstrap
In src/styles/globals.scss importiere Bootstrap-SCSS
@import '~bootstrap/scss/bootstrap.scss';
Die Tilde ~ ist dabei eine Kurzform für das node_modules/-Verzeichnis.
In src/pages/_app.tsx importiere globals.scss und Bootstrap.js
import "../styles/globals.scss"; import type { AppProps } from "next/app"; import { useEffect } from "react"; function MyApp({ Component, pageProps }: AppProps) { useEffect(() => { //import("bootstrap/dist/js/bootstrap"); typeof document !== undefined ? require('bootstrap/dist/js/bootstrap') : null }, []); return <Component {...pageProps} />; } export default MyApp;
Themes
- Im Wesentlichen kostenpflichtige Themes finden sich auch auf BootstrapMade.com
Bootstrap-Themes mit MIT-Lizenz finden sich auch auf
- https://startbootstrap.com/template/scrolling-nav benutzt Bootstrap's ScrollSpy
- Anleitung für ScrollSpy auf Basis von React
Siehe auch - ohne Bootstrap -: https://css-tricks.com/sticky-smooth-active-nav/
einzelne Features
- https://swiperjs.com/
- aos - zum Scrollen
- waypoints - zum Scrollen
- Isotope - zum Anordnen
Icons
Siehe React#Icons
CSS Animationen
Googles "Do a barrel roll" kann man für jede Website mittels CSS-Animationen und iframe-Tag durchführen.
CSS beim Druck
Siehe
- https://www.mediaevent.de/css/pagedmedia.html
- https://wiki.selfhtml.org/wiki/CSS/Tutorials/Print-CSS
Server Side Includes
- Ein Überblick zu Server Side Includes findet sich bei wikipedia. Eine Einführung gibt morgenlan.de.
- Auch selfhtml.org kümmert sich um Server Side Includes.
Siehe auch
Perl
PHP
Web-Admin-Tools
- Web-Verwaltungstool, das die Konfiguration aus den Standard-Konfigurationsdateien ausliest und schreibt: WebMin (nicht mehr in Debian enthalten, aber weiter als Debian-Package verfügbar und weiterentwickelt)
- Web-Admin-Tool: Zentyal (früher: eBox)
Wikis
- Siehe MediaWiki, die Software hinter wikipedia und codicatipps
- MoinMoin ist ein in Python geschriebenes Wiki.
- Die Interwikimap bei MoinMoin lässt sich durch Ergänzung der Datei
data/intermap.txt
erweitern.
- Die Interwikimap bei MoinMoin lässt sich durch Ergänzung der Datei
Blogs
- WordPress ist ein PHP-basiertes System zur Erstellung eines Blogs
- Statify ist ein Plugin für WordPress, das eine Webseitenstatistik im Einklang mit deutschen Datenschutzbestimmungen bietet
- WP DB Backup ist ein Plugin, mit dem ein Backup der WordPress-Datenbank regelmäßig per Email zugesandt wird.
- BackWPup ist ein Wordpress-Backup-Tool mit vielfältigen Möglichkeiten.
- Auch ein privates WordPress-Blog lässt sich einstellen.
- Man kann auch selbst Formulare in WordPress mit Hilfe von PHP erstellen:
- Auch eigene Plugins für WordPress sind keine Wissenschaft:
- Blogger wollen häufig wissen, wie man einen Blog bekannt macht.
Content Management System
- Contao (vormals Typolight 520acbec7b0160fa19d5024deaf44e52) ist ein PHP5-basiertes CMS, das angeblich[1] einfach zu verwalten ist.
- Kurzeinführung zum PHP-basierten Drupal
- Typo3
- Silverstripe, ein Open Source-CMS
Dateibasierte CMS
Headless CMS
Headless CMS sorgen nur für das Content-Management, bieten allenfalls eine Benutzeroberfläche, um den Content zu erfassen, nicht aber ihn gegenüber den Benutzern/Kunden darzustellen. Sie bieten dafür eine API an, über die das Frontend an den Content gelangt.
Beispiel:
- strapi
- Übersicht bei jamstack.org
Authetifizierung und Berechtigungen
Tools
- Aufnahme der Website ins OpenDirectory-Projekt bringt sie zur Kenntnis zumindest von Suchmaschinen.
- Überprüfung der Zugriffe über alexa.com
- Mittels des Cron-Servers kann ein Online-Test des Servers programmiert werden.
- Siehe auch das Wiki-Programm MoinMoin
- IP-Adressen-Check bei [2]
- Remote Desktop
- ↑ c't 8/2010, S. 62