Webseite mit HTML-SSI
Wir bauen uns eine Webseite mit statischen HTML-Seiten unter der Verwendung von Server Side Includes (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.
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_sidebar.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_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_sidebar.shtml
<!-- LINKS: SEITENLEISTE (SIDEBAR) -->
<aside class="sidebar">
vdiv class="sidebar-brand">
⚡ <span>Projektname</span>
</div>
<nav class="sidebar-menu">
<div class="menu-section-label">Übersicht</div>
<a href="#" class="nav-link active"><i class="bi bi-house"></i><span>Dashboard</span></a>
<div class="menu-section-label">Fakturierung</div>
<a href="#" class="nav-link"><i class="bi bi-files"></i><span>Alle Rechnungen</span></a>
<a href="#" class="nav-link"><i class="bi bi-file-earmark-plus"></i><span>Neue Rechnung</span></a>
</nav>
<div class="sidebar-footer">
Projektname v2.1<br>
<small>Angemeldet als ..</small>
</div>
</aside>
Datei layout_top.shtml
<main class="main-content">
<div class="header">
<div>
<h1>Dashboard</h1>
<p style="color: var(--text-muted); font-size: 0.9rem;">Willkommen zum Projektname</p>
</div>
<div>
<a href="#" class="btn">+ Neue Rechnung erstellen</a>
</div>
</div>
<!-- Hier kommt der jeweilige Seiteninhalt hinein -->
<div class="card">
Datei layout_bottom.shtml
</div>
</main>
</div>
Datei layout_footer.shtml
<footer class="footer">
<p><!--#echo var="current_year" --></p>
</footer>