How to Build a Website and Blog with django CMS, Without Knowing Python/Django
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
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.
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):
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
- Part 2: Building Our First Template
- Part 3: Adding Content
- Part 4: Getting to Know News & Blog
- Part 5: Fine-tuning the News & Blog Addon
- Part 6: Implementing a Contact Form
- Part 7: Setup Project Locally
- Part 8: Creating Your First Django Application
- Part 9: Creating Your First django CMS Plugin
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?
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:
First, navigate to the "Addons" section. This section allows you to install certain Addons from the django CMS Marketplace (https://marketplace.django-cms.org) 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 (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.
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
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.:
Each project will automatically create its own folder inside the workspace.
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:
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 http://startbootstrap.com/template-overviews/clean-blog/ 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:
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.
Join our new public hipchat room to get help with this tutorial from Divio's team members free of charge.