Overview
Hello friends, in this blog, we will learn how to run “Hello World!” on the web page using Umbraco 8. By the end of this blog, we will learn how to create document types and their properties. If you want to know that what Umbraco is and how to install it, then you can read my previous blog Introduction of Umbraco. So let’s start.
How to Create Document type
- First, we need documents to edit and show the content on our website. S,o we need to select a setting section from the navigation bar of the Umbraco back-office.
- In the settings section of the back-office, we will see different trees. Each tree has different components and different components have different component trees.
- To create a document we need to click on the Settings section and select Document type where we can select the type with template and without the template. Here we will select document type without template as shown below.
- After clicking on the Document type without template it will look like the below image.
- Give the name of the document as “Home” and Umbraco will automatically give an alias of that, however, we can edit that. We can also add the description.
- In the icon section, we can select as well as search the icon and you can select a color for that icon.
- By clicking on the add group we can add multiple groups based on our requirements. Here we will give “Content” as the group name.
- By clicking on the Add property we can search and select multiple properties based on the requirements.
- To add the property we need to click on select editors and search the name and click on submit button.
- We can add validation for that property whenever required.
- We can add the property name and Umbraco will give the alias name automatically like property name is “Title” and alias name is “title”.
- After adding all the properties which are required then we need to click on the Save button to save changes.
How to Create Template
- To create a template we need to click on the Template, then you need to select the create(+) option to create the template as shown in the below image.
- Give the template name as Master and Umbraco will automatically add the Razor code for us.
- Then we need to create a Home template under the master template, the same as the master template.
- Then we need to click on the Template of Home document and choose the default template as Home.
- Then we need to give the Home document as the root in the content tree. To do that we need to select Permissions of the document and click on allow as root as shown below.
- Now we need to add @RenderBody in the master template because on the Razor page it’s required to add the content.
- Now, on the home page, we will print the content so that we need to add the value in the home template.
- To do that we need to click on the Insert dropdown and select a value option then we have to choose a field and select the “title” of that dropdown and click on the submit button to save changes.
- This will automatically add the value as @Model.Value(“title”) as shown in the picture below.
How to Publish Website in Umbraco
- First, we need to go to the Content section then click on (…) and it will show you to create an item under Content on which we need to select the Home item.
- To give the item name as Home and write “Hello World” into the title box in components.
- After setting all the things we need to click on the Save and publish button to publish a website on Umbraco.
- To check whether the website is published or not we need to click on info on the right side of the corner of the Content section.
- It will give us the information about our website and by clicking on the Links we can redirect to the page of our website.
Conclusion
In this blog, we have seen how to run a hello world program on a website using Umbraco 8. Similarly, we can make any website using different document types, properties, and templates. Please check this Github reference of the demo project.
Thank you for giving your precious time to read this blog.
I hope this will be helpful to you.
You may also like
Unlock .NET Core Development with Cutting-Edge Strategies
As the software development industry adapts, Core has become a dominant framework that allows progra...
How can you use ML Sentiment Analysis in ASP.NET Core?
We are going to talk about ML Sentiment Analysis which is able to conveniently explore the aspects o...
How to work Loop Execution with Benchmark using .NET
What is Benchmarking? It is used for measuring timing complexity for various algorithms and part of ...
