Building a website on craft CMS

What Is Craft CMS? 

Originally released in 2013 Craft CMS is a WordPress alternative, by Pixel & Tonic, for publishes who want more powerful performance when managing their content online with the tools that can be offered by Craft. Not only is it an alternative for development-orientated publishes but it provides a potential option for consultants and website designers in the ability to enhance what they offer their clients. 

It is not, however, a site builder. You still need to build your HTML, CSS, and JavaScript as there is no current plugin marketplace or official theme. Although you still need to build these by hand, Craft is an appropriate choice for small websites as well as larger ones as it manages content-heavy websites.  

Like other content management systems, it enables you to personalize your entry forms and organize your content and data into content buckets. Craft is quite similar to other CMSs with a few extras added to make the process simpler and more convenient (reusing a field multiple times across different content stations). 

Below we will look at the different parts that make up Craft and how they work. 

Sections 

This is an area where your content is stored. One of three section types exist: 

  • Channel – a spool of related content such as news articles, press releases, blogs or products.  
  • Structure – just like the channel section, it is also used as a spool of similar content however it requires a hierarchy of sorts.  
  • Single – this section is for one-off pages. For example, the homepage content would sit in this section.  

Fields, Field Layouts, and Entry Types 

Each section, as discussed, has one or more Entry Types. These allow the creation of Field Layouts(collection of fields) and then assign them to the Section Entry Type. In doing so, Craft allows one Section to have multiple content variety. 

A Field Layout is made up of individual fields to form a collection. Multiple custom craft field types include:  

  • Plain Text 
  • Rich Text (think WYSIWYG) 
  • Table 
  • Assets (for file uploading and association) 
  • Entries (for relating one or more Entries) 
  • Matrix (for creating customizable content structures made up of multiple fields) 

 

Next is templates. 

Craft offers you complete control of your website’s HTML as templates that are stored as files.

First, you need to insert a file named index.html for your craft/templates folder. Then load the main domain of your website i.e. mysite.dev in your browser and the information from that file will be shown. Now create a new folder inside your craft/templates folder called news and add a different file called index.html. Back on your browser load mysite.dev/information/ and the contents of the new file will be shown. This is known as templating and is the very basic process of it. 

 

What makes Craft’s templating really powerful t is template engine, Twig, and the way that it handles routing. 

Routing means how Craft recognises the URLs you enter in your browser and then decides what to do with them. There are a range of tests Craft makes when a request comes in which can be set out in the documentation.   

So far we have templates fitting with the following requests: 

  • / 
  • /news/ 

Next, you may want to produce a template which will display a single news story. If you now load mysite.dev/ /news/entry in your browser you’ll again see the contents of the template.

That is not necessarily what you want. Your website visitors won’t ever be asking for that URL. Instead, you’ll be trying to publish news reports with URLs like: 

  •  mysite.dev/news/this-is-a-news-story 
  • mysite.dev/news/another-news-story 

The end segment in these URLs is referred to as a ‘slug’. Slugs are unique identifiers to your news stories, in this case, generated from the information story’s name. What needs to happen is for us to tell Craft that if it receives a request matching the arrangement /news/slug it should route it to the /news/entry. This can be done via the admin port