Getting your own Typo3 v11 site set up
published on
Getting your own complete Typo3 site set up is a huge task and beyond what this article aims to achieve.
Once Typo3 is installed it can be quite intimidating to get it initially set up so that you can start adding your own site features and look. This article aims to help you to get to that point.
Bear in the mind that, at the time of writing this article, Typo3 v12 LTS is due to be released. Having looked through both v11 and v12 there are a number of differences. Therefore, this article can only help you set up a site in v11 for now.
Creating the sitepackage the easy way
A sitepackage is a way of including all of your site and accompanying configuration in a single place. This makes it much easier to share, update or even remove without affecting other parts of your installation. It is also much more secure.
Creating a sitepackage the easy way can be done by visiting https://www.sitepackagebuilder.com/, and clicking on 'Create Sitepackage'. Choose version 11.5 and 'Fluid Styled Content' then complete the other fields as necessary. Finally click on 'Create Sitepackage' and then click 'Download' on the following page.
Adding the sitepackage to Typo3
The preferred method to add sitepackages to Typo3 is to use Composer. However, for this tutorial that makes things more complicated so we are going to upload ZIP files instead.
Login to your Typo3 dashboard and select 'Extensions' from the menu on the left-hand side. Under the 'Installed ...' drop down at the top choose 'Upload' and select your Sitepackage ZIP file.
A bit of configuration
Now that we have the sitepackage uploaded and activated we need to perform a little bit of configuration if we are to use it for your site.
Click on 'Template' on the left-hand side and add a template title. Remove everything in the 'Setup' field and click on the 'Includes' tab. In the 'Include static' section click on your Sitepackage name in the 'available items' list. Finally click on 'Save'.
Click on 'Page' on the left-hand side and create a new page. Edit it and add a page title of 'Home'. Change the URL segment to '/'. On the 'Behaviour' tab click on 'Use as root page'. On the 'Access' tab click on 'Page Visible'. Now, on the 'Resources' tab find the 'Page TSConfig' section and click on your sitepackage name in the 'Available Items' section. Finally click 'Save'.
Now click on 'Sites' on the left-hand side and click on 'Add a new site configuration for this site'. Add a website title, site identifier and entry point.
Click on the 'Languages' tab and then on the language dropdown that is already present (rather than creating a new one). Edit the title, entry point, locale, two-letter ISO code, language tag defined by RFC 1766 / 3066, direction and flag icon. Finally click on 'Save'.
Test to see if everything works so far
Click on 'Page' on the left-hand side and make sure your page is selected. Click on the '+ Content' button then on 'Regular Text Element'. Fill in the header, subheader and text fields. Then click 'Save'.
Now view your site and you should see the header, subheader and text that you have just created.
You've only just begun
You now need to carve up your own HTML, CSS and JS and add it all to the appropriate folders and configuration files within your sitepackage in order to see your creation online.
More information on this, and other aspects of Typo3, can be found at https://docs.typo3.org/m/typo3/tutorial-getting-started/11.5/en-us/Index.html