Content: Blog


How to Build a Website and Blog with django CMS, Without Knowing Python/Django

Christian Bertschy

Feb. 16, 2016

Create a Functional Website in under 60 Minutes

Here’s what you’ll end up with after completing this tutorial:

  • A website running django CMS

  • An attractive responsive theme

  • A blog, forms and custom plugin integrations

Impressions from one of the first webinars.

Join our weekly webinar: We'll go through part one, two and three of this tutorial and provide additional tips and tricks while working with the latest django CMS version. Join us for a 45-minutes practical demonstration followed by a 15-minutes Q&A session.


Book your slot

The Python programming language is on the rise and with it, the interest in Django and django CMS. Due to its extreme versatility, ease of use and beginner-friendly appeal, web professionals from around the world are flocking to django CMS to see what all the fuss is about.

Although Python is a great language to learn, it isn’t mandatory to know when launching a website with django CMS. In this multi-part post, we’ll explain how to build a website with django CMS – even if you don’t know either of the Python or Django programming languages.


Things You’ll Need to Make Your Own django CMS Website:

First, let’s define what you DON’T need for this tutorial:

  • No prior knowledge in Python or Django

  • No prior knowledge in django CMS

  • No prior knowledge on how to setup a local development environment

  • No prior knowledge on how to deploy a Django project to a server

The only things you DO need are (no immediate action necessary):

  • Any kind of HTML Editor (you can download free editors such as AtomBrackets, Sublime or similar)

  • Basic knowledge in CSS/HTML

  • Windows (7+) or Mac OS X (10.9+)

Since we use the Divio Cloud - the solution to get you up and running, you won’t need any additional services or skills to get started with django CMS. Additionally, everything needed to complete this tutorial is free of charge, including a live server.

If you'd like to compare your progress (or run into any issues), we've prepared  a ZIP file with all the final templates , which corresponds to what you can expect to have at the end of the tutorial.


Part 1: Setup

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

Once logged in, click on the button on the top right labeled "Add new 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:

  • Creation: New
  • Region: Choose United States or European Union
  • Python: Choose Python 2.7.x or Python 3.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. Click here to learn more about how to add your own Boilerplates.

The summary on the right of your screen should look similar to the screenshot on the left.

Click "Create Project" to continue to the Project’s Dashboard.

On the Project's Dashboard, you’ll find multiple options to manage your django CMS project on Divio Cloud. 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 from the django CMS Marketplace ( with point-and-click.

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 "Install for free" on the right side. 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 Aldryn Bootstrap 3" 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 on the "Configure" button and choose to "Uninstall" the addon. Aldryn Bootstrap 3 already provides a bootstrap enhanced link, picture and file plugin, no need to overcomplicate the choices.

This will add/remove the selected Addons to your project, so they get installed with the next deployment. Let’s do that, now.

What’s Bootstrap 3?

Bootstrap ( 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.

Head back to your project’s dashboard and click "Deploy" in the Test Server section.

This will deploy your website to a test environment on the Divio Cloud for free. This takes a few minutes for the initial deployment (subsequent deployments are faster).

Note that you can already use the website when the status turns green. The last few minutes are used to clean up and scale the project properly.

In the meantime, let’s move on to the next step and install the Divio App.

Installing the Divio App

The Divio App allows you to interact with specific files on the cloud test server, such as HTML, Javascript and media files (images, videos, etc.). This is all we need to create an attractive website with django CMS.

To download, just click the "Download Divio App" button below the navigation on the left side and select your operating system (see screenshot).

Alternatively download the app here.

After the download is installed, open the application and login with your Divio Account (if you created your account with Google use your access token to login instead).

Then, define your default workspace to download the files to your system. This can be any empty folder on your system, i.e.: …/Documents/Workspace.

Each project will automatically create its own folder inside the workspace.

Click "Continue."

This brings you to the Divio App with all your projects listed on the left.

Click on the project you created in the previous step, which will bring you to the dashboard of the project inside the Divio App.

If your test server is still deploying, you will see the progress bar running as you've seen in the Project's Dashboard. If it’s deployed, click on the "Open Test Site" button (the eye-icon on the upper right). This opens your test site in your browser, where you’ll be greeted by the django CMS welcome screen.

Adding a Few Pages to django CMS

After a fresh django CMS installation, you’ll see the welcome screen, which allows you to create website pages with a simple click.

The “New page” field is already selected. Click "Next" and enter "Home" in the "Title" field and then click "Create." Next, we’ll add a second page for our blog. Click the "Create" button in the toolbar:

Click "Next" to create another page. Name it "Blog" and click "Create."

Click on the first menu entry right next to the django CMS logo (with the name you gave your project)  in the toolbar and choose "Pages…". This will open a frame containing the page tree. Here, you can order and change your navigation at any time. 

Now, click on the language circle next to “Blog” (currently marked as grey) and hit "Publish."

The first page you create is always published ("Home" in this case).

A published page is indicated with a green circle, grey signifies that the page is unpublished and the pulsating blue color means there are changes that haven’t been published.

To proceed, click on the eye icon ("View") next to “Home” to view the Home page. Once you click on the "View" icon, the sidebar will close and you will see your newly created Home page, which simply displays a text so far.

Now, let’s learn how to manage files so we can start implementing our theme.

Managing Project Files in the Divio App

Let’s head back to the Divio App. Here, we’ll change the look and feel of our website and better understand its templates.

First, let’s sync the files to our local environment by clicking the "AUTO-SYNC" button in the center of the dashboard.

A tooltip might overlap the Auto-sync button, just simply close it. You might also get the "Auto-sync Information" window, simply read and click on "Continue".

This will sync your project files into a newly created folder within your defined workspace.

Auto-sync will continuously sync your changed files to the test server. It will stop when you close the application or if you click on the auto-sync button again.

For this tutorial, we’ll only be focusing on the following folders inside your project directory:

  • Static

  • Templates

To get there, click the "Open project folder" icon in the Divio App.

In the next part we will copy the theme files into this folder.

Downloading the Theme Files

Our page looks a bit empty with just a basic menu and the following message:

"This page has no content yet. Make sure you are in Edit mode (hit the Edit page button if required). Then switch to Structure mode."

Let’s change this by adding a theme.

We’ll be implementing the Clean Blog theme, which is an open-source Bootstrap 3-based project for this tutorial.

Visit this page and download the files by clicking the “Download” button:

Extract the ZIP file somewhere near your workspace, since we’ll be moving a few files around. Open the extracted folder into a separate window.

Move the extracted Clean Blog Theme to the left of your screen. On the right open the currently synced project. Notice that you’ll need to select the following from the extracted theme folder on the left:

  • css

  • img

  • js

  • vendor

Copy these folders into your project’s “static” folder (on the right). Make sure to overwrite all files and folders when prompted to do so. You can see that the Divio App is working by showing the "Loading..." indicator on the top right. Wait till the sync-process has finished before moving further.


Jump to Index   Part 2: Building Our First Template


Join our new public hipchat room to get help with this tutorial from Divio's team members free of charge.


Join now

blog comments powered by Disqus

Want to post your article here?

Contact us