24 Sep 2015
Drupal vs Jekyll + CloudCannon
There’s a huge eco-system of plugins and add-ons available for any CMS. In this comparison we’ll be using the content management systems straight out of the box to reduce the complexity and time to get the sites live.
We’re looking at Drupal, a powerful open source PHP CMS which has been around since 2000.
It’s the first time I’ve used Drupal so there might be better ways of doing things. If you can see an improvement leave a comment below.
I’ve made a few modifications to the theme to get it ready for our testing:
- The front page is simplified so it only shows blog posts
- There’s a navigation at the top right
- I added
about.htmlwhich is a basic page with content
- Instead of using classes to show the header image for the blog entries, I used inline styles so the CMS can just insert an image path
- I removed the comments section and the next/previous links on a blog entry to keep the implementation as simple as possible
You can see the static site I started each integration with here.
The home page lists all the blog posts.
There’s an about page.
And a page to view a blog post.
In this scenario I’m a web designer making a website for a non-technical client. The client needs to update the about page and manage their blog without touching any code.
I’m on Mac OS X so I decided to use MAMP to set up my PHP environment. After a 240MB download I had a full PHP and MySQL environment. Next, I downloaded Drupal 7, unzipped it to the
htdocs directory inside MAMP and loaded the quick installer in my browser.
The quick install involved configuring the database and other site settings for my site.
Again, I’m using Mac OS X so Ruby is already installed. To install Jekyll I open up my terminal and type:
Then I can run Jekyll using:
With Drupal, I made a copy of the Stark theme and read documentation on building Drupal themes. These are the files I added to the theme:
html.tpl.php: The outer most structure of the page and asset loading.
node.tpl.php: HTML structure for listing blog posts on the front page, normal pages and blog posts.
page--front.tpl.php: Container for front page HTML. Sits between
html.tpl.php and the front page code in
page.tpl.php: Container for page HTML. Sits between
html.tpl.php and the page/blog entry code in
region.tpl.php: Was outputting unwanted HTML so I set it to output nothing.
block.tpl.php: Was outputting unwanted HTML so I set it to output nothing.
All the posts and site settings are stored in the MySQL database.
It took me a long time and a lot of reading to figure out which files to edit or where generated HTML I didn’t want was coming from.
The other gotcha is each time I made an update to the template I would have to go into the Drupal admin panel to clear the cache before I could see the changes:
Using Jekyll, most of the static HTML files remained exactly the same. I pulled out the layouts into separate files to use on multiple pages:
default.html: Contains the basic HTML structure. All other layouts use this as their parent layout.
post.html: Defines the structure of blog posts.
page.html: Defines the structure of normal pages.
Blog posts are Markdown files. The title, author, header image and other metadata is set using front matter at the top of the file:
To list the blog posts in
index.html, I create a for loop and reference the front matter:
For Drupal I tried two ways of deploying to a production server.
First I set up an small EC2 server with Ubuntu 14.04 in US-West-1. Then I SSHed into the server to install the PHP/MySQL environment using this guide. I downloaded Drupal, ran the installer to set up my site and configure the database. Then finally transferred my theme across and imported my development database using PHPMyAdmin.
The second way I tried was using a paid service called SiteGround. I could have used cPanel to do a one click install of Drupal but I wanted to keep the environment as close as I could to developement. I uploaded Drupal and my theme using FTP, ran the quick install, then imported my development database using PHPMyAdmin.
Overall using SiteGround saved me a lot of time as I didn’t have to set up an entire PHP environment.
I used CloudCannon to deploy and host the Jekyll site. To do this I created a GitHub repository with my source files, then connected that repository to a new site in CloudCannon.
The files sync to CloudCannon and are live on a generated testing domain.
All the content is in the files so there is no database.
To update content in Drupal you use the admin panel. You can see existing articles and pages.
Update content using a text area.
And you can update other metadata.
In CloudCannon, editing is inline. You can update content on the about page by clicking and entering new content.
Going to the collections view displays all the blog posts.
You write and update blog posts in a simple editor.
Update front matter in the settings sidebar.
All changes made on CloudCannon are committed back to the repository so I can work on the site locally in tandem.
I had the following cache settings turned on and loaded the page several times to ensure everything was cached properly.
For a further speed increase, one of our readers suggested using the Boost module.
CloudCannon serves static files and all assets are minified, compressed and delivered on a CDN.
I used a free tool from MaxCDN to compare the load times from different parts of the world.
I felt like I was fighting against Drupal every step of the way. It was hard to take a static page and convert it into a Drupal theme, deployment took several steps, the client editing was powerful but displayed many complicated options and the end website was more than six times slower.
Jekyll was a small step from the static website, deployment was a simple
git push, the editing was all inline and the website was significantly faster.
All the source files are available on GitHub: