Creating (Editing) Your First Template

    Next click the expand node icon (it's the small triangle) behind the Settings > Templates folder - you should then see a child node titled "Homepage".

    Umbraco created this automatically when we created the Document Type (remember that option that said "..without template", we chose the one with and this is what it did).

    Clicking on the Homepage node will load the template - which, except for a little bit of Razor code, is empty!

    Empty Homepage Template

    Figure 13 - Homepage template

    Leaving the code that's there (if you don't understand it, don't worry!) let's copy our template code in. Open up index.html from the Initializr template in your favourite text editor (Notepad++ is good). Copy and paste the whole thing into this template after the closing curly brace "}". Your template should now look like below:

    Homepage Template with Initializr HTML

    Figure 14 – Homepage Template with Initializr HTML

    Click the Save button.

    We now have a template. That's two out of the three stages complete for our first page.

    Creating Your First Content Node

    Our third and final stage to creating our first page in Umbraco is to create a content node along with the Document Type and Template, to serve up an HTML page to web visitors.

    We're now ready to create our first page in Umbraco! Click the Content button (first option in the left-hand menu).

    Hover over the grey text CONTENT and you'll see the three dots ... - click this. If you've done everything correctly so far you should see the option to create our Homepage!

    Create a Homepage

    Figure 15 - Create a Homepage

    If you can't see this then don't panic - check that Settings> Document Types > Homepage node > Structure tab > Allow at root is checked.

    Let's create our homepage. Click the icon and you'll see what we've been setting up - our document type is now going to drive our homepage content – it gives us and the editors the fields they need.

    In the field at the top of the page you'll see "Enter a name..." click this and enter the name for your new content node. We're going to call this "Homepage".

    Create a Homepage

    Figure 15a - Create a Homepage - Enter a name...

    Fill in the following on the Contents tab:

    Page Title Welcome to Widgets Ltd

    Body Text Hello world! We can write what we like here!

    "Widgets Ltd 2014"

    Click the Footer tab and enter:

    Footer Text "Copyright Widgets Ltd 2014"

    Now click the green Save and publish button. The menu will reload with our homepage node under the CONTENT label. And here's the good bit... go and refresh your webpage in your browser http://localhost – the default Umbraco page will be gone and we'll see a very bare, unstyled page! We’re getting there!

    If you see a blank page then check you entered your template markup and remembered to save it.

    An Unstyled Homepage

    Figure 16 – An Unstyled Homepage

    Next - CSS & JavaScript

    Adding the CSS and JavaScript for your site into Umbraco.