Advertisement
  1. Code
  2. CMS
Code

Getting Started With Craft CMS

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Introduction to Craft CMS.
Introduction to Craft CMS
Final product image
What You'll Be Creating

This is a follow up tutorial to Introduction to Craft CMS. If you're unfamiliar with Craft, I recommend you read part one first. Then, return here and follow our installation and getting started guide.

What Is Craft CMS?

Pixel & Tonic's Craft CMS is a WordPress alternative for development-oriented publishers who want deeper control and more powerful performance from their content management tools. It's also a potential option for consultants and developers to expand their client offerings.

Craft is not a site builder—you need to build out your HTML, CSS and JavaScript by hand incorporating Twig templates. This won't be intimidating for those used to building WordPress themes. For others, unfortunately, there's no official theme or plugin marketplace at this time (though I wouldn't be surprised if one appears in the future). But Craft is built to be exceptionably scalable and offers native features for complex content management relationships.

It's an appropriate choice for small websites but will shine with larger content sites with significant multi-layered, inter-related content.

Craft is written in PHP on the powerful Yii 1.x platform. If you haven't heard of Yii, you can read my Introduction to the Yii Framework at Tuts+. You don't need to know PHP or Yii to use Craft. It's akin to Django-powered CMS tools written in Python.

While you might not have heard of Craft, its developer community is growing fast. Last June, its proposal for a Craft CMS StackExchange site was approved in just five days.

You can view a showcase of sites running Craft here.

In this tutorial, I'll walk you through the process of installing Craft, its demo site, and getting familiar with Craft for building your own site with it.

Installing Craft's On The Rocks Demo Site

First, let's install Craft's On The Rocks demonstration site with sample theme and content. This site also unlocks all of the premium features for testing.

I'm using Mac OS X with MAMP. My local sites run in the ~/Sites directory. Let's clone the Craft demo site from Github:

Then, let's set the file permissions for Craft's internal directories:

Next, let's update the latest build of Craft. In February 2015, I used version 2.3.2627. However, you can find the very latest at the "Updates" page on the Craft website..

Then, I used PHPMyAdmin to create the database:

Create the ontherocks MySQL database

Click on the ontherocks database in PHPMyAdmin. Then click Import and choose the file in ~/Sites/ontherocks/SQL/ontherocks.sql:

Import the ontherocks SQL database using PHPMyAdmin

Then edit the database configuration file with the credentials for your local MySQL database:

Create a new virtual host with the hostname “ontherocks.dev” that points to the public/ folder.

Edit your /etc/hosts file to resolve ontherocks.dev to 127.0.0.1, if necessary:

The Craft dashboard is located at http://ontherocks.dev/admin. When loaded, you'll see something like this: monkeys...and eyeballs!

Then, you'll be asked to update the database:

Update the database for Craft CMS

You can log in with the following credentials: Username: admin, Password: password.

Craft Administrative Login

The Craft Dashboard

Here's the dashboard—looks a bit like WordPress, huh?

Craft Administrative Dashboard Look Familiar

Here's the On the Rocks homepage:

Craft Demo Site On the Rocks

Exploring the Happy Lager Demonstration Site

The nice folks at Pixel & Tonic gave me a pre-release of their new, free demonstration site, which hopefully will be available by the time you read this—clone it here. The new site is called Happy Lager:

Craft Demo Site Happy Lager

The installation steps are exactly the same as we described above for On the Rocks. The Git repository should be located here:

Happy Lager makes use of Craft's deeper layout capabilities. Here's a pair of screenshots from the About page:

Craft Demo Site About Page Top

Below the fold:

Craft Demo Site About Page Bottom

Here's the Services page:

Craft Demo Site Services Example

Craft's Entries Page

Here's the Entries page in the dashboard with all the content from Happy Lager:

Craft Dashboard Entries - Like WordPress Posts

Take a look at the entry types on the left navigation pane: Singles, Channels and Structures. Craft offers more sophisticated, extensible data types than WordPress.

Singles are one off pages that have a unique design such as your site home page. Channels are for entries organized by date, such as a blog or news sections. Structures are for content provided in a predefined order.

The Craft Editor

Here's the edit page. Note the breadth of possible fields which again are customizable, e.g. Title, Featured Image, Short Description, Heading, Subheading, Article Body.

Craft Dashboard Edit Entry

Notice below the fold how the pull quote type offers various layouts in the story flow as does the image that follows (but I couldn't include it all in the screenshot):

Craft Edit Entry with Components and Positioning

This capability is what Craft calls its Matrix, and it allows for more powerful story composition and layout. Each block can have custom fields and custom position, and can be dragged and dropped into place in the flow. Here's a short video showing the Matrix:

Here's the Live Preview—just beautiful. It reminds me of Ghost's Markdown preview which I wrote about in Keeping Up with Ghost 0.5 (Tuts+). Readers may remember I hate Markdown—so I very much appreciate the Craft live preview:

Craft Editing Live Preview Mode

Here's a bit more on Live Preview:


Craft offers easy access to past revisions:

Craft Editing - Ready Access to Past Revisions

The Craft Media Library

Image assets are organized by group and available on the Assets page:

Craft Asset Management

If you've ever waited for WordPress to load your media page, you'll appreciate how fast Craft is.

Constructing the Happy Lager Home Page

Here's a closer look at the content behind parts of the Happy Lager home page—specifically, this is how it appears when you're editing the content:

Home page content within the Craft editing system

Craft uses Twig templates to transpose the structured content elements into web pages:

Section Types

Craft sites are built around the sections we outlined above: Singles, Channels and Structures. Here's a short video that shows section types in more depth: 

Here are the sections associated with the Happy Lager demonstration site—notice how each corresponds to the primary navigation bar.

Craft Dashboard Sections

The Homepage and About page are singles. The News and Work page are Channels. The Services page is a Structure.

Of course, Craft also offers categories and tags. Categories help you organize your site's content ahead of time, whereas tags let you create an ad hoc folksonomy based on the content in each of your articles.

Here's a short video describing categories and tags:


Another cool feature Craft offers is the ability to route URL requests by friendly paths directly to specific sections:

Craft Dashboard Creating routes for friendly URL mapping

A Closer Look at Happy Lager Pages

Here's the What's On Tap page from http://happylager.dev/index.php/work:

Craft Demonstration Site Whats On Tap
Here you can see how the elements above are edited as separate entries in the Work Channel, organized by date. 

Here's a look at the Services—How It's Made page at http://happylager.dev/index.php/services. It's a structure whose elements have a pre-defined order.

Craft Demonstration Site How Its Made

Each of the image boxes is driven by an entry under services. You can change their order of appearance via drag and drop:

Here's an example Twig template for this page:

And here's the template for each entry. This gives you an idea of how to build Twig templates for your Craft site and what's involved:

Editing Entries

Editing entries in Craft is simple, much like WordPress but with enhanced layout capabilities that you would normally require plugins to accomplish.

Each section can have multiple user-defined entry types. For example, the News section here has two different types of entries: articles and links. Entry types allow you to store different types of content in the same section.

Here's a short video on Entry types:

Now that you have a sense of how site construction works in Craft, let's install a fresh version from scratch.

Installing Craft From Scratch

To install Craft, visit the website and download the codebase. I'm using Mac OS X with MAMP for my local development and testing.

Craft provides detailed installation instructions and links to guides for MacLaravelHeroku and even an automated installation with Composer.

Rename the htaccess file:

Create a symbolic link to your Craft public directory for MAMP:

If you run your Craft installation locally from the host names “craft.dev” or “ontherocks.dev”, you will have the option to switch between Craft Personal, Craft Client, and Craft Pro for free, forever.

I created the database via PHPMyAdmin.

Create Database for CraftCMS in PHPMyAdmin

Edit the Craft database configuration file for your MySQL credentials:

Enter your credentials in the fields below:

Set up write permissions for these Craft app directories:

Visit the local Craft home page and you should see the monkeys again!

Craft CMS Installation Home Page

Register your initial administration account:

Craft Register Your Administrator Account

Set up your site properties:

Craft Configure Your General Site Settings

And that's it:

Craft Installation Complete

Here's your dashboard again:

Craft Your New Site Dashboard

Craft is so end-user focused that they include a support contact form on their dashboard home page.

You can find site settings from the navigation bar at the upper right. It sort of reminds me of iOS:

Craft Settings Panel

Here's what your default Craft site looks like when you begin:

Craft Default Site Without Real Template

Yes, Craft doesn't have the WordPress community of themes. For the most part, you have to code your own theme. For the novice, WordPress still has an edge. 

On the other hand, you may already notice how fast Craft runs compared to WordPress.

Where to Go From Here?

Certainly, you can begin building your site's sample content, but you're going to need to learn about Craft themes and plugins. Here are a few resources that will help you:

I encourage you to install Craft and explore its feature set further. I'm excited by the power, control and scalability Craft provides as an alternative to WordPress. I'm also a Yii aficionado and it's great to see a CMS tool built on my favorite framework.

If you'd like to see a follow up series on publishing with Craft, please post a note in the comments. I also appreciate your questions and comments and generally do respond. You can reach me on Twitter @reifman or email me directly.

I also want to give a shout out to Brandon Kelly, owner of Pixel & Tonic, the creators of Craft. Brandon was super helpful in answering my questions and gave me a preview of their new demonstration site which you should be able to access now.

Related Links

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.