Installing Umbraco with WebMatrix

Umbraco is a free, open source web CMS. This article will show how to install, configure and upload an Umbraco application with WebMatrix.

WebMatrix is a free tool that allows you to create, customize, and publish webpages. It gives a number of different ways that you can create websites. One of the features is providing existing open sources applications such as WordPress, Joomla, or DotNetNuke. In this tutorial, you will see how quick and easy it is to get your Umbraco application up and running!

Installing Umbraco using WebMatrix

First things first, you will need to download and install WebMatrix. WebMatrix can be downloaded for free at www.microsoft.com/web/webmatrix. When you launch WebMatrix you will see several options on how to create a new application. To create an Umbraco application, select “Site from Web Gallery”.

Choose the “Umbraco” option to install the application.

You will be prompted to install Umbraco. To do this you must click the “I Accept” button.

Now we must wait while Umbraco is installed.

Once Umbraco is successfully installed we will get a confirmation.

We’re now ready to begin creating our Umbraco CMS application. Clicking the “OK” button will take us to our WebMatrix workspace with the Umbraco CMS application loaded.

Running our application will open the configuration wizard. To run the configuration wizard, click the “Run” button on the Menu Ribbon. Note: make sure to run the root folder of the application.

Running our application will open the Umbraco Installation Wizard. You will be taken to an introduction screen.

Once you click “Let's Get Started”, the installation wizard will begin. The first step is to accept the license agreement.

After we accept the terms, we will need to configure our database. If you already have a database set up, select that option. If not, you can use the SQL CE 4 database - a free, embedded database. If you choose this option, you will not need to enter database information.

Once you click “Install” we will get a confirmation that our database has been configured. Click the “Continue” button.

The next step is to create the admin account for our application. Make sure and remember this password, you will need to know it in order to log in and customize your application!

You will now have to option to install an Umbraco Starter Kit. This is a highly recommend first step - select a Starter Kit to see a description of the kit then click "Install this kit" to continue.

Once the Starter Kit is installed, you have the option of selecting and installing a Skin.  Select the skin to see a preview and then click "Install" to install the skin.

After you finish installing the Umbraco Starter Kit and Skin, you can preview and customize your site by clicking the "Preview your new website" button.  You can also launch your Umbraco application by clicking the “Set up your new website” button.

If you clicked the "Set up your website" button you will see the Umbraco Admin section where you can add and edit pages to your site.

The sections menu allows you to manage all the different components of your site. The content section is where you add new webpages and their content. The media section is where your images and other media items are managed. The settings section is where your style sheets, templates, scripts, etc. can be found. These documents can be edited in the dashboard as well as in WebMatrix.

Let’s make a new webpage for our application. To do this, click the “create” button on the top left on the Content section.

Once you click the “create” button you will be prompted where to create the new content. Select the location and hit “ok”.

You will then be prompted to give a name to your new webpage. Choose the document type and hit “create.”

Once your new page is created, you can edit the content on it. The Umbraco content editor allows you to add content to your page as well as view and edit the html code.

Images can be added to your page by clicking the “image” icon. This causes a popup box to appear where you can choose which picture to add as well as the CSS styling of the image. You can also upload images to your media folder here as well (under the “create new” tab).

The properties tab is where the some of the page’s information can be found. In order for your page to appear on your application, you must publish it. Here, as well as in the content tab, you can save, publish and preview your webpage.

Notice that the document’s link is displayed here. This is handy if you wish to provide links to this page.

Try publishing your page by clicking on the “save and publish” icon.

Wait while your page is published. You will receive a small alert on the bottom right of your screen letting you know your content was successfully published.

Our last step is to publish our application. There are several companies that are offering free WebMatrix hosting. You can find this information under the Publish icon on the ribbon or by clicking the link on your WebMatrix workspace.

Before you can publish your site, you must configure your publishing settings. Click on the Publish icon and select settings.

Fill in the information sent to you from your hosting provider. If you choose the SQL CE 4 option, you will not need to add a connection string for your database.

If you choose to use an existing database you will need to enter your connection string. Note: The basic format of a connection string is:

Server={server name sent to your from your webhost};Database={name of database};Userid={your database user name};Password={your database password};

Note: You should publish to the same database that you used to install your Umbraco application.

Validating your database connection before you try to publish is always a good idea. That way you know if your application can successfully connect to your database.

Once you click “publish” you will see a publish preview. This will show you all your application’s files that will be published.

Now we wait while it publishes. If it is the first time publishing the site, this may take quite a while. The status of our publishing can be seen on the popup bar on the bottom of WebMatrix.

When publishing is complete, we will receive a message on this bar notifying us. Clicking on our site’s link will open a browser to our site.

That’s it! We successfully installed, configured and published our Umbraco CMS application. A live Umbraco example can be seen here.

Additional Resources

Download WebMatrix http://www.microsoft.com/web/webmatrix/

Learn more http://www.microsoft.com/web/category/learn

Twitter http://twitter.com/mswebplatform

Facebook http://www.facebook.com/WebPlatform

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!