Adding a mobile version for existing site

This page describes how to add a mobile channel for an existing site. This page assumes you are familiar with 1) Adding a new language to an already existing site and 2) Adding a new (sub)site. Also, we assume that the new channel (mobile) will use the same content as the already existing channel (the website).

Steps in the HST-2 configuration

1 Add a new hst:configuration for the new mobile version of myproject.

Assume we already had different translations for myproject and have the following hst:configuration

/hst:hst:
  /hst:configurations:
    hst:default:
    /common:
      /hst:pages:
      /hst:components:
      /hst:templates:
      /hst:catalog:
    /myproject:
      hst:inheritsfrom: [../common]
      /hst:sitemap:
      /hst:sitemenus:
      /hst:channel:
        hst:name: My project
    /monprojet:
      hst:inheritsfrom: [../common]
      /hst:sitemap:
      /hst:sitemenus:
      /hst:channel:
        hst:name: Mon projet

Depending on your domain specific use case, we can or cannot reuse the common part for the already existing site myproject. Assume that the new channel mymobile has the same hst:components and hst:catalog but it has different hst:pages and hst:templates. We can thus reuse everything except the hst:pages and hst:templates. If we first move hst:pages and hst:templates to website, we can later on easily add mymobile. Thus

Step 1 Split off hst:pages from common

/hst:hst:
  /hst:configurations:
    hst:default:
    /common:
      /hst:components:
      /hst:catalog:
    /website:
      hst:inheritsfrom: [../common]
      /hst:templates:
      /hst:pages:
    /myproject:
      hst:inheritsfrom: [../website]
      /hst:sitemap:
      /hst:sitemenus:
      /hst:channel:
        hst:name: My project
    /monprojet:
      hst:inheritsfrom: [../website]
      /hst:sitemap:
      /hst:sitemenus:
      /hst:channel:
        hst:name: My project

Step 2 Add mymobile

/hst:hst:
  /hst:configurations:
    hst:default:
    /common:
      /hst:components:
      /hst:catalog:
    /website:
      hst:inheritsfrom: ../common
      /hst:templates:
      /hst:pages:
    /myproject:
      hst:inheritsfrom: ../website
      /hst:sitemap:
      /hst:sitemenus:
      /hst:channel:
        hst:name: My project
    /monprojet:
      hst:inheritsfrom: ../website
      /hst:sitemap:
      /hst:sitemenus:
      /hst:channel:
        hst:name: Mon projet
    /mymobile:
      hst:inheritsfrom: ../common
      /hst:sitemap:
      /hst:sitemenus:
      /hst:templates:
      /hst:pages:
      /hst:channel:
        hst:name: My mobile

Now you can customize the hst:pages and hst:templates for the mobile version just to get a mobile site.

2 Add a new hst:site for the new mobile channel

Assume you already had:

/hst:hst:
  jcr:primaryType: hst:hst
  /hst:sites:
    jcr:primaryType: hst:sites
    /myproject:
      jcr:primaryType: hst:site
    /monprojet:
      jcr:primaryType: hst:site

Copy the myproject, and rename it to mymobile. Because we reuse the same content for the website and the mobile channel, the hst:content property points to the same content as the hst:content property for myproject. We thus get something like:

/hst:hst:
  jcr:primaryType: hst:hst
  /hst:sites:
    jcr:primaryType: hst:sites
    /myproject:
      jcr:primaryType: hst:site
    /mymobile:
      jcr:primaryType: hst:site
    /monprojet:
      jcr:primaryType: hst:site

3 Create the host or "URL space" for the new mobile channel.

Assume you already had

/hst:hst:
  jcr:primaryType: hst:hst
  /hst:hosts:
    jcr:primaryType: hst:virtualhosts
    /prod:
      jcr:primaryType: hst:virtualhostgroup
      /com:
        jcr:primaryType: hst:virtualhost
        /myproject:
          jcr:primaryType: hst:virtualhost
          /www:
            jcr:primaryType: hst:virtualhost
            /hst:root:
              jcr:primaryType: hst:mount
      /fr:
        jcr:primaryType: hst:virtualhost
        /monprojet:
          jcr:primaryType: hst:virtualhost
          /www:
            jcr:primaryType: hst:virtualhost
            /hst:root:
              jcr:primaryType: hst:mount

now, adding the new mobile as a new host can be done as follows:

/hst:hst:
  jcr:primaryType: hst:hst
  /hst:hosts:
    jcr:primaryType: hst:virtualhosts
    /prod:
      jcr:primaryType: hst:virtualhostgroup
      /com:
        jcr:primaryType: hst:virtualhost
        /myproject:
          jcr:primaryType: hst:virtualhost
          /www:
            jcr:primaryType: hst:virtualhost
            /hst:root:
              jcr:primaryType: hst:mount
          /m:
            jcr:primaryType: hst:virtualhost
            /hst:root:
              jcr:primaryType: hst:mount
      /fr:
        jcr:primaryType: hst:virtualhost
        /monprojet:
          jcr:primaryType: hst:virtualhost
           /www:
             jcr:primaryType: hst:virtualhost
             /hst:root:
               jcr:primaryType: hst:mount

We have added above the host m.myproject.com. Make sure the hst:mountpoint for

/hst:hst/hst:hosts/prod/com/myproject/m/hst:root 

points to the created node /hst:hst/hst:sites/mymobile in the step 2.

Now we still need to do one important thing. Namely, we need to indicate that the new channel is of type mobile. Consider the following: HST needs to create a cross domain link between the French and English sites. However, in a mobile environment, we want a mobile cross domain link, and in website environment, we want a website link; in the content however, the link between the two documents is the same. We thus need to give HST an extra hint about the channel. We do this through the  hst:types property on the hst:mount. Mounts that have the most types in common, have preference to link to each other.

Thus, in the example above, for example add to the Mount at hst:hst/hst:hosts/prod/com/myproject/m/hst:root the property:

  hst:types: mobile

Now, if you also add a French mobile version, then cross domain links have channel awareness: The links stay within the website versions for websites and vice versa for mobile sites.