Creating A Custom Template For WebMatrix

5 (5 votes)

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:

 

Date Posted:
Last Updated:
Posted by:
Total Views to date: 29771

2 Comments

- Rick

Excellent article. Do you know why the templates from nuget do not install at this location? They are not .zip files they are NUPKG files installed on the site. I would think a site template would install in the templates folder.

- Mike

@Rick

All packages install within the folder structure of the site that they are being installed into. The Package Management system has no way (that I know of) of discriminating between a standard helper type package, and a site template. You can of course dig into the NUPKG file (once you have changed its extension to .zip) and pull out the stuff you find in the Content folder, and use this article as guidance on how to create your own VB template from it.

I've been trying to think of an alternative distribution method for the VB templates, but failed, unfortunately. Not that I'm bothered - I don't do VB :)

Recent Comments

Curt Smith 27/07/2016 20:38
In response to ASP.NET Web Pages vNext or Razor Pages
I am only slightly disappointed to hear that WebMatrix is officially dead, because I suspected this...

Darshan Raj L G 27/07/2016 13:20
In response to Implementing SQL Server Full-Text Search In An ASP.NET MVC Web Application With Entity Framework
I though it would be more helpful for somebody who wants to work with Entity Framework... please EF...

Satyabrata 25/07/2016 08:09
In response to Loading ASP.NET Core MVC Views From A Database Or Other Location
Very Interesting!!...

Jerrie Pelser 23/07/2016 05:08
In response to Loading ASP.NET Core MVC Views From A Database Or Other Location
Very cool concept Mike!...

Satyabrata 20/07/2016 20:54
In response to ASP.NET Web Pages vNext or Razor Pages
Thanks for sharing ...

infocyde 18/07/2016 00:40
In response to ASP.NET Web Pages vNext or Razor Pages
Curious to see if a new release of webmatrix will happen or if that is dead in the water....

Don 15/07/2016 16:58
In response to ASP.NET Web Pages vNext or Razor Pages
Thanks Mike! Wonder if the MVC Lite is the Controllerless Views approach referred to on the Web Dev...

Jose Negro 30/06/2016 16:02
In response to Entity Framework Code First and Stored Procedures
Thank you very much for so clear examples....

A. Truong 29/06/2016 15:25
In response to The Best Way To Import Data From Excel To SQL Server via ASP.NET
Awesome work! Lifesaver....

satyabrata 19/06/2016 18:53
In response to Entity Framework Code First and Stored Procedures
Nice article. Thanks. The menu on this website not working in mobile....