---
title: "TYPO3 site package tutorial"
manual: "Site Package Tutorial"
version: "main"
permalink: "https://docs.typo3.org/permalink/t3sitepackage:start@main"
source: "Index.rst"
start: true
rendered: "2026-09-24T15:01:46+00:00"
---

# TYPO3 site package tutorial {#start}

A site package is a custom [TYPO3 extension](https://docs.typo3.org/m/typo3/tutorial-getting-started/main/en-us/Concepts/Extensions/Index.html#concepts-extensions)
that contains files regarding the theme and functionality of a site.

This tutorial describes step by step how to come from your first TYPO3
installation to the first basic site.

You can use the [Site Package Builder](https://get.typo3.org/sitepackage) to
create a customized site package. If you want to follow this tutorial, choose
"Site Package Tutorial" as base package.

> [!NOTE]
> The example site package is designed for educational purposes only and
> not intended for use in production environments.

<!-- TODO: no Markdown rendering for "versionadded" -->

If you need a ready-to-use site package, the TYPO3
Camino theme
is an alternative starting point for new installations. Unlike the
site package created in this tutorial, it is a preconfigured site package
that can be installed and adapted to your requirements.

---

**[Prerequisites](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/Prerequisites/Index.html#prerequisites)**

In this section we mention the prerequisites that you need before
you start with this tutorial.

[See the prerequisites](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/Prerequisites/Index.html#prerequisites)

**[Generate a site package](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/MinimalExample/Index.html#minimal-design)**

Generate a site package using the official Site Package Builder and
install it.

[Generate a site package](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/MinimalExample/Index.html#minimal-design)

**[Create initial pages](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/CreatePages/Index.html#typo3-backend-create-initial-pages)**

Here we use the initialization data provided by your site package
to create some initial pages including dummy content.

[Create some dummy content](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/CreatePages/Index.html#typo3-backend-create-initial-pages)

**[Assets](https://docs.typo3.org/permalink/t3sitepackage:assets-theme@main)**

Assets usually include CSS files, JavaScript and images / icons used
for design purposes.

[Understand using assets into your site package](https://docs.typo3.org/permalink/t3sitepackage:assets-theme@main)

**[Fluid Template](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/FluidTemplates/Index.html#fluid-templates)**

We introduce the templating engine Fluid, that is used to render the
html pieces in a logically manner. Then we describe the directory
structure that is needed in a site package extension. We also
explain the first steps to include the previously static files and
html pieces using Fluid.

[Learn about Fluid and Templating](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/FluidTemplates/Index.html#fluid-templates)

**[Content mapping](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/ContentMapping/Index.html#content-mapping)**

Here we explain the purpose of backend layouts. Additionally we
introduce the DatabaseQueryProcessor which is used to render content
from a special "colPos" previously defined in the backend layout.
We use Fluid to output content from a specific colPos. By this we
get to know the cObject ViewHelper.

[See how to use a backend layout](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/ContentMapping/Index.html#content-mapping)

**[Main menu](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/Menu/Index.html#main-menu-creation)**

We introduce the main menu, explain how we build up a menu
processor with TypoScript and how we can output the menu with Fluid.
We introduce the so called "Debug ViewHelper".

[Learn to create & output a menu](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/Menu/Index.html#main-menu-creation)

**[Site sets](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/SiteSets/Index.html#site-sets-configuration)**

In this section we configure the site package using the new
concept of site sets. The settings are now stored in a yaml file
called `settings.definitions.yaml`.

[Learn about the configuration of a site package](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/SiteSets/Index.html#site-sets-configuration)

**[Content Blocks](https://docs.typo3.org/permalink/t3sitepackage:content-blocks@main)**

We explain how the TYPO3 Extension [`friendsoftypo3/content-blocks`](https://packagist.org/packages/friendsoftypo3/content-blocks)
can be used to create custom Content Elements, for example for a jumbotron
or slider.

[Learn to create custom Content Elements](https://docs.typo3.org/permalink/t3sitepackage:content-blocks@main)

**[Extension Configuration](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/SiteSets/Index.html#extension-configuration)**

We explain the needed composer configurations and we connect it with
the site sets configurations that we made in the previous chapter.

[Discover the composer configurations](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/SiteSets/Index.html#extension-configuration)

**[Next steps](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/NextSteps/Index.html#next-steps)**

In this chapter we describe the next steps which you can do with your
new site package.

[See the next steps](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/NextSteps/Index.html#next-steps)