Overview

Skill Level: Any

The IBM Watson Content Hub Trial and Standard editions include features that help you create websites, and include a pre-installed fictitious sample website “Oslo. Oslo is a responsive sample website that illustrates what you can create by using Watson Content Hub. You can use the sample site as a starting point for customizing your own website. Work with your team to develop a website that will engage customers and drive business to your site. Follow this roadmap to get started with building and developing your own website with Watson Content Hub Standard edition.

Prerequisites

For more information about Watson Content Hub and all the available Watson Content Hub developer tutorials, click here.

Step-by-step

  1. Getting your own Standard edition of Watson Content Hub

    Get a free Trial version or to upgrade to the Standard edition from IBM Marketplace.

  2. Getting the IBM Watson Content Hub Developer Tools

    Prerequisite – Install a Node environment with a recent stable version greater than  Node >= 8.

    1. Install the command line interface (CLI) based utility for working with Watson Content Hub — wchtools.

    2.  Learn to work with the CLI tool — Working with wchtools.

  3. Setting up the content hub website sample Oslo

    The website sample Oslo comes preinstalled with Watson Content Hub Standard edition.

    Note: You must manually install the Oslo sample when

    • you have an older Trial tenant,
    • when you upgraded to the Standard edition and the sample website was not installed or does not display.

    To manually install the Oslo sample

    1. Download the WCH Sites single page application content from the Download starter site widget on the Watson Content Hub Home page UI.
    2. Install the Oslo site content in your tenant by following the instructions in the tutorial Updating the Oslo site.

     

    The default Oslo sample is based on the Angular framework. You can also try the sample site in other frameworks.

    1. Try the sample Oslo site in React.js — Oslo sample in React.
    2. Try the sample Oslo site in Vue.js — Oslo sample in Vue.
  4. Getting to know the starter site

    Familiarize yourself with the sample website Oslo. Learn about the sample website structure, content model, and how your team can collaborate and work with the sample site to make it your own.

    1. Watson Content Hub – Sites Development Overview.
    2. Website development — Scenario.

    3. Working with the sample website — Website: Make our sample your own.

    4. How the sample is built — Content Model.

    5. Developing your own website — Overview.

  5. Setting up your development environment

    Setting up a local development environment helps you to make changes to the code without disrupting the live site or the changes that are made by other team members. You can test and debug your work locally.

    1. Download the site application source files — Site source.
    2. Work in your local development environment — Setting up your development environment.
    3. Understand the programming model — Programming Model for customizing the sample.
  6. Customizing the sample site

    Explore and experience the sample Oslo by customizing the site and make the sample website your own. To adapt the starter site for your purposes, you must customize the site application and the site content.

    Customizing the site content

    1. Creating pages for your website
    2. Add pages to your site hierarchy
    3. Define content structure
    4. Add content to the page

    Customizing the site application

    1. Customizing layouts
      1. Adding layouts for an existing content type
      2. Adding layouts for a new content type or page type
    2. Customizing header and footer
    3. Adding a new element to banner section
    4. Adding custom components
      1. Creating Iframe components
    5. Customizing site search
    6. Adding analytics to your site

     

    Get inspiration for customizing the sample Oslo site from the samples in the Watson Content Hub samples gallery.

  7. Updating the sample site to the latest version

    IBM Watson Content Hub delivers new features frequently to create a better and easier  web developing experience for you. Sometimes to enable the new features in your Oslo sample, you must update the Oslo sample to the latest version. 

    To update the Oslo sample

    1. Download the WCH Sites single page application content from the Download starter site widget on the Watson Content Hub Home page UI.
    2. Install the Oslo site content in your tenant by following the instructions in the in the tutorial Updating the Oslo site.

Expected outcome

For more information about Watson Content Hub and all the available Watson Content Hub developer tutorials, click here.

3 comments on"Roadmap — Developing your own website"

  1. In section 4 step 1 “Watson Content Hub – Sites Development Overview” the link points to https://ibm.ent.box.com/file/216518056399 which I cannot reach since I am not an IBM employee.

  2. Thulsi doss krishnan December 14, 2018

    Hi, I’m unable to view the following pages 2. Add pages to your site hierarchy 3. Define content structure 4. Add content to the page . I get a error message in the browser.

Join The Discussion

Your email address will not be published. Required fields are marked *