Within this tutorial, you will learn how to create your first CMS page within Optimizely 12 (formally Episerver CMS). In order to create a page, you will need the CMS installed locally on your PC. This post assumes you have already done this. If you do not know how to install the CMS, do not panic 😱. The process is pretty simple and should take less than 15 minutes. You can learn how to install the CMS here 🔥🔥🔥
In order to create your first page, you will need to master these skills:
- Create an Optimizely CMS 12 license
- Create a page-type in code
- Render a page-type
- Set the site definition
Following the steps in this article, should allow you to get started building any website you want to. Sounds good, let us crack on 💥💥💥
Creating The Page-Type And Block-Type
In order to allow a content editor to build pages within the CMS, you will need to provide some defined temples that they can pick and choose from. In Optimizely CMS, this is done by creating something called a page type. Optimizely CMS uses a code-first approach to content modelling. This means you can create all of these defined templates in C# code. This approach allows for a much easier deployment process. Using code-first means it's super simple to copy new templates between environments. Simply commit your code into source control, set up a Ci/Cd pipeline and you are all set.
Creating a page type in code is similar to previous versions. I will do a deep dive into all the different attributes and properties at your disposal in a later post. In this post, I'll give you an example of a page type and a block type that you can copy and paste into your solution to get started:
To create a block:
You define all your page and block types in code. When the CMS starts, using reflection, all the assemblies within the 'bin' folder are scanned. Any class decorated with the ContentType attribute is imported as a page or block into the CMS. You can add additional CMS metadata by adding additional properties within the attribute.
To make a class a page type, you decorate it with the ContentType attribute. Within here, adding the GUID property is important. This value will ensure you never bump into import/export issues later on.
To add properties to the page type within the CMS, you need to create a public property within your page-type class and decorate it with the Display attribute. I always recommend adding the Order and the GroupName Order defines the position the property will be displayed within the CMS. Pro-tip, always adds a large range for the Order value, e..g increment in 100s, rather than incrementing by 1. Later on, when you need to add new properties, using a large range will mean less refactoring. GroupName is the tab the property will display within the editor. The default tab names can be found in SystemTabNames, however, you can use any value you want.
Another important thing to remember, when adding a property you will need to use the virtual modifier. If you omit this the property will not be ingested!
Creating The Controller
With a page type created, we can do the MVC part. In this tutorial, I will skip view models and best practices. I will cover all that good stuff in a later post. In summary, use one! To create an MVC page we will need a controller and a view. In Optimizely CMS, we need to associate our controller to our page type. The reason for this is routing. The routing in a CMS is very different compared to a normal MVC. For example, let us use this URL:
In normal MVC, this URL would map to a controller called CheckoutController that had an action method called Order. In a CMS, a page is virtual. It lives in a database. When a page request happens, a lookup needs to be made within the database and the CMS data needs to be returned. This data then needs to be routed to the correct controller.
As a developer, you just want a system that works. This is why in Optimizely CMS, you use a special base controller. Using this base controller means that all of the routing is taken care of for you. In Optimizely, you use PageController where T is the page type you want to associate the controller with. Doing this will then give you access to the CMS page type as a parameter in the Index action. Whenever a site visitor tries to request a page of that page type, regardless of URL, as long as it exists within the CMS database, this controller will be called. After that, you are free to do what you need to!
Not the page inherits from PageController and has our page-type passed in. Another nice thing in .NET core is that you can now use IActionResult and work to an interface, rather than use the older ActionResult
Creating The View
Finally, we can create a view. Within your website's webroot, create a folder called View. Under the View folder, create another folder called Homepage. The name of the folder needs to map to your page-type name. In here, create a view called Index.cshtml.
In here add your mark-up.
Creating Start Page In The CMS
With the page-type created, build the solution and log into the CMS util/login, then episerver/cms. In here click on the + button to add a new page. If you only have a one-page type it will default to the one you created. Call this page anything you want, e.g. home page.
The next step is to tell the CMS that this page is the homepage. Without doing this, you will just get a 404 when you try to view the site 😕
In the CMS, go to the admin UI:
Config âž¡ Manage Website âž¡ New Website
From the screen that loads, add your website URL (your local hostname( and set the page you want to be the homepage. Click on the New Host button and add your local hostname. Job done. Save this and thn view your website. Your homepage should now load!
Getting A License
To get a license you need to head over to the Episerver License Center and generate a new license. Even though we are on Optimizely CMS 12, the funny thing about the license centre is that you need to pick the Episerver 7 option from the dropdown.
Anyone can great e a free developer license. You can only generate a free license every 30 days per email address! In order to generate a license, you'll either need to know your MAC address or the computer's static IP address. I tend to favour the MAC address approach as this doesn't change. To get this on a Windows machine, do this:
You should see a list of settings flash past. If you scroll to the top, you should see a section named 'Ethernet Adaptor'. In here, you will see an entry called 'Physical Address'. The value for this property, should be a 12 digit code separated by dashes, copy that!
After you request a license, check your inbox. You should have an email from Optimizely. The email will contain an attachment called Licence.config. Copy this file and add it to the root of the webroot. Make sure you include the file in your Visual Studio project and set it to copy. When you do a publish, you want to ensure it gets published as well!
To check this worked, log into the CMS, go to the admin UI. Go to config. If things are not OK, you will see a warning a the top of the screen. If things are OK, you should see a yellow 'This site is licensed' message. Job done 🔥🔥🔥
Happy Coding 🤘
