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:
- Have experience with basic web technologies like HTML and CSS.
- Have experience with templating languages like Freemarker or similar.
- Have Java 8 and Maven 3 (3.2.1+) installed.
- Know how to create, build and run a Hippo project.
- Be familiar with the Hippo CMS User Interface.
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
- Download the GoGreen web design from Github.
- Start with the first task: Select Out-of-the-Box Features!
- The source code of each completed iteration can be downloaded/cloned from Github if you want to skip an iteration. We do recommend you follow the entire tutorial if you are new to Hippo.
- See the troubleshooting page if you have any issues, or ask your questions at the developer forum.
| 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 | ||
| Code on Github | https://github.com/onehippo/website-tutorial/tree/iteration-1-v11 | https://github.com/onehippo/website-tutorial/tree/iteration-2-v11 |
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.