Wednesday, March 17, 2010

Creating a blog Site with dotCMS(A Open Source Java CMS)

In my organization I had to create a blog site for one of my International team. The obvious options were to chose from vast range of PHP based CMS. But due to some technical issues we could not proceed to them and we were asked to use Open Source Java based CMS. After few days analysis we found that dotCMS matched our requirements for the blog site.

I searched on the net and found very little documentation on how to work with dotCMS however. It took me couple of days to figure out how to make a customized site only for blogging using dotCMS.

Here are few building blocks of dotCMS architecture.

1.Structure
2.Content
3.Category
4.Relationship
5.Container
6.Template

For any site we need to understand these properly and the initial documentation is given at this url

dotCMS comes bundled with a starter site that contains a blog module in itself. We will use this blog module to create a blog site of us named as MySite.

We will first login as admin user(test@dotcms.org/test) to http://localhost/c url.
We see that there are bunch of links available there for managing whole site. However initially we will be interested only in Container and Template section.



In every website we have few elements common to all like Header, Footer, Left Side Navigation, Right Side Navigation and Center Body. There also needs to be a template file which will contain all these elements.

Hence we will create/modify few files for things to work.

1.Create a container MySite-Header by clicking on Add/Edit Container link and write down the html that will go to your header

2.Create a container MySite-Footer by clicking on Add/Edit Container link and write down the html that will go to your footer

3.Create a container MySite-CenterBody by clicking on Add/Edit Container link and write down the html that will go to your center body(Make sure you have selected max contents to be non zero). Chose WebPageContent as content's structure. Normally the code for the body will be $!{Body} because it will be replaced with the content you will add to the center body container.

4.Create a container MySite-LeftSideNavBar by clicking on Add/Edit Container link and write down the html that will go to your Left Side Navigation Bar

5.Create a container MySite-RightSideNavBar fby clicking on Add/Edit Container link and write down the html that will go to your Right Side Navigation Bar

6.Create a template MySite-Template by clicking on Templates and then Add/Edit Templates link. You will write here the overall layout of the site. While creating the template code you also need to include the headers, footer, center body, left side navigation bar, right side navigation bar container just created above. For this you need to click on Add Container button and search for all your containers, this selected container will now be included in the code of your template created.

Click on Save and Publish to make your template active.

Now click on Browser section and browse to /global/images and create a new folder called mysite  by right clicking on images->New->Folder

Now upload all your css/images files there. You may also create a separate folder for images and css in the same way.

Now Go to Browser section again and disable all shown folders to be shown on Main Menu by right clicking on each folder and selecting Edit. Make sure you have unchecked the Show on Menu checkbox.

Now we will modify the pages in /blog directory to customize them. First of all we will modify the index.dot file by double clicking on /blog/index.dot.  When you click on the index.dot you will see a link  Page Properties on the top left side of the page. By Clicking on this link we will change the page template to our created MySite-Template.


We will change the templates of all the files present in /blog folder so that every page is in consistency with the site template.


We will now start adding actual content to all the pages modified.

For doing this we need to click on Add Content link and selecting Reuse content from the drop down. We need to search for "Widget-blog listing" content from the search window.

We need to add the content "widget - Entries by tag" in tags.dot.

Now click on add content button and chose widget - Blog Entry Detail (with audio catcha) to /blog/detail.dot

Add the content "Contributor Blog Entries" in contributor_blog_entries.dot

Add the content "Blog Archived List" in archived_blog_list.dot

Add the content "Widget - Blog listing" again to entries.dot

This now completes the blog site creation tutorial. I will update the role and user creation tutorial in next few days.

Sphere: Related Content

2 comments:

Karthik said...

Thank you so much.

Unknown said...

Glad that you found it useful. Let me know in case I can be helpful.

Ahsan