Quickstart: From zero to a basic website in TYPO3 v14 

New in version 14.1

The default theme "Camino" was introduced with TYPO3 14.1.

This tutorial does not work with earlier TYPO3 versions.

In this quickstart tutorial, we demonstrate how to install TYPO3 and set up a basic website using the default theme "Camino".

Installing TYPO3 v14 (short version) 

To follow these steps, you need either Docker and DDEV for local development (Installing and using DDEV) or a Linux system with a web server (Apache or Nginx), a database, Composer, and at least PHP 8.2.

(See also the system requirements.)

# Create project directory
mkdir my_project && cd my_project

# Initialize DDEV project
ddev config --php-version 8.4 --docroot public --project-type typo3

# Start DDEV
ddev start

# Install TYPO3 via Composer
ddev composer create-project "typo3/cms-base-distribution:^14"
# Recommended: Require the default theme
ddev composer req typo3/theme-camino
# Run TYPO3 CLI setup (database credentials are pre-filled)
ddev typo3 setup --server-type=other --driver=mysqli --host=db --port=3306 --dbname=db --username=db --password=db --create-site

# Open the Backend login in a browser
ddev launch /typo3/
Copied! 
# Create project directory
mkdir my_project && cd my_project

# Use at least php 8.2 and create a mysql or mariadb database

# Install TYPO3 via Composer
composer create-project "typo3/cms-base-distribution:^14"

# Run TYPO3 CLI setup
vendor/bin/typo3 setup --create-site
Copied!

The directory in which you run these commands must be empty. Do not initialize Git or open the folder in an IDE before running the commands, as the installation process expects no pre-existing files.

TYPO3 v14 backend overview 

Open the TYPO3 backend (Backend login) using the credentials you entered during installation.

Open the backend URL of your installation, for example https://my-site.ddev.site/typo3 when using DDEV.

You should see something like the following:

Screenshot of the backend of a fresh TYPO3 v14.1 installation, with the system information window open

Check the system information: Version at least 14.1? Composer mode or Classic mode?

If you see an error message instead, see Troubleshooting.

Adding content to your website 

If you selected the default site preset during installation, a basic website should have been created.

Screenshot of the "Layout" module, containing the automatically created page

Go to module Content > Layout and choose the "Home" page. View the webpage and edit some content.

If no root page was created during setup, you will need to create a page on root level and configure it.

You will also need to edit the site configuration in order to add the "Theme:Camino" site set.

Frontend screenshot of a website using the default theme "Camino" with text "Welcome to your default website"

After clicking View webpage, you should see the frontend of the website.

Screenshot of the content editor including a rich text editor with markup options

Edit the content and save your changes.

The TYPO3 Editors Guide provides detailed information on how to work with content.

Adding subpages 

In the page tree, you can add new pages via drag and drop:

Screenshot of the page tree while a new standard page is added via drag and drop

Drag a standard page into the page tree.

Screenshot of the page tree showing a newly added page being enabled

By default, newly added pages are hidden; therefore, you must enable them to make them visible.

In the default theme (Camino), a main menu is displayed automatically when you add pages below the root page.

Some editors prefer pages to be visible immediately. You can configure this behavior via page TSconfig: Example: Do not hide newly created pages by default.

Configuring the default theme (Camino) 

In the module Sites > Setup, you can edit the site configuration and settings:

Screenshot of the "Sites > Setup" module in overview

Go to module Sites > Setup (1), and edit the site configuration (2) or settings (3).

In the site settings, you can change settings provided by the theme and installed extensions. You may need to clear the caches to apply changes.

Screenshot of the site settings, changing the theme default settings

Choose a different color theme and adjust other settings.

Screenshot of the backend toolbar with button "Clear cache" and option "Flush frontend caches"

Clear the frontend cache after saving the site settings.

Customizing the default theme (Camino) 

The files belonging to the default theme can be found in the folder vendor/typo3/theme-camino in Composer mode, or in typo3/sysext/theme_camino in Classic mode installations.

If you want to modify the theme but continue using it, you can either copy it and edit the copy, or create a custom site package that extends Camino.

Edit a copy of the default theme 

If you copy the theme and modify the copy, future changes to the original theme will not be applied to your customized version.

Copy the default theme:

cp -R vendor/typo3/theme-camino/ packages/theme-camino
ddev composer req typo3/theme-camino:"@dev"
Copied! 
cp -R vendor/typo3/theme-camino/ typo3conf/ext/theme_camino
typo3/sysext/core/bin/typo3 cache:flush
Copied!
Screenshot of module "System > Extensions"

Deactivate and activate the theme so that the type is "Local".

You can now edit files in this new location, for example CSS files in packages/theme-camino/Resources/Public/Css.

Extend the default theme 

You can use the development extension friendsoftypo3/kickstarter to create a custom theme that extends the default theme:

ddev composer req friendsoftypo3/kickstarter

ddev typo3 make:extension
# [...]
# Composer package name:
#  > myvendor/theme_pluto

Keep the default values for all other questions.

ddev typo3 make:site-set

# Please enter the site set identifier (must be "myvendor/theme_pluto" or "myvendor/theme_pluto-<suffix>") [myvendor/theme_pluto]:
#  >
# [...]
#
# Enter site set identifiers for dependencies (press Enter with empty input to finish).
#
#  Dependency (vendor/package):
#  > typo3/theme-camino
Copied!

Edit the newly created packages/theme_pluto/composer.json and update the require section to add typo3/theme-camino :

packages/theme_pluto/composer.json 
 "require": {
     "typo3/cms-core": "^14",
+    "typo3/theme-camino": "^14"
 },
Copied!

Then require the new theme using its Composer name, for example:

ddev composer req myvendor/theme-pluto:@dev
Copied!

You can now create a file packages/theme_pluto/Sets/theme_pluto/setup.typoscript to override the default theme’s TypoScript and add additional paths for templates and custom CSS styles and/or JavaScript files:

packages/theme_pluto/Sets/theme_pluto/setup.typoscript 
# Override page templates, use UNIX timestamp so your template is loaded last
lib.fluidPage {
    paths.1770975481 = EXT:theme_pluto/Resources/Private/Templates/
}

page {
    includeCSS {
        theme_pluto_styles = EXT:theme_pluto/Resources/Public/Css/styles.css
    }
    includeJS {
        theme_pluto_hello = EXT:theme_pluto/Resources/Public/JavaScript/hello.js
    }
}

# Override content element templates, use UNIX timestamp so your template is loaded last
lib.contentElement {
    layoutRootPaths.1770975481 = EXT:theme_pluto/Resources/Private/Templates/Layouts/
    partialRootPaths.1770975481 = EXT:theme_pluto/Resources/Private/Templates/Partials/
    templateRootPaths.1770975481 = EXT:theme_pluto/Resources/Private/Templates/Content/
}
Copied!

Now add the new theme as a dependency in the site configuration:

Screenshot of site settings section "Sets for this Site" with the new theme selected

Go to module Sites > Setup and edit the configuration of your site. Add the new theme to the sets for this site.

You can now copy any Fluid template, partial, or layout from the folder vendor/typo3/theme-camino/Resources/Templates into packages/theme_pluto/Resources/Templates and override it.