This post assumes that you are completely new to CMS development and that you don't know anything when it comes to creating a page in Sitecore. By the end of this article, you will hopefully have a basic understanding about how to convert a design into Sitecore items.

Introduction To CMS Development

Let's start at the very beginning, in 1990 HTML was released, HTML was a major break-through to allow people from all around the world to view information. Businesses quickly jumped onto this trend and started creating websites to promote themselves and sell goods.

These original websites were made-up for a number of static HTML files that sat on a server somewhere. Pages, like their equivalents now, contained a header, a menu, and some content. This architecture had many flaws, the main one being updates. If the marketing department wanted to create a new page, the process to release this, would involve a developer manually copying an existing page and changing the content.

Asides from the obvious resourcing issue, where the developer, who in the terms of cost is pretty expensive, had to spend a chunk of their time maintaining content. This process also had another fairly major flaw, duplication. Whenever a new page was created, the menu HTML code in all the other pages would need updating.

Whenever a release was made, a developer not only had to release a new file, he would also have to go back through all the other existing pages and manually update the header on each one. This second issue is one of the big issues with static sites.. most of the pages are made up of nearly identical duplicated code and in order to make a single change we have to make HTML changes in multiple places, which is bad!

As you can imagine, using static HTML for a website with more than 10 pages doesn’t scale. If your website had 100’s of pages keeping the site consistent would be impossible, or a full-time job. This issue is how Sitecore came into existence. The CMS was conceived to primarily tackle these two problems.

This is how we get to our first major concept that we need to consider when building a web page in Sitecore, we need to design our site so non-technical people can update it. We also have to design a system that has no duplication. Content editors shouldn't have to add in the same code on each page and common component like menus should work programmatically without manual intervention. Now you understand the two main guiding principles of Sitecore design, we need to start thinking about how to create a page within Sitecore.

How Do Pages Get Split-up In Sitecore?

A blog standard website will have many different types of page. Every site will have a homepage, which will usually look different to any other page on the site. A website will also normally have a landing page which will also look slightly different. A website will almost definitely have content pages, which will also look slightly different again. In Sitecore, we would create these different types of the page by creating a different data-template and layout for each one.

Each page will have a number of similar/shared components between them, e.g. a header/footer as well as content that is unique to itself. A landing page, it might be a big banner at the top of the page for example, while a content page, might just have text and nothing else. The first thing to do, when designing a Sitecore project is to agree on the common components that will be needed on every page on the site.

These components will typically be the header, menu, footer, breadcrumbs, search bar etc.. Our aim, as developers, is to add all of these duplicate areas on our pages into components. Components will dramatically reduce the amount of duplicate HTML in our solution. Instead of duplicating the HTML within each of our page layouts, we can simply add a link to the component instead. In ASP.NET terms, if we were working with web forms, we would create a new user control for the menu. If you have half a brain, you’ll be building your website using the MVC equivalent instead, e.g. a partial.

We'll need several components to provide things like the header and footer. Linking to components within each of the different page layouts still adds duplication into the design, which is bad. Imagine we have three types of pages in Sitecore, homepage, landing and content page. If we simply added references to the header and footer in each one, we still have duplication, as the component code is duplicated.

Let's say the site is live and we decided to add a breadcrumb onto each page. With the component code duplicated within each layout, we'd have to go through each one and add it. On large sites, you may have 40 or 50 layouts, so this would be painful. Instead, the design will be a lot more flexible if we use a master layout, that contains all of the references to the shared components and any HTML that we don't want to duplicate, like the page title, CSS links, Javascript references, etc... Each type layout will reference to this master layout, removing all duplication and making maintenance a lot easier in the future.

How To Build It In Sitecore?

If this is new to you, then now is probably the good time to have a quick recap,:

  1. We need a master layout to display the header, footer and all other common HTML like the section, CSS links etc...
  2. We will need to define several data-templates within Sitecore.  The data-templates will define the fields and properties that content editors will see when they try to create pages.  

In our simple page example, we will create a 'master' data-template that will contain properties that will define common properties that will appear on every web page, like the page title, meta-description etc..  We will also create data templates for each different page type.  So we'll create a homepage data template, a landing page data template and another one for a content page. 3. Content.  The concept of content should be easy to grasp, these are the objects in Sitecore that represent your pages.  If you think of data-templates as classes in C#, you can think of content as instantiating that class and adding data into it, in order to create pages within Sitecore. 4. Layouts.  Layouts define how a page looks.  A page layout will contain all the HTML & Javascript code needed to render a page. 5. Placeholder.  Placeholders are a slightly more advanced concept than I want to go into in this guide.  Layouts can be thought as a means to allow a content editor to have more control over how a final page will look.

Let's Get Started With Sitecore

Ok, although fairly brief, I've covered the main components we'll need to create in Sitecore and hopefully explained why each one is required.  If you can understand these concepts then building a  page should be a lot more intuitive to you.  In the next guide, I'm going to walk you through creating the data-templates.