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)

•       This is the 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 a Core a 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