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!
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:
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 where an editor can add the content which Umbraco will use, 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!
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 just 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".
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.
Figure 16 – An Unstyled Homepage