Skip to main content

Create a Simple home page in Optimizely CMS

 



Introduction

In this blog post, I will walk you through a step by step process to create a very basic home page on a Optimizley CMS Empty site. This is part of the “Learning by Doing: Build series” where we build a fictional website from scratch to focus on hands on learning and gain practical insights.

If you prefer a video, please check out Optimizely CMS - Learning by Doing : EP02.


Step 1: Create Empty Website

Create a project using Optimizley CMS Empty Template

 

 

Build and Run

 

Set up administrator account

You will be redirected to home page but since the home page is not yet set up, 404 error is displayed

Verify if you are able to login to admin / CMS interface by navigating to localhost:5000/EPiServer/CMS

Step 2: Create Models

•       Create Base Page Type (SitePageData.cs)

•       Base class for all the pages to inherit common properties like SEO

•       Create Start Page Type (StartPage.cs)

•       This will be the homepage content type

Step 3: Create Controller

•       Create StartPageController.cs

•       Use MVC to render the page , Use EpiServer à Core à Page Controller and pass the StartPage Model from controller to view for rendering

Step 4 : Create Layout & Page Views

•       Create a _Layout.cshml

•       Create the Razor view for Home page

•       Setup _viewstart.cshtml

Step 5: Create Page in CMS

•       Verify the Page type in CMS --> Edit

•       Create Page in CMS

•       Build and Run the Website

•       Go to Admin --> CMS --> Edit

•       Create a new Page using StartPage Type under Root

 

 

•       Fill in Site Title and description

•       Publish the Page

•       Setting -->Manage Website

•       Go to Settings --> Mange Website

•       Fill in Name, URL, Start Page as Root/StartPage

•       Create Site

•       Update StartPage Type GUID in Code

•       Go to Settings --> Content Type

•       StartPage should be listed , click on Start Page à Details

•       Copy the GUID

•       Update StartPage model with the GUID

•       Build and Run again

Watch the Full Video

Prefer watching? Here is the full walkthrough on YouTube



Labels:

Comments

Post a Comment

Popular posts from this blog

Optimizely CMS : Overview of the Architecture

Optimizely is considered one of the top digital experience platforms.   In this blog, let us break down the architecture of Optimizely CMS, which is the core of the Optimizely DXP stack. This quick 3-minute read offers a concise glimpse into the layered architecture of Optimizely CMS. Optimizely CMS architecture can be visualized as layered architecture which includes the following layers. Platform & Framework The Optimizely CMS is build on ASP .NET core & hosted using Webservers like IIS, Kestrel OR Cloud environments Optimizely CMS Admin UI is built using JavaScript & DOJO toolkit enabling functionality like drag and drop, On page editing, responsive panels, custom widgets, plugins etc Data This layer handles storage and retrieval of content Microsoft SQL Servers stores the content, Azure SQL is also supported Integration to External content provides great flexibility Create Playground for the content authors and marketers Offers basic building bl...
Post a Comment
Read more

Demystifying Optimizely Synchronization

  If you have ever wondered how basic information (like GUID) from the ContentType created using Optimizely Admin view and the properties from the code come together seamlessly to provide the content type. Let us unbox and find out the process of prefect harmony   What is Synchronization? As soon as the Optimizely website starts, it scans all the assemblies and looks for classes decorated with [ContentType] and properties [Display] or [Property]. Once the scan is complete, it compares these with the content types defined in the database and synchronizes based on one of the seven use cases as mentioned below. Key 7 Use cases :  # Use Case Pre-Condition Sync Process 1 New Content Type A new Class with [ContentType] is added to the code ·        Creates content type in DB ·        Properties are added to DB 2 ...
Post a Comment
Read more