Hey I'm Lee. My blog was put up to house my strange thoughts, ramblings, nuggets of information I can refer back to and document my learning curves on new dev stuff and fitness regimes.

All thoughts and comments on here are my own, and in no way reflect my employer - I also take no responsibility for spelling, grammar, terminology, accuracy of facts etc... So read at your own risk!

Building Your First Umbraco Site From Scratch

After I wrote the newbie's guide to Umbraco, its been kind of hard to come up with anything as half decent as that - In fact looking at my last posts, its been hard to come up with anything decent full stop lol!  As still the Umbraco community is thriving with literally 100's of excellent blogs on more advanced topics, I thought I would take a step back into the newbie world and create a post that I 'hope' will help more people jump into Umbraco as their first choice CMS and ASP.NET.

**DISCLAIMER**: I'd just like to say that I did each video in one take, no script, completely adlib… So please forgive some of the shite waffle I come out with and how many times I say Urrrrrm ;)

About Umbraco

WindowsLiveWriter_NewUmbracoIdentity_7CEE_umbraco_logotype_orange_rgb_thumb

Luckily instead of me waffling on about how great Umbraco is, the guys at HQ have come up with some new videos to go along side the new branding which will explain pretty much everything you need to know about Umbraco.

Or you can also check out my Newbie's Guide To Umbraco [more]

Installing Umbraco

Two ways for installing Umbraco, there is the easy way using the web platform installer

windowslivewriter_umbracointegrationwiththewindowswebappli_1035f_wpibadgegreen_3

or the other easy way, is to follow this excellent video provided by Sebastiaan below

Remember for this tutorial DON'T install CWS OR RUNWAY at the end… We are going to build a simple brochure site from scratch.

So Where Do I Start?

So by now you should definitely have a blank install of Umbraco installed and ready to go - And if you browse to the home page you will get this screen.

Capture

But what do you do now?  In this video I show you how I would start a blank build.  In the video I have already created a simple standard HTML front page template and style sheet, so get your template ready before you watch this video. Before we jump into the build part I thought I would quickly run over some of the folders and files that make up the Umbraco install, and give you some tips to increase your build time

Our sitemap for the brochure site we are going to build will be

  • Home
  • About Us
  • Products
  • Contact Us (Using Contour)

Getting In The HTML Template & CSS

DocTypes / Building Pages / Displaying Data

We have our style sheet ready, HTML in and we have setup our Master MasterPage ready to build the site out - See how easy it is so far.  Now in this video we are going to concentrate on building the pages in the admin section, we are going to add the textboxes and elements to the pages we need for the user to add their content - And also create the structure of the site.

*HOLD YOUR BREATH THIS IS A LONG VIDEO - It was supposed to be two videos, but I screwed up*

When the backend is done enough we start pulling the contact out, and displaying it to the users in nothing but pure un-adulterated HTML.  To do this we are going to use XSLT… WAIT... STOP…  Don't stop reading just because I said that dirty XSLT word, trust me… If there is anyone who hated it more than anything to begin with it was me!  But now, I have to admit I am starting to like the verbose language and for simple sites like this its an absolute breeze to use.

Specific DocTypes / Listing Products

If you have managed to watch the video above and not fallen asleep, you will know we have created a VERY simple content managed site already - Now we are going to use a different DocType to display the products

Creating A Contact Form Using Contour

Almost lastly we are going to create a simple contact form, and run through some of the options available in Contour - Contour is Umbraco's amazing form building package which you can purchase separately from this page. Its stupidly simple to use, and requires no coding knowledge to create simple to pretty complex multi-step forms!

Packages

I wanted to run through all the great packages on Umbraco that you can install and use, but I ran out of time, patience, voice and willing :)  But its that simple, once you have a site up and running like above, I'm pretty certain you will be able to go to:

Download the packaged, then go to Developer > Packages > Install Local Package … Voila…

Again I really hope this tutorial really does help someone new looking to create their first site in Umbraco, but doesn't where to start.

Back to top