Creating A Custom Template For WebMatrix

WebMatrix includes a number of pre-built templates that you can use as a basis for developing your site, but wouldn't it be great if you could add new ones? Well, there is a way to do so, and this article looks at the steps required.

I have been playing with WebMatrix since its first Beta last July. I must have created hundreds of sites... well, perhaps "sites" stretches it a bit - most of them have been one page examples to test stuff out. However, I have found myself repeatedly going through the same motions to provide a basic structure: Use the Empty Site template and add a series of folders and files. I add a folder called Shared for layouts and partial pages, one called Styles for CSS, another called Scripts for jQuery, an App_Code folder for helpers, an App_Data folder for a database file etc, etc. And then a series of starter files. Boring. Boring. Boring. Zzzzzzzzz. The Empty Site template will never infringe any trade descriptions rules - it is totally empty (except for a an empty robots.txt file). What I needed was a basic site template with all the common folders and files already there. So I had a little poke around the WebMatrix application file structure to see what I could see.

Templates are stored in a folder called "templates" which is in the Microsoft WebMatrix folder. This will be stored in your default "Program Files" folder ("C:\Program Files (x86)" on my 64 bit machine). In there, you will see a series of .zip files, a folder called "resources" and a TemplateFeed.xml file:

Each of the .zip files contains three items: a folder which contains the template site folder structure and files, and two XML files, manifext.xml and parameters.xml. These .zip files are actually Web Application Packages, which is the format that Web Deploy works with to install an application on IIS. There is quite a bit of information on creating Packages in this article, but it it a simple process really.

Step 1.

Create a site from the Empty Site template in WebMatrix. I have called mine "BasicSite". Add the core folders that you want, and the starter files. I have added a basic layout page, which references the style sheet and jQuery, which have also been added to the folders:

Step 2.

Once you are happy that you have a site that forms a reasonable starting point, you can close WebMatrix and go to the folder where your Web Sites are located. Typically, this is likely to be within your documents folder - C:\Users\{your user name}\Documents\My Web Sites. You should find the site you just built. At this stage, I found it easiest to just copy the folder to the C:\ drive root.

Step 3.

If you have read the previous link about creating packages, you will know that two xml files are required. You've guessed it: the manifest.xml and parameters.xml files that we saw earlier. In actual fact, you can simply copy the ones from the Empty Site template and modify them to reference your new site name:

<!--parameters.xml-->
<parameters>
  <parameter name="Parameter 1" description="Full site path where you want to install 
          your application (for example, Basic Site/Application)." defaultValue="BasicSite" tags="IisApp">
    <parameterEntry kind="ProviderPath" scope="iisApp" match="BasicSite" />
  </parameter>
</parameters>
<!--manifest.xml-->
<MSDeploy.iisApp>
    <iisapp path="BasicSite" />
</MSDeploy.iisApp>

If you want to start with a database, like the membership one that comes with the Starter Site template, you will need to add some other elements to each file to set the correct permissions on App_Data. More information can be found at this Web Application Package Reference, but you can also take a peek at the files that come with the Starter Site template.

Step 4.

Use Winzip or WinRar to create a zip file so that the XML files are placed in the root of the resulting zipped folder:

Step 5.

You need to generate an SHA-1 cryptographic hash value for your .zip file. This is used to verify the integrity of the file, and ensures that the contents have not been tampered with prior to creating an application on IIS. The easiest was to do this is with the File Checksum Integrity Verifier tool. If you don't already have it, download the utility from the previous link and put the resulting .exe in the root of your C:\ drive. To run it, bring up a Command prompt (type "cmd" in the Start button search bar on Win 7, or in the Run box if you still have that) and navigate to the C:\ drive (type "cd C:\" and hit Enter). Now type the following, changing "BasicSite.zip" to the name of your zip file:

fciv C:\BasicSite.zip -sha1

You should get a mixture of numbers and letters, which you need to keep for the next step.

Step 6.

Now you need to add an entry for your package into the TemplateFeed.xml file. Here's a sample entry. It's basically a copy of the Empty Site template entry with my modifications highlighted in yellow:

 <entry type="application">
    <productId>Basic Site</productId>
    <title>Basic Site</title>
    <version>1.0</version>
    <summary>Basic web site set up with jQuery and layout page</summary>
    <id>http://mikesdotnetting.com/webmatrix/basic</id>
    <updated>2011-01-14T20:30:02Z</updated>
    <published>2011-01-14T20:30:02Z</published>
    <longSummary>Sample basic site with jQuery and Layout set up.</longSummary>
    <link href="http://mikesdotnetting.com/webmatrix/basic" />
    <images>
      <icon>http://www.mikesdotnetting.com/images/basic.png</icon>
    </images>
    <keywords>
      <keywordId>Templates</keywordId>
    </keywords>
    <author>
      <name>Mike</name>
      <uri>http://www.mikesdotnetting.com/</uri>
    </author>
    <installers>
      <installer>
        <id>1</id>
        <languageId>en</languageId>
        <installerFile>
          <fileSize>50</fileSize>
          <installerURL>file://%ProgramFiles%\Microsoft WebMatrix\templates\BasicSite.zip</installerURL>
          <sha1>c680b830c7964d6605df6a0d169fd22a4e111fee</sha1>
        </installerFile>
        <msDeploy />
      </installer>
    </installers>
  </entry>

Most of the entries are self explanatory. I did however upload a 48x48 png image file to my web site to act as an icon, and referenced the URL of that in the <icon> element. I also carefully added my SHA1 hash.

Step 7.

Move or copy the .zip file to the templates folder. Job done. Now, when you choose the Create Site From Template option, you will have a new one: