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: 29431

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

Jon 31/03/2016 21:36
In response to Exploring Prefix: A Free ASP.NET Profiling Tool
We had the exact same experience, finding multiple bugs in an application that we thought was pretty...

ranjith 31/03/2016 05:50
In response to A Better Way To Export Gridviews To Excel
Hello Mike. i am exporting from gridview, because i have some images in my gridview. but i am error...

Matt Watson 30/03/2016 22:19
In response to Exploring Prefix: A Free ASP.NET Profiling Tool
Glad you are loving it! Matt from Stackify...

Dmitry 28/03/2016 04:26
In response to Solved - The Microsoft.ACE.OLEDB.12.0 provider is not registered on the local machine
thank you about the VS 32-bit remark...

federico 26/03/2016 11:29
In response to Request.Form Is Empty When Posting To ASPX Page
thanks!....

Micheal 23/03/2016 00:58
In response to ASP.NET MVC 5 with EF 6 - Working With Files
Thanks for the code. its pretty straightforward. worked for me on my first trial. Perfect!...

Francisco 22/03/2016 20:35
In response to ASP.NET MVC 5 with EF 6 - Working With Files
The post is very good, thanks...

Nick Brown 22/03/2016 13:53
In response to Adding A View
Hi, Many thanks for this tutorial, it's helping me get started with MVC. In VB (VS 2013) I get late...

ferry mae 22/03/2016 13:04
In response to Send form content by email in ASP.NET
do i need to change this? message.To.Add(new MailAddress("me@domain.com")); message.CC.Add(new you...

Keith 22/03/2016 12:02
In response to Creating a Connection String and Working with SQL Server LocalDB
As always worst explanation, but this time you rocked with plagiarism too .. huhh.. copied from Rick...