# First steps

This page lists first steps you can take after installing Ibexa DXP. These steps are the most common actions you may need to take in a new installation.

Beginner tutorial

To go through a full tutorial that leads from a clean installation to creating a full site, see [Beginner tutorial](https://doc.ibexa.co/en/latest/tutorials/beginner_tutorial/beginner_tutorial/index.md).

## Remove welcome page

To remove the welcome page and get a completely clean installation to start your project with, remove the following files and folders from your installation:

- Delete the file `config/packages/ibexa_welcome_page.yaml`
- Delete the `templates/themes/standard/full/welcome_page.html.twig` file
- Delete the `assets/scss` folder
- Delete all `translations/ibexa_platform_welcome_page.*` files
- In `webpack.config.js` remove the `Encore.addEntry` section and uncomment the last line, so that the end of the file looks like this:

```
module.exports = [ibexaConfig, ...customConfigs, projectConfig];

// uncomment this line if you've commented-out the above lines
module.exports = [ eZConfig, ibexaConfig, ...customConfigs ];
```

## Add a content type

1. In your browser, go to the back office: `<your_domain>/admin`, and log in with the default username: `admin` using the password specified during installation.

Password change

Make sure that you change the default password before you switch your installation from development to production. For more information about passwords, see [Passwords](https://doc.ibexa.co/en/latest/users/passwords/index.md). For more information about production security, see [Security checklist](https://doc.ibexa.co/en/latest/infrastructure_and_maintenance/security/security_checklist/index.md).

2. In the upper-right corner, click the avatar icon and in the drop-down menu disable the [Focus mode](https://doc.ibexa.co/projects/userguide/en/5.0/getting_started/discover_ui/#focus-mode).

1. Select content and go to content types.

1. Enter the content group and create a new content type.

1. Input the content type's name, for example "Blog Post", and identifier: `blog_post`.

1. Below, add a field definition of the type Text Line. Name it "Title" and give it identifier `title`.

1. Add another field definition: Text (type Rich text) with identifier `text`.

1. Save the content type.

For more information, see [Content model](https://doc.ibexa.co/en/latest/content_management/content_model/index.md).

## Create Twig templates and match then with view config

To display content in the front page you need to define content views and templates.

Content views decide which templates and controllers are used to display content.

1. In `config/packages/ibexa.yaml`, under `ibexa.system` add the following block (pay attention to indentation: `site_group` should be one level below `system`):

```
site_group:
    content_view:
        full:
            blog_post:
                template: full\blog_post.html.twig
                match:
                    Identifier\ContentType: [blog_post]
```

Content view templates use the [Twig templating engine](https://twig.symfony.com/).

2. Create a template file `templates/full/blog_post.html.twig`:

```
<h1>{{ ibexa_render_field(content, 'title') }}</h1>
<div>{{ ibexa_render_field(content, 'text') }}</div>
```

For more information, see [Templates](https://doc.ibexa.co/en/latest/templating/templates/templates/index.md) and [Twig documentation](https://twig.symfony.com/doc/3.x/).

## Create content and test view templates

1. Go to the back office, select **Content** -> **Content structure**, and create a new content item by clicking **Create content**.

1. Select a Blog Post content type. Fill in the content item and publish it.

1. To preview the new content item on the front page, go to `<yourdomain>/<Content-item-name>`. For example, if the title of the Blog post is "First blog post", the address is `<yourdomain>/first-blog-post`.

## Add SiteAccesses

You can use SiteAccesses to serve different versions of the website.

SiteAccesses are used depending on matching rules. They're set up in YAML configuration under the `ibexa.siteaccess.list` key.

1. In `config/packages/ibexa.yaml` add a new SiteAccess called `de` for the German version of the website:

```
ibexa:
    # ...
    siteaccess:
        list: [site, de]
        groups:
            site_group: [site, de]
```

The SiteAccess is automatically matched based on the last part of the URI.

2. You can now access the front page through the new SiteAccess: `<yourdomain>/de`.

Log in

At this point you need to log in to preview the new SiteAccess, because an anonymous visitor doesn't have permissions to view it. See [section about permissions below](#set-up-permissions).

For now the new SiteAccess doesn't differ from the main site.

For more information, see [Multisite](https://doc.ibexa.co/en/latest/multisite/multisite/index.md) and [SiteAccess matchers](https://doc.ibexa.co/en/latest/multisite/siteaccess/siteaccess_matching/#available-siteaccess-matchers).

## Add a language and translate Content

One of the most common use cases for SiteAccesses is having different language versions of a site.

1. To set up the `de` SiteAccess to use a different language, add its configuration under `ibexa.system`, below `site.languages`:

```
site:
    languages: [eng-GB]
de:
    languages:
        - ger-DE
        - eng-GB
```

This means that German is used as the main language for this SiteAccess, and English as a fallback.

2. Go to the back office and select **Admin** > **Languages**. Add a new language called "German", with the language code `ger-DE`. Make sure it's enabled.

1. Next, go to the **Content structure** and open the blog post you had created earlier. Switch to the **Translations** tab and add a new translation.

1. Select German and base the new translation on the English version. Edit the content item and publish it.

1. Go to the front page. The blog post now displays different content, depending on which SiteAccess you enter it from: `<yourdomain>/<content-name>` or `<yourdomain>/de/<content-name>`.

For more information, see [Languages](https://doc.ibexa.co/en/latest/multisite/languages/languages/index.md) and [Set up translation SiteAccess](https://doc.ibexa.co/en/latest/multisite/set_up_translation_siteaccess/index.md).

## Add a design

The design engine enables you to use different themes consisting of templates and assets. Each theme is stored in a separate folder and assigned to a SiteAccess.

To create a new theme:

1. Add the following configuration at the bottom of `config/packages/ibexa.yaml` (at the same level as `ibexa`):

```
ibexa_design_engine:
    design_list:
        site_design: [site_design]
        de_design: [de_design]
```

2. In configuration of the `de` SiteAccess (under `ibexa.system.de`) add: `design: de_design`

1. Under `site`, add `design: site_design`

1. Go back to the `content_view` configuration for the blog post. Change the path to the template so that it points to the folder for the correct design: `template: '@ibexadesign\full\blog_post.html.twig'`

This means that the app looks for the `blog_post.html.twig` file in a folder relevant for the SiteAccess: `de_design` for the `de` SiteAccess, or `site_design` for other SiteAccesses in `site_group`.

5. Create a `themes` folder under `templates`, and two folders under it: `de_design` and `site_design`.

1. Move the existing `full\blog_post.html.twig` file under `site_design`.

1. Copy it also under `de_design`. Modify the second one in any way (for example, add some html), so you can preview the effect.

1. To see the difference between the different themes, compare what is displayed at `<yourdomain>/<content-name>` and `<yourdomain>/de/<content-name>`

## Set up permissions

To allow a group of users to edit only a specific content type (in this example, blog posts), you need to set up permissions for them.

Users and user groups are assigned roles. A role can contain a number of policies, which are rules that permit the user to perform a specific function. Policies can be additionally restricted by limitations.

1. Go to **Admin** -> **Users**. Create a new user group (the same way you create regular content). Call the group "Bloggers".

1. In the new group create a user. Remember their username and password. Mark the user as "Enabled".

1. Go to **Admin** -> **Roles**. Create a new role called "Blogger".

1. Add policies that allow the user to log in:

- `User/Login`
- `Content/Read`
- `Content/Versionread`
- `Section/View`
- `Content/Reverserelatedlist`

5. Now add policies that allow the user to create and publish content, limited to Blog Posts:

- `Content/Create` with limitation for content type Blog Post
- `Content/Edit` with limitation for content type Blog Post
- `Content/Publish` with limitation for content type Blog Post

6. In the **Assignments** tab assign the "Blogger" role to the "Bloggers" group.

You can now log out and log in again as the new user. You're able to create Blog Posts only.

For more information, see [Permissions](https://doc.ibexa.co/en/latest/permissions/permissions/index.md).