--- title: "Generate a site package" manual: "Site Package Tutorial" version: "13.4" permalink: "https://docs.typo3.org/permalink/t3sitepackage:site-package-builder@13.4" source: "MinimalExample/Index.rst" rendered: "2026-09-24T15:39:33+00:00" --- # Generate a site package {#site-package-builder} A site package is a TYPO3 extension that you can customize to contain the configuration, templates, assets, etc, for your site. It therefore acts as a kind of main "theme" for your site. So we start by generating a basic extension. - [Generate and download a site package](https://docs.typo3.org/permalink/t3sitepackage:generate-and-download-a-site-package@13.4) - [Extension installation](https://docs.typo3.org/permalink/t3sitepackage:extension-installation-1@13.4) - [A look at the basic site set](https://docs.typo3.org/permalink/t3sitepackage:a-look-at-the-basic-site-set@13.4) - [The site set as TypoScript Provider](https://docs.typo3.org/permalink/t3sitepackage:the-site-set-as-typoscript-provider@13.4) - [The TYPO3 Fluid version](https://docs.typo3.org/permalink/t3sitepackage:the-typo3-fluid-version@13.4) - [Preview page](https://docs.typo3.org/permalink/t3sitepackage:preview-page@13.4) - [Composer configuration composer.json](https://docs.typo3.org/permalink/t3sitepackage:composer-configuration-file-composer-json@13.4) ## Generate and download a site package {#minimal-site-package-builder} You can download a site package using the official Site Package Builder at [https://get.typo3.org/sitepackage](https://get.typo3.org/sitepackage) or by using curl. You can choose between three site packages types: - Bootstrap Package: This site package comes with a ready-to-use theme - Fluid Styled Content: A minimal site package where you can build your own custom theme. - Site Package Tutorial: Contains all the files that are used as examples in this tutorial. To follow this tutorial, choose the "Site Package Tutorial". Download and unzip the file into the `packages/my_site_package` folder and [install it](https://docs.typo3.org/permalink/t3sitepackage:extension-installation@13.4). ## Extension installation {#extension-installation} This tutorial assumes that your TYPO3 instance is a brand new installation without any themes, templates, pages or content. We assume that you are working on your local machine using DDEV and that you have followed these steps: [Installing TYPO3 with DDEV](https://docs.typo3.org/m/typo3/tutorial-getting-started/13.4/en-us/Installation/Install.html#installation-ddev-tutorial) ### Install the site package you just created {#extension-installation-site-package} If you have used the Site Package Builder, the `packages/my_site_package/README.md` file contains instructions on how to install your site package. Move / unzip your `my_site_package/` extension folder into the `packages/` folder. Then *require* the extension via Composer using the package name defined in the site package extension's `composer.json` (now located at `packages/my_site_package/`) **packages/my-site-package/composer.json** ```json { "name": "my-vendor/my-site-package" } ``` *require* it with: **Execute in directory page_root** ```bash ddev composer require my-vendor/my-site-package:@dev ``` ### Project file structure {#extension-installation-project-structure} Your project should now have the following structure: - .ddev - [\[Some configuration\]](https://docs.typo3.org/m/typo3/tutorial-getting-started/13.4/en-us/Installation/Install.html#installation-ddev-tutorial) - config - sites - main - config.yaml - packages - my_site_package - \[All sitepackage files\] - composer.json - public - fileadmin - \[Images for content, PDFs, ...\] - \[public files needed by TYPO3\] - var - log - \[private files needed by TYPO3\] - vendor - \[All installed packages, including TYPO3 source\] - composer.json - composer.lock ## A look at the basic site set {#minimal-extension-siteset} Site sets have been introduced. The site package built by Site Package Builder comes with a ready-to-use site set in folder `packages/my_site_package/Configuration/Sets/SitePackage/`. The set itself is defined in the `config.yaml` file inside this folder: **packages/my-site-package/Configuration/Sets/SitePackage/config.yaml** ```yaml name: my-vendor/my-site-package label: 'My Site Package' dependencies: - typo3/fluid-styled-content - typo3/fluid-styled-content-css ``` You will learn more about site sets in chapter [the site set](https://docs.typo3.org/permalink/t3sitepackage:site-set@13.4). The TYPO3 Explained complete reference is here: [Site sets](https://docs.typo3.org/m/typo3/reference-coreapi/13.4/en-us/ApiOverview/SiteHandling/SiteSets.html#site-sets). During installation of your site package a page tree with example content was created. The site configuration folder is `config/sites/main`. If you look at the site configuration in module **Site Management > Sites** it should already contain the "My Site package" set. Other sets can be added here, for example [`typo3/cms-form`](https://packagist.org/packages/typo3/cms-form). ![Screenshot demonstrating adding the "My Site package" to the site main](AddSiteSet.png) If you haven't made any changes, the site configuration should look like this: **config/sites/main/config.yaml** ```yaml base: '/' dependencies: - my-vendor/my-site-package languages: - title: English enabled: true languageId: 0 base: / locale: en_US.UTF-8 navigationTitle: English flag: us rootPageId: 1 websiteTitle: 'My Site Package' ``` ## The site set as TypoScript Provider {#make-typoscript-available} A site set can be used as TypoScript provider. TYPO3 uses TypoScript as a configuration language. TypoScript is used to configure templates created with the Fluid templating language. A file called `packages/my_site_package/Configuration/Sets/SitePackage/setup.typoscript` provides the TypoScript for your site. This file contains imports of files from folder `packages/my_site_package/Configuration/Sets/SitePackage/TypoScript` (which contain the actual configuration). Learn more about the TypoScript syntax used here in chapter [A minimal page created by pure TypoScript](https://docs.typo3.org/m/typo3/tutorial-getting-started/13.4/en-us/Concepts/TypoScript/Index.html#typoscript) in the "Getting Started Tutorial". ## The TYPO3 Fluid version {#minimal-extension-fluid} File `packages/my_site_package/Configuration/Sets/SitePackage/TypoScript/page.typoscript` below defines the rendering of the site with Fluid templates: **packages/my_site_package/Configuration/Sets/SitePackage/TypoScript/page.typoscript** ```typoscript page = PAGE page { 10 = PAGEVIEW 10 { paths { 0 = EXT:my_site_package/Resources/Private/PageView/ 10 = {$MySitePackage.template_path} } dataProcessing { # makes content elements available as {content} in Fluid template 10 = page-content } } shortcutIcon = {$MySitePackage.favicon} } ``` Line 6 sets the directory the Fluid Templates are loaded from. Line 7 sets a value from the site package settings. Learn more about using Fluid templates in chapter [Fluid Templates](https://docs.typo3.org/permalink/t3sitepackage:fluid-templates@13.4). ## Preview page {#cm-preview-page} Whenever you make changes to Fluid templates or TypoScript files, you need to **Flush frontend caches** in the menu in the top bar before previewing the page: ![](../Images/AutomaticScreenshots/FlushFrontendCaches.png) You can then preview your page by clicking on the **View webpage** button in the page module. ## Composer configuration `composer.json` {#extension-configuration-composer} In [Create a minimal TYPO3 extension](https://docs.typo3.org/permalink/t3sitepackage:minimal-extension@13.4) a file called `composer.json` was created for you: **packages/my_site_package/composer.json** ```json { "name": "my-vendor/my-site-package", "type": "typo3-cms-extension", "description": "Site package to follow the tutorial.", "homepage": "https://docs.typo3.org/permalink/t3sitepackage:start", "license": ["GPL-2.0-or-later"], "keywords": ["TYPO3 CMS"], "require": { "typo3/cms-core": "^13.4", "typo3/cms-rte-ckeditor": "^13.4", "typo3/cms-fluid-styled-content": "^13.4" }, "suggest": { "friendsoftypo3/content-blocks": "Allows to create custom content elements. " }, "autoload": { "psr-4": { "MyVendor\\MySitePackage\\": "Classes/" } }, "extra": { "typo3/cms": { "extension-key": "my_site_package" } } } ``` At the top of the `composer.json` file we see the Composer package name `my-vendor/my-site-package` (with a dash) and at the bottom we see the TYPO3 extension key in the extra section - `my_site_package` (with an underscore). The Composer "name" consists of a vendor name followed by a forward slash and the lowercase extension name with dashes. When you reference files in your extension use your extension key, for example when setting your favicon in TypoScript: **package/my-site-package/Configuration/Sets/SitePackage/setup.typoscript** ```typoscript page { shortcutIcon = EXT:my_site_package/Resources/Public/Icons/favicon.ico } ```