TYPO3 site package tutorial 

A site package is a custom TYPO3 extension 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 to create a customized site package. If you want to follow this tutorial, choose "Site Package Tutorial" as base package.


Prerequisites 

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

Generate a site package 

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

Create initial pages 

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

Assets 

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

Fluid Template 

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.

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.

Main menu 

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".

Site sets 

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.

Content Blocks 

We explain how the TYPO3 Extension friendsoftypo3/content-blocks can be used to create custom Content Elements, for example for a jumbotron or slider.

Extension Configuration 

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

Next steps 

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