The Digital Experience Platform blog covers the latest in innovative technologies to help you transform your business.

Build your blog site using the Oracle JET framework and Oracle Content & Experience

Ankur Saxena
Principal Product Manager

If you are looking to bring in blogs as part of your website using the Oracle JET framework and want to use the power of a headless content management system to support rich content in your site, you’ve come to the right place.

I have mentioned a Blog Site sample in my previous blog “Introducing a Blog Site sample in your favorite technology using Oracle Content and Experience as a Headless CMS”. By using the content management system for blog sites, we can really make the blogging process simple and content contributors can easily focus on writing blogs with rich content. Developers can simplify the creation of Blog Sites using headless Oracle Content and Experience and can quickly build Blog Sites trying sample tutorials available in their favorite technology. 

To go deeper into the Oracle JET framework, here is an introductory blog that explains how you can download the oce-jet-blog-sample from GitHub and try it yourself. We have also created a video to provide you with more details and internals on Oracle-JET blog sample

Here is how the GitHub page looks like for oce-jet-blog-sample

The first step is to clone the sample into your existing local directory folder and then change the directory to the one you have just cloned.

username@user-dir ~/projects> git clone https://github.com/oracle/oce-jet-blog-sample

username@user-dir ~/projects> cd oce-jet-blog-sample

username@user-dir ~/p/oce-jet-blog-sample>


Before we proceed, make sure you install all the dependencies involved to run this project by running the npm install command.
username@user-dir ~/p/oce-jet-blog-sample> npm install


Once you open the codebase that you have just cloned in your machine in a code editor, you will see the following directory structure (Atom code editor).


Go to src/config/oce.json file and provide the serverUrl and channelToken. To let you try the sample quickly, there is a default server URL and channelToken in place to one of our live demo servers that you can choose to leave in place. When you are ready to create your own content, you can replace with server URL to your own instance and provide a token for your own channel.

Now, we just need to type npm start command to run the sample

username@user-dir ~/p/oce-jet-blog-sample> npm start


Oracle-JET sample puts together a local development environment and runs the sample in a browser @ https://localhost:8000


The sample contains a list of blog topics and when you navigate into these topics, you'll see list of blog articles about the respective topic. Users can then click on the blog tiles to read the full blog article

All the content displayed by the sample is dynamic and is fetched at runtime from an Oracle Content and Experience channel.

To know more about oce-jet-blog-sample, here is a video that is created specifically to demonstrate this sample. If you want to learn more about this sample, you can try out our simple blog tutorial on Oracle-JET. If you are interested and want to try out more samples in various technologies, see OCE Headless samples

Before starting with the tutorials, if you have not set up an OCE account yet, please have a look at Oracle Content & Experience Quick Start Guide. To know more about OCE, you can read Overview of Oracle Content and Experience and if you want to go through the OCE headless CMS capabilities have a look at Oracle Content and Experience as  Headless CMS. You will find complete OCE Headless CMS documentation at  Oracle Help Center.


Developers can simplify the creation of Blog Sites using headless Oracle Content and Experience and can quickly build Blog Sites. Now, developers can easily download and try oce-jet-blog-sample. They also can go through oce-jet-blog-sample tutorial and learn how to fetch content from OCE asset repository. Here is a video to explain oce-jet-blog-sample.


Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.