26th Jul 2021

Introduction to Umbraco

.NET

Written By, Kishan Jamariya

Overview

Hello friends, There are many CMS tools available, we are going to discuss one of the CMS tools called Umbraco. In this blog we will discuss what Umbraco CMS is and how it will work. By the end of this blog, we will get an idea about Umbraco CMS and its installation. So let’s discuss it in depth.

Introduction to UMBRACO

Umbraco is a CMS (Content Management System) for publishing content on websites and the internet and for making dynamic templates. The latest version of Umbraco is 8.13.0.
Umbraco is C# .NET MVC-based CMS and Open Source under the MIT License. It was developed by Niels Hartving in 2000.

Where to use

  • In the public sector
  • In the healthcare sector etc.

Why should we use it?

  • There are almost 2,25,000 developers working with Umbraco worldwide.
  • The best feature about Umbraco is that it makes it easier to maintain the content of our website and it’s open-source.
  • Umbraco is based on C#, Javascript, and Razor.

Supported Browsers

The Umbraco is working on all modern browsers such as:

  • Chrome (Latest)
  • Safari (Latest)
  • Edge
  • Firefox (Latest)

Requirements for Installation

  • Microsoft Windows 7 SP1
  • Visual Studio Code with the IISExpress extension or Microsoft Visual Studio 2017 version 15.9.6 and higher.
  • ASP.NET 4.7.2

Steps to Install Umbraco 8

Visual Studio 2019

  • Go to File > New Project and select ASP.NET Web Application(.NET Framework).
  • Note: When we select ASP.NET Web Application we must have to select .NET Framework 4.7.2 or higher, Umbraco will not work with lower versions than 4.7.2.
    create-new-project-1create-new-project-2
  • After clicking on the create button, we need to select the Empty template. Because Umbraco will automatically add required folders and core references.

For installing Umbraco Package

  • All new versions of Umbraco are always available in the NuGet gallery.
  • We just need to right-click on our project which we have created and select Manage NuGet Packages.

    manage-multo-package

  • We have to select the Browse button and search UmbracoCms on the Search Box and click on the install button(down arrow).browse-cms
  • We can also install Umbraco using the package manager console.

Package Manager console

  • To install Umbraco we need to go to Tools > View > Other Windows > Package Manager Console.package-maneger-console
  • Then type Install-Package UmbracoCms and press Enter to start installing the Umbraco package.

  • After Installation of Umbraco, we will see the screen below.umraco

Run Umbraco Project

Step 1: Install Umbraco 8

  • To run a Umbraco project we need to click on IIS Express which is shown in the visual studio panel.
  • After clicking on the IIS Express button we will see the page as shown below.install-umbraco-8-1
  • On this page, we have to fill up our details to install Umbraco 8.
  • After filling in the details we will see the Install and Customize button.
  • To add the database we need to click on the Customize button.
    install-umbraco-8-2

Step 2: Configure an ASP.NET Machine Key

  • After clicking on the Customize button, we will see Configure an ASP.NET Machine Key page where we can select the Continue button to generate a machine key as shown below.configure-machine-key

Step 3: Configure Our Database

  • After clicking on the Continue button we will see the Configure Database page where we can configure our required database.
  • We can select Database type by clicking on the database type dropdown.configure-databse-1
  • After clicking on the Continue button we will see the Install a Starter website where we can select a starter website with template and without the template. If we don’t want a template then we need to select the No thanks option as shown in the picture below.install-starter-server
  • After clicking on the No thanks option we will successfully install Umbraco 8 setup.
  • After Installation, we will see the Login page where we have to enter login details to enter into the Umbraco dashboard(BackOffice).

This is the main menu in the Umbraco back office where we can manage our website.

On the top of the navigation bar of the screen, we see the different sections.

  • Content section is for publishing our website into Umbraco and where we can edit the content of our website.
  • Media section is a tool where we can upload images and other things.
  • Settings section is a tool where we can create our documents to edit the content of our website. In the Umbraco version, 8 developer options and settings are merged together and shown in the Settings section.
  • Packages section where we can search and add different packages.
  • Users section where we can see the user details and list of users.
  • Members section where we can register and authenticate users.
  • Forms section where we can create and manage forms.
  • Translation section where it can easily translate to handle the content.

Conclusion

In this blog, we have seen what Umbraco is and how to install it. So, we consider you have gained knowledge about Umbraco CMS. Check our next blog for a demo project Hello World using Umbraco.

Please check this Github reference for this installation

Thank you for giving your precious time to read this blog.
I hope this will be helpful to you.

Written By,

.NET Developer at Yudiz Solutions Pvt. Ltd