Generate a site package

Generate and download a site package

You can download a site package by using the official Site Package Builder at https://get.typo3.org/sitepackage or by using curl.

You have the choice of 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 files that are used as examples in this tutorial.

To follow this tutorial, chose "Site Package Tutorial" as type of the site package.

Download and unzip the zip file, place the result in folder packages/my_site_package, and install it.

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 followed these steps:

Installing TYPO3 with DDEV

{
   "name": "my-vendor/my-site-package"
}

ddev composer require my-vendor/my-site-package:@dev

Look at the a basic site set

The site package build 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 within this folder in the file config.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.

You can find the complete reference in TYPO3 explained: Site sets.

During installation of your site package a page tree with example content was created, and should already have a site configuration in folder config/sites/main.

When you look at the site configuration in module Site Management > Sites it should already contain the set "My Site package". Other sets, for example if you want to use typo3/cms-form can be added here.

If you made no changes, the site configuration should look like this:

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

TYPO3 uses TypoScript as configuration language. The TypoScript is used to configure the templates, which are created with the templating language Fluid.

A file called packages/my_site_package/Configuration/Sets/SitePackage/setup.typoscript provides the TypoScript to your site. This file contains imports of files from folder packages/my_site_package/Configuration/Sets/SitePackage/TypoScript which contain the actual configuration.

You can learn more about the TypoScript syntax used here in chapter A minimal page created by pure TypoScript of the "Getting Started Tutorial".

The TYPO3 Fluid version

File packages/my_site_package/Configuration/Sets/SitePackage/TypoScript/page.typoscript Defines how the output of all pages of the site is rendered with Fluid templates:

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 defines from what directory the Fluid Templates are loaded. Line 7 allows to override this part via settings.

Learn more about using Fluid Templates in chapter Fluid Templates.

Preview page

Whenever we have made changes to the Fluid templates or TypoScript files, it is necessary to Flush frontend caches in the menu in the top bar before you can preview the page properly:

You can then preview your page by clicking on the button View webpage in the page module.

Composer configuration composer.json

In step Create a minimal TYPO3 extension a file called composer.json was created for you:

{
    "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, the extension key is used, for example when setting your favicon in TypoScript:

page {
    shortcutIcon = EXT:my_site_package/Resources/Public/Icons/favicon.ico
}