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.
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.
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.
- 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:
- Add http://localhost:4200 to your trusted domains in Hub setup / Security in WCH.
- git clone email@example.com: ibm-wch/wch-site-application.git
- cd wch-site-application
- Edit src/app/Constants.ts and set DOMAIN_NAME and CONTENT_HUB_ID for your hub
- npm install (this may take several minutes)
- npm start
- 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.
- Watson Content Hub Sites Development Overview slides: https://ibm.box.com/s/0od1ta7hsmkxzl2i8y08o06zqwa0pzbq
- Site application source and documentation on Github: https://github.com/ibm-wch/wch-site-application
- Developing your own website: https://developer.ibm.com/customer-engagement/docs/wch/developing-your-own-website/
- Programming model documentation: https://github.com/ibm-wch/wch-site-application/blob/master/doc/README-programming-model.md
- Samples of active site components: https://github.com/ibm-wch/sample-active-site-components
- NPM modules for the WCH SDK and accompanying CLI (the modules are used under the covers by the site application): https://www.npmjs.com/package/ibm-wch-sdk-ng and https://www.npmjs.com/package/ibm-wch-sdk-cli
- Watson Content Hub live samples site: Watson Content Hub Samples
- Watson Content Hub area on GitHub: https://github.com/ibm-wch