If you don’t already have a free Divio Account, head over to the Divio website and create one, now.

Once logged in, click on the button on the top right labeled "Add” and click on "Project."

This will redirect you to the "Add new project" creation screen. In addition to choosing a "Name" for your project, the following options are required to get started with the tutorial:

  • Python: Choose Python 3.6.x
  • Type: django CMS
  • Boilerplates: HTML5 Boilerplate


What are Boilerplates?
Boilerplates define certain aspects of the project setup, such as templates, CSS and JavaScript files, which are copied into your project at creation. You can learn more about how to add your own Boilerplates.

Click on "Continue" to get to the subscription page. For this tutorial you don't need any features that are not included in the Free plan, so just click "Skip for now" at the bottom of the page and then "continue" in the modal to get to the project’s Dashboard.

On the Project's Dashboard, you’ll find multiple options to manage your django CMS project on Divio For this tutorial, we’ll only be focusing on these two sections:

  • Dashboard
  • Addons

First, navigate to the "Addons" section. This section allows you to install certain Addons published on Divio.

We want to install two additional addons for this tutorial:

  • Aldryn Bootstrap 3
  • Aldryn News & Blog

In the top-right section of the "Addons" section, find the search box and type in "Aldryn Bootstrap 3." The result should look something like this:

Click the ellipsis on the right side and then on "Install for free". This will bring you to the installation page of the Addon.

Certain Addons require configuration before they can be added. In this case, Aldryn Bootstrap 3 offers two different icon sets and additional carousel styles.

For now, leave these settings as-is. Then, click "Install" in the lower right corner.

Next, search for "Aldryn News & Blog" and repeat the same steps as the previous Addon.

In the same Interface, search for "django CMS Link", "django CMS Picture" and "django CMS File". On each click "Uninstall".

Aldryn Bootstrap 3 already provides a bootstrap enhanced link, picture and file plugin, no need to overcomplicate the choices.

You will see an uninstalling progress bar, after the checks are done, click "Uninstall" to remove the Addon from your project.

On the next deployment these changes will take effect.


What’s Bootstrap 3?

Bootstrap (http://getbootstrap.com/) is a popular web framework, which comes with many built-in web components such as Carousels, Dropdown Buttons and Navigation Bars, and handles responsive and mobile-driven websites out of the box.

At last hit the "Deploy" button for the "Test server" on the "Dashboard" to setup your project. Once this has finished you are ready to go to the next step:

Let’s move on to the next step and install the Divio App.

Did this answer your question?