Webseite mit HTML-SSI
Eine Webseite mit statischen HTML zu erstellen liegt aktuell wieder im Trend. Weg von großen, Wartungsintensiven und sicherheitsanfälligen Content-Management-Systeme (CMS), hin zu einfachen HTML-Webseiten. Durch den Einsatz von Server Side Includes (SSI) lässt sich HTML modular halten, die Verwaltung effizienter gestalten und einige wichtige Features von CMS mit übernehmen.
Wir bauen uns eine Webseite mit statischen HTML-Seiten unter der Verwendung von Server Side Includes (SSI).
1. Zentrale Konfigurationsdatei
Anstatt Projektdaten (wie den Seitennamen, Datum, Firmenname, Pfad zum Logo und/oder die Version der CSS-Datei) in jeder Datei einzeln zu pflegen, kannst dies durch die Erstellung einer config.html oder vars.shtml vereinfacht werden.Vorteil: Die Ändeurngen erfolgen nur an einer einzigen Stelle.
Umsetzung: Nutze SSI-Variablen und gib sie später in den HTML-Seiten aus.
Erstellt eine Datei namens vars.shtml und fügt in diese alle wichtigen, globalen Werte ein.
<!-- Globale Texte -->
<!--#set var="site_name" value="Mein Projekt" -->
<!--#set var="site_title" value="Meine Webseite" -->
<!--#set var="current_year" value="2026" -->
<!-- Pfade für Assets (praktisch bei Updates) -->
<!--#set var="path_css" value="/css/style.min.css?v=1.0.4" -->
<!--#set var="path_logo" value="/img/logo-dark.png" -->
<!-- Standard-Metadaten -->
<!--#set var="meta_lang" value="de" -->
Wichtig: Achte darauf, dass dein Webserver (z. B. Apache) so konfiguriert ist, dass er SSI verarbeitet. Oft müssen die Dateien dafür die Endung .shtml statt .html haben, damit der Server weiß: "Hier muss ich erst die Befehle ausführen, bevor ich die Seite ausliefere."
2. Einbindung vars.shtml in die Inhaltsseiten (index.shtml)
Die Variablen-Datei muss immer als allererstes aufgerufen werden. Danach kannst du die Variablen direkt in der Seite oder in weiteren Includes nutzen.
<!--#include virtual="/inc/vars.shtml" -->
3. Struktur der neuen Webseite
Das Ziel der neuen HTML-Webseite mit SSI ist eine schnelle und einfache Verwaltung dieser. Spätere Updates, inkl. Designwechsel sollen einfach möglich sein. Daher ist eine optimale Struktur (Dateien, Ordner) sehr wichtig für kommende Änderungen/Erweiterung.
Aus eigener Erfahrung empfiehlt es sich folgende Dateien und Ordner anzulegen:
- Ordner "inc": für Dateien die in den HTML-Seiten per include aufgerufen werden. Mit Dateien
- vars.shtml - zentrale Konfigurationsdatei
- layout_header.shtml - Header-Code
- layout_head.shtml - head-Code
- layout_footer.shtml - Footer-Code
- layout_top.shtml - Code oberhalb des Inhalte-Bereiches (Content)
- layout_bottom.shtml - Code unterhalb des Inhalte-Bereiches (Content)
- layout_sidebar.shtml - Sidebar-Code
- Ordner "assets": für Unterordner, wie
- Ordner "img": für Bilder
- Ordner "css": für CSS-Dateien
- Ordner "js": für JAVAScript-Dateien
- Ordner "scss": für scss-Dateien
- Ordner "vendor": für Addon/Dateien, wie bootstrap, prism, etc.
- Ordner "news": für einen eventuellen News-Bereich
- Ordner "download": für einen eventuellen Download-Bereich
4. Aufbau der Inhaltsseiten
Am Beispiel der index.shtml wird der effiziente Aufbau der einzelnen Seite deutlich. In dieser Datei ist nur der reine Inhalt abgespeichert:
<!--#include virtual="/inc/vars.shtml" -->
<!--#include virtual="/inc/layout_head.shtml" -->
<!--#include virtual="/inc/layout_header.shtml" -->
<!--#include virtual="/inc/layout_top.shtml" -->
<h1>Willkommen auf <!--#echo var="site_name" --></h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<!--#include virtual="/inc/layout_sidebar.shtml" -->
<!--#include virtual="/inc/layout_bottom.shtml" -->
<!--#include virtual="/inc/layout_footer.shtml" -->
5. Inhalte der anderen include-Seiten
Datei layout_head.shtml
<!DOCTYPE html>
<html lang="<!--##echo var="meta_lang" -->">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title><!--##echo var="page_title" --></title>
<meta name="description" content="...">
...
</head>
Datei layout_header.shtml
<header id="header" >
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="/index.shtml">Home</a></li>
<li><a href="/news.shtml">News</a></li>
</ul>
</nav>
</header>
Datei layout_top.shtml
<body class="blog-details-page">
<!--#include virtual="/inc/layout_header.shtml" -->
<main class="main">
Datei layout_bottom.shtml
<!--#include virtual="/inc/layout_header.shtml" -->
<main class="main">
<footer id="footer" class="footer dark-background">
...
</footer>
</body>
</html>
6. Die Vorteile dieses Aufbaus
- Design-Wechsel in Sekunden: Du änderst nur layout-Seiten. Alle Unterseiten übernehmen das neue Design sofort.
- Keine Code-Duplizierung: Der Code (z.B. Navigation) ist nur in einer und nicht mehr in jeder einzelnen Datei.
- SEO-Kontrolle: einfache SEO-Optimierung jeder einzelnen Datei
- kein externer Programminterpreter: Da SSI direkt als Modul in den Webserver (z. B. Apache) integriert ist, muss für einfache Ersetzungen kein externer Programminterpreter (wie die PHP-Engine) gestartet werden.
- Sicherheit: da keine tausende PHP-Dateien mit unzählihgen Zeilen Code verwendet werden, verbessert diese Variante die Sicherheit
7. Download Beispiel
Hier könnt Ihr die vollständige Beispiel-Webseite mit HTML-SSI kostenlos herunterladen, und zum eigenen Gebrauch verwenden. Darin sind alle inc-Dateien, Ordner und die index.shtml enthalten, für einen besseren Einblick in dieses Thema.
Hinweis: Sollte die Beispiel-Webseite nicht funktionieren, dann passt bitte die Pfade zu den Dateien an.
Viel Erfolg bei der Verwendung Webseite mit HTML-SSI!