Build a Website

Introduction

This tutorial will guide you through the development of GoGreen, Hippo's demo web site. The tutorial follows two development iterations. In each iteration you will deliver a working site and increase your Hippo knowledge level at the same time. At the end of the tutorial, you will have a good idea of the basic development tasks involved in the implementation of a Hippo-based web site.

Prerequisites

Before you start this tutorial, you must:

Experience with Java development is not required because you will exclusively use standard components.

Using an IDE like Eclipse or IntelliJ is highly recommended.

Approach

Iteration

1. Configure Out-of-the-Box Features

2. Develop New Features

Scope Select and configure out-of-the-box Banner, News and Search features and apply the GoGreen web design to them. Customize page layout and develop a new Products feature using standard components.
Tasks
  1. Select Out-of-the-Box Features
  2. Configure Image Variants
  3. Add Static Resources
  4. Base Page Configuration
  5. Configure Home Page
  6. Configure News Overview
  7. Configure News Detail
  8. Configure About Page
  9. Configure Navigation Menu
  10. Configure Search
  11. Add Related News
  1. Two Columns Page Configuration
  2. Secondary Navigation Menu
  3. Product Document Type
  4. Products Overview Page
  5. Featured Products
  6. News Faceted Navigation
Code on Github https://github.com/onehippo/website-tutorial/tree/iteration-1 https://github.com/onehippo/website-tutorial/tree/iteration-2

Get Started

Go ahead and start with the first iteration!

The scope of this tutorial is restricted to the development of features in a Hippo-based web site. In the real world the process of delivering such features involves more than just development and includes among others: collaboration, version control, quality control, release management and deployment strategies. Those aspects are outside the scope of this tutorial. However, Hippo offers a comprehensive training program which covers many of those aspects as well.
The web design for GoGreen uses the Kanzi bootstrap theme under its Extended License. If you use it for anything else than the Developer Trail you will need to buy your own license.