Änderungen

Zur Navigation springen Zur Suche springen

Webhosting (Quelltext anzeigen)

Version vom 13. September 2024, 20:05 Uhr

2.269 Bytes hinzugefügt ,  20:05, 13. Sep. 2024
→‎Integration mit Nextjs
Zeile 3: Zeile 3:  
* Siehe [[Dynamisches DNS]].
 
* Siehe [[Dynamisches DNS]].
   −
== Werbeeinnahmen ==
     −
Das [[MediaWiki]]-System erlaubt das Hinzufügen von Werbung, z.B. [[Google AdSense]].
+
== 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 ===
   −
Siehe auch
+
* [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]
  −
* [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])
     −
== Virtual Server ==
+
=== Traditionelle virtuelle Server im Netz ===
   −
=== Provider ===
+
==== Provider ====
   −
* [http://www.webhostlist.de/ Überblick bei Webhostlist.de]
        Zeile 84: 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 100: Zeile 105:  
* 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
Zeile 108: Zeile 113:  
* Citadel
 
* Citadel
   −
=== SSH Clients for Java ===
+
==== SSH Clients for Java ====
    
* Überblick - http://linuxmafia.com/ssh/java.html
 
* Überblick - http://linuxmafia.com/ssh/java.html
Zeile 126: 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 140: Zeile 151:     
* [[SSL]]-Zertifikat hinterlegen
 
* [[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 ==
 
== Werbung ==
Zeile 158: 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 180: Zeile 208:     
=== 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://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.
      +
* [http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil CSS-best practices]
 +
* https://every-layout.dev/
 +
* https://cssreference.io/
   −
==== SSL-Zertifikate ====
+
==== Farbpaletten ====
   −
===== Allgemeines =====
+
* [https://coolors.co coolors.co]
−
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 =====
+
==== Tooltips ====
   −
  openssl req -new -x509 -nodes -out server.crt -keyout server.key
+
* [http://www.phcomp.co.uk/Tutorials/Web-Techologies/Tooltips-in-CSS.html Anleitung zur Erstellung von Tooltips mit reinem CSS]
   −
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
+
==== Tabellen ====
   −
===== Apache2 konfigurieren =====
+
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]
   −
Mit
+
==== CSS-Frameworks ====
−
  a2enmod ssl
  −
das SSL-Modul von Apache2 aktivieren
      +
* 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
   −
Einen VirtualHost (/etc/apache2/sites-available/...) mit *:443 statt *:80 einrichten und folgende Direktiven einfügen:
+
===== Ant.Design =====
   −
SSLEngine            on
+
Siehe
−
SSLCertificateFile    /etc/ssl/certs/server.crt
+
* https://ant.design/docs/react/introduce
−
SSLCertificateKeyFile /etc/ssl/private/server.key
     −
Eventuell ein NameVirtualServer *:443 in /etc/apache2/ports.conf einfügen.
+
====== Einbindung in React / Typescript-Projekt ======
   −
===== Links überprüfen =====
+
Ant.Design wird mit
 +
  npm install --save antd
 +
dem Create-React-App-Projekt hinzugefügt.
   −
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.
+
Im Code muss man einerseits das CSS einbinden:
 +
  import "antd/dist/antd.css";
   −
===== Kostenlose offizielle Zertifikate =====
+
Andererseits benötigt man auch den JavaScript-Code, z.B. für das Input-Element:
 +
  import {Input} from "antd";
 +
  ...
 +
  return (<Input placeholder="Hallo" />);
 +
  ...
   −
StartSSL scheint der einzige offizielle Anbieter von kostenlosen SSL-Zertifikaten zu sein. Diese Zertifikate eignen sich angeblich auch für [[S/MIME]]. Jedes Jahr müssen die kostenlosen Zertifikate verlängert werden.
+
===== 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
+
Siehe [[Nextjs]]
−
* [http://www.debacher.de/wiki/Server-Zertifikate_mit_StartSSL Anleitung für StartSSL von debacher]
+
 
−
* [http://www.small-blog.de/verlangern-eines-startssl-free-class-1-ssl-zertifikat/ StartSSL-Zertifikat verlängern]
+
* https://www.kindacode.com/article/how-to-correctly-use-bootstrap-5-in-next-js/
−
* [http://www.hagenfragen.de/tipps-und-tricks/startssl-client-certificate-verlaengern.html http://www.hagenfragen.de/tipps-und-tricks/startssl-client-certificate-verlaengern.html noch einmal: Zertifikat verlängern]
+
* 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>
   −
===== Bugs in SSL =====
+
====== 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/
   −
Laut [http://fm4.orf.at/stories/1736830/ FM4] stammt der "Heartbleed"-Bug u.a. in der [[OpenSSL]]-Software wohl aus der Feder von der NSA nahestehenden Kreisen.
     −
===== Weiterführendes =====
  −
Siehe
  −
* [http://httpd.apache.org/docs/2.2/ssl/ssl_faq.html FAQ für SSL]
  −
* [http://www.heise.de/security/artikel/SSL-fuer-lau-880221.html StartSSL] bietet kostenlose, ein Jahr gültige SSL-Zertifikate.
  −
** Dazu [http://hydra.geht.net/tino/howto/linux/apache/apache--ssl/startssl/ Anleitung bei Hydra]
  −
** [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]):
  −
** [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]]
+
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/
   −
=== Mini-Web-Server ===
+
====== Navigationsleiste, die auf Scrollen reagiert ======
 +
* 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]
   −
* [http://www.rejetto.com/hfs/ Rejetto HFS], OpenSource
+
Siehe auch - ohne Bootstrap -: https://css-tricks.com/sticky-smooth-active-nav/
−
* [http://www.aidex.de/software/webserver/ Aidex Mini Webserver], Freeware, wird nicht mehr weiterentwickelt.
     −
=== HTML ===
+
====== einzelne Features ======
   −
* [[HTML]]
+
* 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
   −
=== CSS ===
+
==== Icons ====
   −
==== Allgemeines ====
+
Siehe [[React#Icons]]
   −
* [http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil CSS-best practices]
+
==== CSS Animationen ====
   −
==== Bootstrap ====
+
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].
   −
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.
+
==== CSS beim Druck ====
 
Siehe
 
Siehe
−
 
+
* https://www.mediaevent.de/css/pagedmedia.html
−
* [http://www.w3resource.com/twitter-bootstrap/tutorial.php Bootstrap 3.0 Tutorial]
+
* 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 ===
Zeile 313: Zeile 417:  
* 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 ==
Abgerufen von „https://railpulse.de/codicatipps/Spezial:Mobiler_Unterschied/19930...22742“

Navigationsmenü