In this tutorial, you will learn the basics of how to start creating and rendering a page using SitecoreCMS. This post assumes that you are completely new to CMS development and Sitecore CMS. By the end of this article, you will hopefully have a basic understanding of how to convert a PSD created by a designer and convert that into Sitecore. As the process of converting a design into Sitecore is fairly long-winded, this post is the first in a series. This four-part series will cover everything you need to know in order to get up and running.
Introduction To CMS Development
Let's start at the very beginning, in 1990 HTML was released, HTML was a major breakthrough 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 simple for developers to build. Sites were made from static HTML files that lived on a server. 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 was painful. A developer would have to create a new file and copy it onto the server. If the menu needed to change, then all the HTML pages needed updating.
This workflow was not great. Developers are expensive resources. Marketers want to market now, they do not like to wait. Having to wait days/weeks to see content updates did not work for most companies. This architecture is also not efficient. Whenever a new page was created, the menu HTML code in all the other pages would need updating. Bugs and mismatches in HTML between different pages could occur. 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 and tedious 🥱🥱🥱!
As you can imagine, using static HTML for a website with more than 10 pages doesn’t scale. If your website had thousands of pages, keeping the site consistent would be impossible, or a full-time job. This issue is how Sitecore and other CMS systems came into existence. The CMS was conceived to primarily tackle these two problems.
The purpose of this history lesson is to highlight an important concept. 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 repeat the same tasks on different pages. 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 bog-standard website will have many different types of pages. Every site will have a homepage, which will usually look different to any other page on the site. A website will normally have a landing page that will also look slightly different. A website will almost definitely have content pages, which will also look slightly different again. Another example of a page type is the contact us page. In Sitecore, we create page types within the CMS by creating a data template and a layout for each type of page.
Each page will have a number of similar properties. For example, every page will need to render similar HTML meta-data within the head section. Each page type will also require properties that are unique to that particular type. A landing page might require a property to render a big banner at the top of the page, while a content page, might just have a rich-text property and nothing else. The first thing to do, when designing a Sitecore project is to agree on the different types of pages and the common components that will be needed on the site. Commonly shared components will typically be the header, menu, footer, breadcrumbs, a search bar etc...
Our aim, as developers, is to remove duplication from our code and from within the CMS. One way of doing this is to further split repeated elements defined within the page design 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 each identified component. Nowadays I assume you will build a site using MVC 🌇.
Linking to the header and footer within every page layout is a source of duplication you will not want. Imagine we have three types of pages in Sitecore, homepage, landing and content page. If we simply added references to the header and footer from each page type, we still have duplication. The references to these components will be duplicated in each view. To avoid this duplication, master layouts can be used. The master layout should be used to define the common elements between the pages. The master layout is the place to define the website site furniture. All data required to render the header and the footer should be added to the master layout. The master layout should contain all the data required to render any shared HTML on the site. Master layouts are the place to add data that should not belong to a specific page. Examples include the head section page title, items like CSS links, Javascript references, etc... Each page layout will reference the same master layout. This will give the site a consistent look and feel, all without the content editor having to duplicate content! This will make maintenance a lot easier in the future.
How To Build It In Sitecore?
I have covered a lot of new concepts in this article, so now is probably a good time to have a quick recap:
Master Layout: We need a master layout to display the header, footer and all other common HTML elements like the section, CSS links, etc...
Data Template: 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.
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 within Sitecore.
Layouts: Layouts define how a page looks. A page layout will contain all the HTML & Javascript code needed to render a page.
Placeholder. Placeholders are a slightly more advanced concept than I want to go into in this guide. Placeholders allow content editors to have more control over how a final page will look.
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. Happy Coding 🤘
