From zero to a live installation of Umbraco in 30 minutes (for beginners)

“Umbraco is a free, open-source web cms built on the Microsoft ASP.NET Framework. It is easy to use, simple to understand, and is highly extensible using industry-standard languages and patterns such as HTML, CSS, jQuery, and C#.”

Using the new, and also free, web development tool WebMatrix from Microsoft it’s now easier than ever to install Umbraco. And there are free WebMatrix hosters (at least for the first three months). Which means you can have your own web cms running with live on internet for no cost at all. And it will only take you about half an hour to go from zero to live.

Download and install Microsoft WebMatrix

Goto http://www.microsoft.com/web/webmatrix/ and install the latest version of WebMatrix.

Create an Umbraco Website from the WebMatrix Web Gallery

When you start WebMatrix you will be presented with the option to start a new site from the Web Gallery. In the gallery you find Umbraco. Select it and choose a name for your site, then follow the guide to download and install Umbraco:

Run the Umbraco Installer

When WebMatrix is finished with it’s installation of Umbraco you will get to the WebMatrix editor. For now, just click the link to your site “URL : http://localhost:nnnn” to open up your local Umbraco site in your browser:

The first time you browse to your site the Umbraco will run it’s Installer. In the installer you choose which database you like to have for yous site, as well as the login username and password you like, and an optional Starter kit and Skin for your site.

I recommend you to follow the installer defaults and choose Sql CE for the database – that option requires no database configuration at all, it’s simply a file which will be included in your site folder.

You will be prompted to select a Starter kit and a Skin. Have a look at the different options and choose the ones you like. I used “Simple Starter kit” for this demo.

Enter Umbraco

When the installer is finished it’s time to enter the Umbraco UI for the first time.

Notice you have a treeview which has a node for each of the pages of your Umbraco site. To begin just click “Sample website” and change some texts if you like. To make the changes go live you need to click Publish. At this stage “live” means running on your local computer with the WebMatrix web server IIS Express. No one else can view it at this point:

You can switch back and forth between Umbraco and your actual site with your web browser tabs. If you loose the Umbraco tab you can open it again using the address http://localhost:nnn/umbraco/ (where nnn is the port number WebMatrix decided for you).

You need to have WebMatrix and your site running on your computer to be able to view it in your browser. It’s files will be saved in the “My Sites” folder. And after closing the WebMatrix, next time you open it you will find your Umbraco site in the “My Sites” page.

Publish it for real

When you have been editing your Umbraco site and want it to be published to Internet for a live audience you will need to find a web hosting provider.

You can do that using the built in link in WebMatrix, under Publish – Find Hosting.

I used “Applied” (which I never heard of before) but their setup was very easy – and free for 3 months. And after that $5 per month. And remember you can always move your site to another host later on if you so choose.

You should get an email with your Web Deploy settings

Copy and paste those settings into WebMatrix Publish Settings

Publish to live site

Then click Publish within WebMatrix to publish your Umbraco to the live site. It will take some minutes since the full Umbraco installation has a lot of files. When the publishing is done you – and everyone else – should be able to see your site on the net!

Editing the contents

Both your local installation and the live installation of Umbraco has everything included, which means you can use the Umbraco UI on both places. But note that the two installations are completely separate, and if you edit something on one place you will need to copy that to the other installation.

If you like to edit the site content on the internet published copy of your site you just go to the address http://www.mysite.com/umbraco/ and enter your login credentials from the Umbraco installation.

Enjoy!

Read more about Umbraco at http://www.umbraco.org and if you have questions the Umbraco community is more than happy to help out.

Advertisements

5 thoughts on “From zero to a live installation of Umbraco in 30 minutes (for beginners)

  1. Good post Joeriks,

    It’s great to see more people trying to encourage people to install and try Umbraco. To try and encourage this, I decided to do the same and write my own tutorial site for non technical users (www.uquickstart.com). Keep up the good work, together we can all make Umbraco great…

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s