How-To · TYPO3 Entwicklung

TYPO3 Sitepackage von Grund auf erstellen

12. Mai 2026 ca. 15 Minuten Lesezeit TYPO3 13, Composer, Fluid

Ein Sitepackage ist die sauberste Art, ein TYPO3-Projekt aufzusetzen. Alle Templates, TypoScript und Konfigurationen an einem Ort – versionierbar, wartbar und update-sicher. Diese Anleitung führt Sie vom leeren Verzeichnis bis zur laufenden Installation.

Voraussetzungen & Projektstruktur

Bevor Sie beginnen, stellen Sie sicher, dass TYPO3 13 oder 14 per Composer installiert ist und Sie Zugriff auf die Kommandozeile haben.

Composer-Modus: Alle modernen TYPO3-Installationen nutzen Composer. Das Sitepackage liegt unter packages/mein_sitepackage/.

Verzeichnisstruktur packages/mein_sitepackage/

packages/mein_sitepackage/
├── Configuration/
│   ├── Sets/mein_sitepackage/
│   │   ├── config.yaml
│   │   └── setup.typoscript
│   └── TypoScript/setup/
├── Resources/
│   ├── Private/
│   │   ├── Layouts/
│   │   ├── Partials/
│   │   └── Templates/
│   └── Public/
│       ├── Css/
│       └── Js/
├── composer.json
└── ext_emconf.php

composer.json & ext_emconf.php anlegen

Jede TYPO3-Extension benötigt eine composer.json sowie eine ext_emconf.php mit Metadaten für den Extension Manager.

JSON composer.json

{
    "name": "meinefirma/mein-sitepackage",
    "type": "typo3-cms-extension",
    "require": {
        "typo3/cms-core": "^13.0 || ^14.0",
        "typo3/cms-fluid-styled-content": "^13.0 || ^14.0"
    },
    "extra": {
        "typo3/cms": {
            "extension-key": "mein_sitepackage"
        }
    }
}

Hinweis: Nach dem Anlegen muss composer install erneut ausgeführt werden, damit der Symlink erstellt wird.

TypoScript: PAGE-Objekt konfigurieren

Das PAGE-Objekt ist das Herzstück jeder TYPO3-Website. Es steuert, welche Fluid-Templates und CSS/JS-Dateien eingebunden werden.

TypoScript Configuration/TypoScript/setup/page.typoscript

# Seiten-Konfiguration
page = PAGE
page {
    typeNum = 0

    10 = FLUIDTEMPLATE
    10 {
        templateRootPaths.10 = EXT:mein_sitepackage/Resources/Private/Templates/Pages/
        partialRootPaths.10  = EXT:mein_sitepackage/Resources/Private/Partials/
        layoutRootPaths.10   = EXT:mein_sitepackage/Resources/Private/Layouts/
        templateName         = Default
    }

    includeCSS.site      = EXT:mein_sitepackage/Resources/Public/Css/site.css
    includeJSFooter.site = EXT:mein_sitepackage/Resources/Public/Js/site.js
}

Fluid-Layout & Partials

Das Haupt-Layout definiert das HTML-Grundgerüst, Partials kapseln Header und Footer.

Fluid / HTML Resources/Private/Layouts/Default.html

<!DOCTYPE html>
<html lang="{site.configuration.defaultLanguageIsoCode}">
<head>
    <meta charset="UTF-8">
    <title>{page.title}</title>
    <f:format.raw>{styles}</f:format.raw>
</head>
<body>
    <f:render partial="Header/Header" arguments="{_all}" />
    <main><f:render section="Main" /></main>
    <f:render partial="Footer/Footer" arguments="{_all}" />
    <f:format.raw>{scripts}</f:format.raw>
</body>
</html>

Best Practice: Übergeben Sie arguments="{_all}" an Partials – so stehen Navigation und Kontaktdaten überall zur Verfügung.

Extension aktivieren & Site Set zuweisen

In TYPO3 13+ werden Sitepackages über Site Sets eingebunden – kein statisches TypoScript-Template mehr nötig.

YAML config/sites/meine-site/config.yaml

base: 'https://www.meine-website.de/'
rootPageId: 1

dependencies:
  - meinefirma/mein-sitepackage
  - typo3/fluid-styled-content

languages:
  - title: Deutsch
    languageId: 0
    locale: de_DE.UTF-8

Fertig! Nach einem Cache-Clear ist das Sitepackage aktiv. Änderungen an Templates wirken sofort.