Watson Content Hub (WCH) recently added a major new functionality for building and maintaining websites. For more information, see the earlier blog post: Watson Content Hub: What’s new in August/September 2017. This website functionality builds on top of the earlier “headless CMS” and “asset management” features of WCH. In this post, we’ll talk about how you can customize a website to include your branding, content, and design. Links to additional resources on customizing a site are provided at the end of this post.

The Oslo starter site template

Each Trial or Standard Edition content hub is pre-populated with a starter site template, with example content for a fictitious “Oslo” home furnishing design site. This site features a fully responsive design and it includes a set of reusable layouts and templates that you can use for your own sites. You can remove the “Oslo” pages and use the layouts, templates, and site application as a starting point for building your site.

Site architecture

A WCH site runs as “single page application” for performance and responsiveness. This site application uses the Angular framework, with web application code files that are optimized and combined during a build process, then hosted on the Akamai CDN provided with WCH. The site application source is customized and managed by a web developer working with HTML/JS/CSS.

All of the content for a site – the site structure, content items, and assets – is managed by marketers and content specialists using the WCH business user interface.

The following diagram shows this site architecture, with the site application hosted on the CDN and the site content managed with the WCH business user interface.

Customizing the site application

For some site customization tasks, a web developer will work with site application source. Customization tasks that involve working with the site application source include:

  • Creating and editing layouts for content or pages. There are a number of reusable layouts provided with the Oslo starter site template, but for new layouts you will work with the site application source. This is made easy with convenience commands that automatically generate a new layout for any content type, including example code showing how to render any of the elements of the content.
  • Changing CSS styles. The site application uses the .scss format for CSS styles, with support for Sass features such as variables, import, and many others that simplify style management. You can set styles for individual components or globally for the entire application.
  • Adding JS functions or libraries for dynamic behavior. The site application code uses the TypeScript extension of JavaScript, with its added support for data types and other features. You can also easily use any JS libraries to implement other application functionality. See the samples linked below for some examples.
  • Customizing other site aspects such as navigation, header, and footer. The entire site application source is available for customization by the web developer. You can change any aspect of the site to meet your requirements.

Getting started with customizing the site application

You can start customizing the site application source with these simple steps:

  1. Add http://localhost:4200 to your trusted domains in Hub setup / Security in WCH.
  2. git clone git@github.com: ibm-wch/wch-site-application.git
  3. cd wch-site-application
  4. Edit src/app/Constants.ts and set DOMAIN_NAME and CONTENT_HUB_ID for your hub
  5. npm install (this may take several minutes)
  6. npm start
  7. Open in a browser: http://localhost:4200

You now have the site application running on a local test server, showing content from your live content hub. You can open the wch-site-application/src folder in your editor of choice to start working with the source. Whenever you save any modified source file the browser test window will automatically refresh to show your changes. This gives a very quick edit/test cycle for working with the code.

Note: You must store your updated site application source in a source code management system (SCM) such as GitHub. If you are collaborating with other web developers, be sure to update the shared source frequently to avoid conflicts.

Resources for web developers working with Watson Content Hub sites

Here are some resources with more details on developing Watson Content Hub sites. Stay tuned to this developer center for news on additional samples and other resources coming soon.

Join The Discussion

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