TYPO3 Site Package Tutorial

Categories: Community Created by The TYPO3 Documentation Team
Today, the TYPO3 Documentation Team published a tutorial that describes the steps required to turn a basic design template into a fully working, mobile-responsive website.

Following the steps of the Site Package Tutorial, written by Michael Schams, you can build a modern extension with all relevant files stored at a central point. Changes can easily be tracked in version control. TYPO3 supports several methods for implementing websites, but this approach is both flexible and professional. At the same time, the process is not overly complicated and does not require any programming knowledge.

TYPO3 requires some initial configuration and a design template to provide the visual appearance of a site. A basic TYPO3 installation has only the foundation (“framework”) of a website. There are no pages, no default themes and even when you access the frontend, the system returns an error message by default.

The development of a website can be approached in several ways. While standard websites usually consist of HTML documents that contain text, with images, videos, styles, etc., referenced, TYPO3 features a clean separation between design, content and functionality of a website. Developers and integrators can easily add simple, as well as sophisticated functions to the enterprise content management system.

Benefits of a Site Package

A Site Package extension comes with a number of benefits. Extensions are a powerful way to get the most out of TYPO3, and can be installed to extend the core system with new functions and features. By using version control software, such as Git, developers can revert a change or switch back to a previous point in time with the click of a button. This is not only useful for individual developers, but allows teams to track who made which change, why, and when.

Another important benefit of a TYPO3 extension is that dependencies on other extensions, as well as the supported TYPO3 versions, can be defined. This makes deployment easier and more fail-safe. When the Site Package extension is installed in an empty TYPO3 instance, all dependent extensions can be downloaded from the TYPO3 Extension Repository and installed automatically.

When building a website without using an extension, template files are often stored in the fileadmin/ directory of a TYPO3 instance — the “user space”. Files in this directory are indexed by TYPO3's File Abstraction Layer (FAL), creating irrelevant and avoidable records in the database. Additionally, files in fileadmin/ are typically meant to be publicly accessible by convention. To avoid disclosing sensitive system information (see the TYPO3 Security Guide for further details), configuration files should not be stored there.

In virtue of the motto "TYPO3 inspires people to share!", the Site Package extension can also be shared with the community via the official TYPO3 Extension Repository or in a publicly accessible version control system, such as GitHub.

The Tutorial

The Site Package Tutorial walks the reader through every step on the way to building a basic Site Package. It uses modern and well-known libraries, such as Bootstrap and jQuery, and contains the example code you need to create a fully working TYPO3 website. Screenshots ensure that even beginners to TYPO3 will reach their goal.

After completing the tutorial, you will not only know how to build the TYPO3 website in a modern way, but you will also know how to use the Site Package in your own installations. The extension is ready-to-use and can be extended and adjusted according to your needs.

With simple static HTML/CSS templates as the starting point, the Site Package Tutorial covers the following topics:

  • Split the design template files into Fluid templates (Layout, Templates, and Partial)

  • Apply Fluid Styled Content TypoScript

  • Include the Bootstrap framework and jQuery library as external resources

  • Build a fully functional TYPO3 extension

  • Install the Site Package extension via the Extension Manager

  • Create some initial pages, their TypoScript templates, and preview a page in the TYPO3 backend

  • Develop a simple navigation menu using TypoScript and Fluid

  • Apply TypoScript to render the content of a page

The final extension contains only six files without HTML/CSS. Only two files contain PHP code. It is also worth pointing out that the Site Package extension does not require any third party extensions and works in an empty, newly installed TYPO3 instance.

The tutorial is based loosely on the three-part video series by Mathias Schreiber and Benjamin Kott, on how to set up a TYPO3 site from scratch by building a Site Package extension.

Aimed at Integrators and Developers

The tutorial is written for TYPO3 integrators and developers. It requires a basic understanding of HTML, CSS and JavaScript. Readers should have some knowledge of TYPO3 and the administrative interface (the Backend). No software programming experience is required.

About Michael Schams

Michael Schams is an international open source technology advocate. He holds a master’s degree in computer science and is a regular contributor to technical journals. With many years' experience in using and developing TYPO3, Michael is a well-known member of the TYPO3 community and involved in several activities and projects around the open-source content management system. He is the author of the TYPO3 Security Guide and co-author of three TYPO3 books.

Michael is currently based in Melbourne (Australia) and consults with clients across the globe to achieve best outcomes in the digital space, web hosting, IT infrastructure, IT security, and cloud computing/storage.

About the Documentation Team

The TYPO3 Documentation Team provides comprehensive, quality documentation for TYPO3 products for all users. The team not only writes, publishes and maintains official documentation for TYPO3, but also supports the TYPO3 Core Team and other teams in their documentation efforts.

The Site Package Tutorial can be found at docs.typo3.org, the central place for official TYPO3 documentation.