“Hoe installeer ik Umbraco 11 op mijn website?”. Je wilt graag aan de slag met Umbraco, en vroeger had Umbraco net zo’n fijne webbased installatie als WordPress, maar nu niet meer helaas. Dus hoe installeer je Umbraco? Je gebruikt de ‘dotnet‘ tool om Umbraco te installeren, en Web Deploy om je site te publiceren. Hoe je dat doet lees je in deze post.

Tegenwoordig installeer je Umbraco eerst lokaal op je PC, met de dotnet tool. Deze tool verzorgt het downloaden en installeren ervan. Het beschikbaar hebben van .NET is dus een vereiste. Als je dit nog moet installeren, kies dan voor .NET 7.0. Microsoft heeft meer help en informatie beschikbaar. Dus geen .zip-bestand meer downloaden, uitpakken met 7-Zip en via FTP uploaden. Héérlijk! Op deze manier kun je heel snel een nieuwe website in de lucht brengen.

Goed, nu je .NET 7.0 geïnstalleerd hebt, is het tijd om wat met Umbraco te gaan doen, toch?

Stappenplan Umbraco installeren

Echt, of je nu PowerShell als opdrachtregel (of command line interface – cli) gebruikt of cmd.exe, dat maakt niet uit. Ik vind alleen de PowerShell-console fijner. Alle opties geef je in één keer mee op de opdrachtregel. Bedenk dus goed van te voren wat je wilt, in dit voorbeeld houd ik het simpel (KISS – Keep It Simple Stupid). Uitgebreide documentatie vind je op de Umbraco-website.

Zoek jij top notch en eco-vriendelijke, Umbraco hosting? Zoek niet verder, UmbHost is een geregistreerde Umbraco-partner partij die betaalbare hostingdiensten aanbiedt voor websites en bedrijven van iedere omvang.

Volg het volgende stappenplan om Umbraco 11 te installeren:

  1. op de opdrachtprompt, navigeer naar de map waar je je Umbraco site onder wilt plaatsen
  2. installeer de Umbraco templates met dotnet new install Umbraco.Templates
  3. voer dotnet new umbraco --name ProjectNaam uit om een nieuw project te maken
  4. ga de projectfolder in, het is de map waarin het .csproj-bestand zich bevindt (cd ProjectNaam)
  5. bouw en start je site (eenvoudig) met dotnet run
  6. er komt nu veel tekst voorbij op je scherm, je herkent hierin iets vergelijkbaars met [10:46:01 INF] Now listening on: http://localhost:5000. Open deze URL in je browser (CTRL en klik is voldoende).
  7. vul de gevraagde informatie in het browservenster in, zie het voorbeeld hieronder. Klik daarna de Install knop.
Umbraco installatiescherm in de browser

Gebruikersnamen, wachtwoorden en website-adressen (URL’s) die in deze blogpost genoemd staan hoef je niet te proberen te misbruiken. Omdat het een testomgeving betreft staan gebruikersnamen en wachtwoorden in platte tekst in deze post, die omgeving is niet meer beschikbaar.

Zodra de installatie is afgerond – en dit gaat vrij snel – opent het Umbraco backend scherm met een welkomstboodschap:

Umbraco welkomstscherm na installatie
Umbraco welkomstscherm na installatie

Na de niet verplichte tour kun je beginnen met het inrichten van je site, maken van pagina’s of posts, installeren van packages, enz. Enjoy!

Maar er is meer, en het kan nóg simpeler: unattended (silent) installatie inclusief packages via de opdrachtprompt!

Unattended (silent) Umbraco installeren met vooraf geselecteerde packages

Ik kan me voorstellen dat je graag het een en ander al geïnstalleerd wilt hebben op het moment dat je het Umbraco-backend opent, en dat je niet het Install Umbraco venster hoeft in te vullen. Wist je dat je deze gegevens vooraf al kunt opgeven op de opdrachtprompt als commando / opdracht? Umbraco kent vele unattended installatie-argumenten.

Een kort voorbeeld is (alles moet op één regel):

dotnet new umbraco
--name ITFAQ.nl
--force
--friendly-name "Jouw naam"
--email "voorbeeld@example.com"
--password 'fk(rw*wqmQSi5PK6Sg5N3LXHEiEYJT@4'
--development-database-type SQLite

Dit geeft heel veel schermuitvoer, onder andere omdat je op de prompt ziet dat de database wordt aangemaakt. Dit kun je negeren, en op het eind zie je weer staan: [14:35:43 INF] Now listening on: http://localhost:5000. Klik je die aan, dan krijg je scherm “Welcome to your Umbraco installation”. Klik op “Open Umbraco” om op het inlogvenster te komen.

Welcome to your Umbraco installation
Welcome to your Umbraco installation

Je kunt hier inloggen met de gebruikersnaam en het wachtwoord dat je mee hebt gegeven op de opdrachtprompt:

Umbraco inlogpagina
Umbraco inlogpagina

En je komt dan weer bij het “Welcome to Umbraco – The Friendly CMS” welkomstboodschap met tour.

Umbraco welkomstscherm na installatie
Umbraco welkomstscherm na installatie

Je vindt op pws.codeshare.co.uk meer voorbeelden van deze installatie-optie, en kun je bijvoorbeeld direct een Starter Kit installeren. Een Starter Kit is een kant-en-klaar thema of template. Met de opdracht dotnet add "MyProject" package clean installeer je Clean Starter Kit. Het script dat de site genereert bevat al deze opties en hoef je alleen maar te kopiëren en plakken op je opdrachtprompt en uit te voeren.

Uiteindelijk heb ik het volgende gebruikt voor een test site:

dotnet new sln --name "ITFAQ.nl"
dotnet new umbraco --force -n "ITFAQ.nl" --friendly-name "Jouw naam" --email "voorbeeld@example.com" --password "fk(rw*wqmQSi5PK6Sg5N3LXHEiEYJT@4" --development-database-type SQLite
dotnet sln add "ITFAQ.nl"
dotnet add "ITFAQ.nl" package clean
dotnet run --project "ITFAQ.nl"

Hierbij zijn de twee regels met sln belangrijk als je later met Visual Studio werkt. Open je uiteindelijk de URL, dan ziet je site er zo uit:

Umbraco met Clean starter kit
Umbraco met Clean starter kit

Articulate blog engine

Om het Articulate blog engine Starter Kit voor Umbraco te installeren gebruik je de volgende opdracht:

dotnet new sln --name "ITFAQ.nl"
dotnet new umbraco --force -n "ITFAQ.nl" --friendly-name "Jouw naam" --email "voorbeeld@example.com" --password "fk(rw*wqmQSi5PK6Sg5N3LXHEiEYJT@4" --development-database-type SQLite
dotnet sln add "ITFAQ.nl"
dotnet add "ITFAQ.nl" package Articulate
dotnet run --project "ITFAQ.nl"

Kanttekening bij SQLite-database

In het verleden met ASP.NET Framework 4.8 was SqlCe – or SQL Server Compact – de standaard database voor Umbraco, maar dat databasetype is verouderd (deprecated). Je moet nu SqlCe databases converteren naar SQL Server (in English: Convert SqlCe database to SQL Server). Het huidige standaard databasetype in .NET is SQLite. Dit is een prima databasetype dat al jaren bestaat, het wordt doorontwikkeld en is stabiel. Hierom is het niet per se nodig om te kiezen voor SQL Server, alhoewel ik dat wel aanraad voor grotere sites en databases.

Umbraco website publiceren met Web Deploy

Most of the Web Deploy operations are modeled around sync operation between a source and a destination. Sync operation is orchestrated by Web Deploy framework using one or more Web deploy provider
Web Deploy flow

Nu je je Umbraco website lokaal hebt gemaakt en er helemaal tevreden over bent, is het tijd om je website te uploaden naar je webhost. Dit uploaden heet vaak publiceren of deployen. Dé tool om je website naar een Windows Server host (ideaal voor Umbraco) over te brengen heet “Web Deploy”. Deze tool is standaard in Visual Studio aanwezig, maar je kunt het ook afzonderlijk downloaden en installeren.

Een Web Deploy introductie vind je hier: Introduction to Web Deploy. Het is een manier om een website veilig te uploaden via HTTPS in plaats van het oude FTP.

Als je gebruik maakt van Visual Studio, dan kun je een grafische omgeving gebruiken om je website te publiceren met Web Deploy. Heb je de nieuwste versie van Visual Studio, dan heb je ook een iets nieuwere versie van Web Deploy, dat geeft verder niet. In mijn testomgeving staat de site in de map C:\Users\janreilink\source\dev\sites\ITFAQ.nl, het is belangrijk dat je weet waar jij jouw site hebt neergezet.

Heb je met het dotnet-commando hierboven een sln-bestand gemaakt, dan kun je dat bestand openen met Visual Studio. In de Windows Verkenner ga je naar de map met het sln-bestand, klikt met de rechter muisknop op dat bestand en kiest voor Openen Met, en dan Visual Studio 2022.

In dit voorbeeld gebruik ik Visual Studio om de website te publiceren. Later geef ik in een ander artikel een voorbeeld hoe je webdeploy.exe gebruikt op de opdrachtprompt, hoe je een publish profiel maakt en hoe je dotnet publish gebruikt. Meerdere opties hebben is altijd handig.

Je hebt een aantal gegevens nodig, vraag je webhost bij twijfel:

  • Of Web Deploy als service aangeboden wordt voor jouw site
  • Gebruikersnaam en wachtwoord
  • Web Deploy service URL incl poortnummer (Server in de afbeelding hieronder)
  • IIS Applicatie (Site name in de afbeelding hieronder)
  • URL of website-adres van je website (Destination URL)

Wil je zelf via de commandline (opdrachtprompt) publiceren? Je vindt Web Deploy geïnstalleerd in "C:\Program Files\IIS\Microsoft Web Deploy V3\msdeploy.exe". Gebruik /? om de helpinformatie op te vragen.

Als je de website geopend hebt in Visual Studio, dan kun je de volgende stappen en afbeeldingen volgen om je site te publiceren. Let op dat ik wat gegevens heb moeten blurren.

  1. in Solution Explorer (rechter zijbalk) klik je met de rechter muisknop op de vet weergegeven naam van je oplossing (“ITFAQ.nl” in mijn geval).
  1. een nieuw context-menu opent, kies hier voor Publish..
  1. maak een nieuw publish profile aan
  1. kies voor Web Server (IIS)
  1. kies Web Deploy
  1. vul de gevraagde gegevens in, zie hierboven voor meer informatie en vraag je webhost bij twijfel.
    • valideer de verbinding met de knop Validate Connection
  1. klik Finish en je ziet een bevestiging dat een profiel is aangemaakt, klik Close
  1. klik de Publish knop rechtsboven als je je website nu wilt publiceren

Na het publiceren opent je site zich automatisch in de browser, en ziet er bijvoorbeeld zo uit:

Zoek jij top notch en eco-vriendelijke, Umbraco hosting? Zoek niet verder, UmbHost is een geregistreerde Umbraco-partner partij die betaalbare hostingdiensten aanbiedt voor websites en bedrijven van iedere omvang.

Conclusie Umbraco 11 installeren en publiceren

In de loop der jaren is er veel veranderd in hoe je start met websites. Waar je vroeger afhankelijk was van een webhostingprovider, moeilijke FTP-gegevens en -programma’s, kun je nu eenvoudig een site lokaal maken en inrichten. Dit geldt ook voor Umbraco 11 met .NET. En zodra je tevreden bent met het eindresultaat publiceer je de site eenvoudig naar je webruimte met Web Deploy. Vanuit Visual Studio kun je zelfs samenwerken met andere personen of teams van ontwikkelaars.

Show 1 Comment

1 Comment

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *