Introduction
Hmm... Umbraco? Isn't that just another CMS, targeting the ASP.NET Framework?
It is - but Umbraco is definitely one of the cooler ones out there, and it's my absolute favorite CMS of all time. And there's a pretty good chance, that it might become your favorite CMS too.
In this guide, we are gonna take a look at how to get started developing dynamic sites using Umbraco, and we are gonna set up our very first Umbraco site together. So let's get started!
What you will need
To get started, you need the following:
- A Windows PC or access to a remote Windows desktop.
- Visual Studio (Community edition is free - download it here)
Creating your first Umbraco project
In order to get started, fire up Visual Studio (download it from the link above, if you don't already have it installed), and create a new ASP.NET Project.
Umbraco 8 is written for the original ASP.NET framework. Therefore, It's important that you don't choose an ASP.NET Core Application when you create the new project.
Then, choose where you want to save your project on your local machine. The current version of Umbraco is written for ASP.NET 4.7, I've selected the framework ".NET Framework 4.7.2".
Then hit "Create", and wait for Visual Studio to finish.
When Visual Studio prompts you to select a template, select Empty since we WON'T need all of the contents, that ships with the other templates. Umbraco uses MVC, but when installing UmbracoCms via NuGet in the next step, the NuGet Package Manager will automatically install all dependencies for us. Therefore, we don't need to check the "MVC" checkbox in the right corner either.
When Visual Studio finishes, right-click the project file, and click "Manage NuGet Packages".
Select the tab "Browse", and search for "UmbracoCms". Install the latest version (Currently 8.3.0).
When prompted, accept the License terms.
The NuGet Package Manager will now install Umbraco CMS, and if you open up the "Output"-tab at the bottom of your Visual Studio window, you should be able to see the Package Manager making progress.
You can also inspect the "Reference" folder in the Solution Explorer, and see how the references are added dynamically.
When done installing, Visual Studio will open a Readme.txt file, like the one above. And as it says on the very first line, Don't forget to build! To do so, right-click on your project, and select "Build".
Now, it's time to run our project. To run our project locally on our machine, press Ctrl + F5 on your keyboard, or click the "IIS Express (Some browser name)" button in the top menu bar.
You might get a warning popup if you only clicked the IIS Express-button (or F5 without holding the Ctrl button). The prompt is warning you that the web.config-file hasn't debugging enabled. And that's okay. The first run of any fresh Umbraco installation will be an installation-process, and we don't want to run this installer in debug mode. Therefore, choose the "Run without debugging" option, and hit "OK".
And voila! Fill in your information, and optionally check the newsletter subscription-field, before you hit the green "Install" button.
As you might have noticed, there is a similar gray "Customize" button right next to the green "Install" button. Clicking the "Customize"-button instead will give you the opportunity to customize the installation, which I will definitely suggest you do when you are planning on making a "real" project. The basic difference is, that when you click the "Customize" button, you get to choose which database to use (otherwise, Umbraco will just create a local database on your drive), and you get to choose to not to install the default layout and document types.
But for now, we will just get you up and running, so you can get to know Umbraco, and play around with it.
Umbraco will then show a load screen while installing, and after a minute or so (depending on how fast your computer is), you will be prompted with a login screen.
Behind this login screen is what we call the "Backoffice". The backoffice is an admin area, and should only be accessed by you as a developer, and content managers, translators, etc. No visitors to the site should ever have access to this area.
If you take a look at the URL, you can see that right after the host (in my case it's https://localhost:44364), it says "/umbraco". This is the default URL-part to the backoffice, and from here it's possible to manage templates, Document Types, media, etc.
If you want to have a look at the frontend, just remove everything after the host, from the URL.
This will take you to the website, as your clients will see it.
Summery
Okay, so that's how you install Umbraco. Take a look around, and get a feeling of how it works.
The next step is for you, to begin customizing the site, and make it suit your needs.
I might make some tutorials on how to start developing for Umbraco, if you're all new to this, in the future, but for now, this was it.
Thank you for reading along - see you around!