3.827
Bearbeitungen
Änderungen
Zur Navigation springen
Zur Suche springen
Zeile 3:
Zeile 3: − == Werbeeinnahmen == − Das [[MediaWiki]]-System erlaubt das Hinzufügen von Werbung, z.B. [[Google AdSense]].+ + + + + + + + − Siehe auch+ − − * [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]) − + − + − * [http://www.webhostlist.de/ Überblick bei Webhostlist.de] Zeile 84:
Zeile 87: + + Zeile 100:
Zeile 105: − + Zeile 108:
Zeile 113: − + Zeile 127:
Zeile 132: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Zeile 149:
Zeile 208: + + + + + + + + + + + + + + + + − * [http://webwelt.horus.at/apache/home.html Tutorial] für [http://httpd.apache.org/docs/ Apache] − * Für die Erstellung einfachen '''.htaccess'''-Zugriffsschutzes hilft [http://www.bananajoe.de/cgi-bin/pass.cgi BananaJoe]. − * [http://evilscientists.de/blog/?page_id=302 Anleitung zu einem Reverse Proxy Server] mit Apache − * [http://www.heise.de/netze/WebDAV-mit-Apache--/artikel/77605/0 WebDAV mit Apache],[http://www.itopen.de/webdav_mit_apache WebDAV mit Apache], [http://www.zeroathome.de/wordpress/ftp-und-webdav-fuer-euren-ubuntu-server/ WebDAV und SSL mit Apache] − * [http://www.webreference.com/programming/Apache-Site-Down-Notice/ Versetzen des Apache Servers in den Maintenance-Modus] über .htaccess im Wurzelverzeichnis des Apache Servers. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + − ==== SSL-Zertifikate ====+ − ===== Allgemeines =====+ − SSL-Zertifikate enthalten den öffentliche Komponente eines Schlüssels sowie den Namen und sonstige Details des Schlüsseleigentümers und ggf. den Namen der Zertifizierungsstelle (CA). SSL-Zertifikate werden regelmäßig von der Zertifizierungsstelle signiert. Im Ausnahmefall kann man ein Zertifikat auch selbst signieren (mit dem privaten Teil seines Schlüssels).+ + − ===== Selbstsigniertes Zertifikat erstellen =====+ + − openssl req -new -x509 -nodes -out server.crt -keyout server.key+ + − Der private Schlüssel server.key kann nach <code>/etc/ssl/private</code> und das Zertifikat mit dem öffentlichen Schlüssel server.crt kann nach <code>/etc/ssl/certs</code> kopiert werden+ − ===== Apache2 konfigurieren =====+ + + + + − Mit + − a2enmod ssl + − das SSL-Modul von Apache2 aktivieren + + + + + + + − Einen VirtualHost (/etc/apache2/sites-available/...) mit *:443 statt *:80 einrichten und folgende Direktiven einfügen:+ + − SSLEngine on+ − SSLCertificateFile /etc/ssl/certs/server.crt+ − SSLCertificateKeyFile /etc/ssl/private/server.key+ + + − Eventuell ein NameVirtualServer *:443 in /etc/apache2/ports.conf einfügen. − ===== Links überprüfen ===== − Die Links auf die Seite und auch innerhalb sollten nun mit http'''s''':// beginnen und nicht mehr mit http://. Das gilt auch für Referer. In [[MediaWiki]] ist in der /var/lib/mediawiki/LocalSettings.php <code>$wgServer</code> auf "https://www.myserver.de" zu setzen.+ + + + − + − Siehe + − + − + − ** Dazu [http://hydra.geht.net/tino/howto/linux/apache/apache--ssl/startssl/ Anleitung bei Hydra]+ − + − + − ** [http://blog.kabisa.nl/2010/03/08/setup-a-self-signed-ssl-site-with-apache2/ Apache2 mit SSL] auf [[Debian]] einrichten+ − ** http://mrfoo.de/archiv/347-Howto-Apache2-SSL-Zertifikat-erstellen-und-aktivieren.html+ − ** [http://www.matthias-sonnenkalb.net/archives/linux/de/eigenes-ssl-zertifikat-erstellen-und-server-einrichten/index.php Erstellen des Zertifikats und Einrichtung] des [[Apache]] unter [[OpenSuse]]+ + + − Siehe auch [[Linux-Tipps#SSL]]+ − === Mini-Web-Server ===+ − * [http://www.rejetto.com/hfs/ Rejetto HFS], OpenSource+ − * [http://www.aidex.de/software/webserver/ Aidex Mini Webserver], Freeware, wird nicht mehr weiterentwickelt. − === HTML ===+ − + + + + + + + + Zeile 238:
Zeile 400: + + Zeile 253:
Zeile 417: + + + + + + + + + + + + + + + + + + + + + + + +
→Integration mit Nextjs
* Siehe [[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:
* [https://www.strato.de/server-cloud/ Strato ServerCloud]
=== Storage - Anbieter ===
* [https://www.hetzner.de/storage/storage-box Hetzner StorageBox] bietet u.a. SSH, WebDAV-Zugriff. Die Angebote starten bei 3,50 €/Monat für 100 GB.
* [http://www.elektronikinfo.de/pc/geldverdienen.htm Geldverdienen mit der eigenen Homepage]
== Virtual Server ==
=== Traditionelle virtuelle Server im Netz ===
=== Provider ===
==== Provider ====
| 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)
* http://www.strato.de/v-power/index.html
* http://www.strato.de/v-power/index.html
=== Mindestanforderungen ===
==== Mindestanforderungen ====
* Fixes RAM: 256 MB
* Fixes RAM: 256 MB
* Citadel
* Citadel
=== SSH Clients for Java ===
==== SSH Clients for Java ====
* Überblick - http://linuxmafia.com/ssh/java.html
* Überblick - http://linuxmafia.com/ssh/java.html
** 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 ==
* 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
* [https://www.debian-administration.org/article/250/Automatically_Blocking_SSH_Attackes_From_Script_Kiddies Mit Shorewall nur Login-Versuche alle Minute erlauben]
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]]
* [http://www.criteo.com/de/publishers/ 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
* [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 ==
=== Apache Webserver ===
=== Apache Webserver ===
Siehe [[Apache Webserver]]
=== Node.js ===
Siehe [[Node.js]]
=== Mini-Web-Server ===
* [http://www.rejetto.com/hfs/ Rejetto HFS], OpenSource
* [http://www.aidex.de/software/webserver/ Aidex Mini Webserver], Freeware, wird nicht mehr weiterentwickelt.
=== HTML ===
* [[HTML]]
=== CSS ===
==== Allgemeines ====
==== Allgemeines ====
* [http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil CSS-best practices]
* https://every-layout.dev/
* https://cssreference.io/
==== Farbpaletten ====
* [https://coolors.co coolors.co]
==== Tooltips ====
* [http://www.phcomp.co.uk/Tutorials/Web-Techologies/Tooltips-in-CSS.html Anleitung zur Erstellung von Tooltips mit reinem CSS]
==== Tabellen ====
Siehe
* [https://hashnode.com/post/really-responsive-tables-using-css3-flexbox-cijzbxd8n00pwvm53sl4l42cx Responsive Tabellen mit Flexbox]
* [https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Allgemeine Übersicht zu Flexbox]
==== CSS-Frameworks ====
* http://getskeleton.com/ - sehr minimales CSS Framework
* https://purecss.io/ - minimales CSS, unterstützt von Yahoo
* https://milligram.io/
* [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://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 =====
Twitter Bootstrap ist ein [[Open Source]]-Framework, das im Wesentlichen mit [[CSS]] und entsprechenden Klassen (<code>class = "container-fluid"</code>) aus dem Stand ein ganz ansehnliches Layout bereitstellt.
Siehe
* [http://www.w3resource.com/twitter-bootstrap/tutorial.php Bootstrap 3.0 Tutorial]
Siehe auch
* Auf den Demoseiten der Bootstrap-Themes auf [https://bootswatch.com/ Bootswatch.com] kann der zugehörige Code angezeigt werden.
* Open Source - Bootstrap Themes:
** https://themewagon.com/themes/creative-multipurpose-website-template-free-download/
** https://themewagon.com/themes/one-page-multipurpose-bootstrap-template-free-download-2017/
** https://github.com/DesignRevision/shards-ui
* [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]
** https://bootstrapmade.com/demo/MyResume/
** https://bootstrapmade.com/demo/Multi/
** https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
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/
===== Weiterführendes =====
====== Navigationsleiste, die auf Scrollen reagiert ======
* https://startbootstrap.com/template/scrolling-nav benutzt Bootstrap's ScrollSpy
* [http://httpd.apache.org/docs/2.2/ssl/ssl_faq.html FAQ für SSL]
* [https://blog.devgenius.io/diy-scrollspy-4f1c270cafaf Anleitung für ScrollSpy auf Basis von React]
* [http://www.heise.de/security/artikel/SSL-fuer-lau-880221.html StartSSL] bietet kostenlose, ein Jahr gültige SSL-Zertifikate.
Siehe auch - ohne Bootstrap -: https://css-tricks.com/sticky-smooth-active-nav/
** [http://www.sslshopper.com/article-free-ssl-certificates-from-a-free-certificate-authority.html Besprechung der Vor- und Nachteile von StartSSL free]
* Ausprobieren kann man auch zunächst mal ein selbst erstelltes Zertifikat (Siehe [http://www.sslshopper.com/article-how-to-create-and-install-an-apache-self-signed-certificate.html Nachteile eines selbst signierten Zertifikats]):
====== einzelne Features ======
* https://swiperjs.com/
* [https://michalsnik.github.io/aos/ aos] - zum Scrollen
* [http://imakewebthings.com/waypoints/api/waypoint/ waypoints] - zum Scrollen
* [https://isotope.metafizzy.co/ Isotope] - zum Anordnen
==== Icons ====
Siehe [[React#Icons]]
==== CSS Animationen ====
Googles [https://sumtips.com/tips-n-tricks/make-any-site-do-a-barrel-roll/ "Do a barrel roll" kann man für jede Website mittels CSS-Animationen und iframe-Tag durchführen].
* [[HTML]]
==== CSS beim Druck ====
Siehe
* https://www.mediaevent.de/css/pagedmedia.html
* https://wiki.selfhtml.org/wiki/CSS/Tutorials/Print-CSS
=== Server Side Includes ===
=== Server Side Includes ===
* Ein Überblick zu '''Server Side Includes''' findet sich bei [http://de.wikipedia.org/wiki/Server_Side_Includes wikipedia]. Eine Einführung gibt [http://www.morgenlan.de/yapata/content/xssi/xssi-1.shtml morgenlan.de].
* Ein Überblick zu '''Server Side Includes''' findet sich bei [http://de.wikipedia.org/wiki/Server_Side_Includes wikipedia]. Eine Einführung gibt [http://www.morgenlan.de/yapata/content/xssi/xssi-1.shtml morgenlan.de].
* Auch [http://de.selfhtml.org/servercgi/server/ssi.htm selfhtml.org] kümmert sich um Server Side Includes.
* Auch [http://de.selfhtml.org/servercgi/server/ssi.htm selfhtml.org] kümmert sich um Server Side Includes.
Siehe auch
* [http://httpd.apache.org/docs/current/howto/ssi.html die offizielle Apache-Dokumentation zu SSI]
** [http://www.ietf.org/rfc/rfc3875 Liste der standardmäßig vorhandenen Umgebungsvariablen für SSI-Skripte]
=== Perl ===
=== Perl ===
** Statify ist ein Plugin für [[WordPress]], das eine Webseitenstatistik im Einklang mit deutschen Datenschutzbestimmungen bietet
** 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.
** WP DB Backup ist ein Plugin, mit dem ein [[Backup]] der [[WordPress]]-Datenbank regelmäßig per Email zugesandt wird.
** [http://marketpress.de/product/backwpup-pro/#vergleich BackWPup] ist ein Wordpress-Backup-Tool mit vielfältigen Möglichkeiten.
** Auch ein [http://weblogs.about.com/od/wordpresstutorialstips/qt/How-To-Make-A-Wordpress-Blog-Private.htm privates WordPress-Blog lässt sich einstellen].
** Man kann auch selbst Formulare in [[WordPress]] mit Hilfe von [[PHP]] erstellen:
** Man kann auch selbst Formulare in [[WordPress]] mit Hilfe von [[PHP]] erstellen:
*** http://trevordavis.net/blog/wordpress-jquery-contact-form-without-a-plugin
*** http://trevordavis.net/blog/wordpress-jquery-contact-form-without-a-plugin
* Typo3
* Typo3
* [http://www.silverstripe.com/ Silverstripe], ein [[Open Source]]-[[CMS]]
* [http://www.silverstripe.com/ Silverstripe], ein [[Open Source]]-[[CMS]]
==== Dateibasierte CMS ====
* https://www.bludit.com/
** https://themes.bludit.com/theme/styler
** https://themes.bludit.com/theme/typerite
* https://getgrav.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 ==