Het onderstaande artikel heb ik uitgewerkt begin 2025.
Aan het begin van het jaar werk ik in Excel altijd een overzicht uit van mijn inkomsten (salaris) en mijn uitgaven (wegenbelasting, ziekenfonds, hosting en al het andere). Nu, aan het begin van het nieuwe jaar, kom ik tot de conclusie dat ik meer uitgeef dan dat ik ontvang aan inkomsten. Ik ga ongeveer 3.000 in de min en dan heb ik nog niet eens alle uitgaven meegenomen. Dat is op zich niet erg, want ik kan zaken bijsturen. Dan maar wat minder naar concerten en het theater. Of "mijn verlies nemen". Want bij mijn uitgaven reken ik ook wat ik spaar. Het advies is dat je per jaar ongeveer 25% spaart van wat je binnenkrijgt. In het budget wat ik uitgewerkt heb spaar ik rond de 40%. Dat komt ook omdat ik in het verleden via mijn werkgever geen pensioen spaarde, dus zelf bij Brand New Day een rekening heb geregeld en er dus elke maand 150 euro aan "sparen/vaste lasten" uit gaat.
In ieder geval, voor mijn hosting van prijs-bewust.nl betaal ik elke maand 233 euro. Je ziet dat als ik die kosten niet zou hebben, ik mijn tekort al bijna terugverdiend heb. Ik kan het dus niet maken om weinig met deze omgeving te doen, mijn prijs-bewust.nl site ligt al bijna 10 jaar op zijn gat. Ik werk bij TRES, we werken/ontwikkelen met Umbraco als CMS-pakket (ik ben daar met .NET ontwikkeling bezig), de reden dat ik voor Windows-hosting heb gekozen. Mijn hoster heeft inmiddels .NET 8 en .NET 9 geïnstalleerd, dus ik kan los.
Installatie
Ik ben een "hardcore-developer". Het uitvoeren van commando's in een Powershell-console is voor mij geen probleem.
dotnet new -i Umbraco.Templates::13.5.2
dotnet new umbraco -n "MyProject"
dotnet run --project "MyProject"
Op deze pagina van Umbraco staat uitgelegd hoe je de installatie kunt uitvoeren, ook op andere manieren. Zo wordt Visual Studio genoemd. Je kunt (als individu) gratis de Community Editie downloaden en installeren en de instructies volgen.
Publish Profile opzetten
Als je op je eigen computer met bovenstaande stappen het project gemaakt hebt, dan wil je het ook online op je omgeving kunnen draaien. Ik doe dat hier eerst even op de "simpele manier", die eigenlijk geschikt is voor een "ontwikkel-website", namelijk via FTP. Voor het overzetten van de bestanden heb je straks een FTP-programma nodig, zelf gebruik ik hier Filezilla voor. Klik in Visual Studio met de rechter muisknop op je Project en kies voor "Publish...". Kies hier voor een nieuw profiel. Kies voor Folder. Kies een plek op je computer waar de bestanden neer gezet moeten worden en sla dit profiel op. Als je dan tevreden bent over hoe de site op je eigen computer draait, dan kun je via Publish..., klikken op de knop "Publish" bij het Folder-profiel en zo heb je alle bestanden in je doelmap staan. Die kun je dan met FTP overzetten.
Bovenstaande kun je vaker doen, alleen moet je even opletten wat je via FTP gaat overzetten. Waarschijnlijk gebruik je als database de SQL-Lite versie. Deze wordt opgeslagen in de map /umbraco/Data. Deze map moet je dus niet verwijderen, want dan ben je online wijzigingen kwijt (of dat moet juist je bedoeling zijn). Het kan ook zijn dat je lokaal je wijzigingen doet en via FTP die Umbraco.sqlite-bestanden overzet, je moet het zelf maar weten.
Start met /umbraco
Na het opstarten krijg je het installatiescherm, daar doorloop je de stappen en maak je jouw account aan. Vervolgens ga je naar /umbraco. Naast deze site draai ik op een ontwikkelomgeving ook nog Umbraco 15. Ik kreeg daar na inloggen nog wat vage foutmeldingen, daar was een reden voor en ook een "best-practise". Zo draaide mijn site nog via HTTP. Dat mag/kan/moet natuurlijk niet, want als je inlogt via /umbraco gaan jouw credentials als leesbare tekst over de lijn. Dus eerst via een Let's Encrypt certificaat HTTPS actief gemaakt. Toen had ik nog een probleem na inloggen. Dat los je op door /appsettings.json aan te passen, je moet namelijk aangeven wat de geldige domeinnaam is waar de site op draait. Mocht je dit probleem bij Umbraco 13 hebben, misschien dat dit ook jouw problemen oplost:
"Umbraco": {
"CMS": {
"WebRouting": {
"UmbracoApplicationUrl": "https://www.prijs-bewust.nl/"
},
...
"Security": {
"AllowConcurrentLogins": false,
"BackOfficeHost": "https://www.prijs-bewust.nl/"
}
}
},
Inlogscherm aanpassen - begroeting
Als je naar /umbraco gaat zie je de tekst "Welcome". Tijd voor wat aanpassingen. De uitleg staat op deze pagina. Zo maak ik eerst de map /config/lang aan en plaats daar een bestand met de naam en_us.user.xml
Daar zet ik eerst de onderstaande inhoud in (staat ook op de pagina, maar mocht de pagina aangepast worden o.i.d. dan kun je het hier terug vinden:
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<language culture="en-US">
<area alias="login">
<key alias="greeting0">Happy super Sunday</key>
<key alias="greeting1">Happy manic Monday</key>
<key alias="greeting2">Happy tubular Tuesday</key>
<key alias="greeting3">Happy wonderful Wednesday</key>
<key alias="greeting4">Happy thunderous Thursday</key>
<key alias="greeting5">Happy funky Friday</key>
<key alias="greeting6">Happy Caturday</key>
</area>
</language>
Dit zijn namelijk de teksten die altijd in de oude versies van Umbraco getoond werden. Mijn collega Ronnie heeft ooit een klant aan de lijn gehad die het had over een probleem met de "Funky Friday" of iets dergelijks. Dus een beetje nostalgie om dit in stand te houden :)
Inlogscherm - afbeeldingen
Als je naar /umbraco gaat zie je een dame die liggend op de bank op haar laptop werkt. Ook die afbeelding (en de Umbraco-svg daar overheen) kun je vervangen en die uitleg staat op dezelfde pagina. Dat doe je door onderstaande toevoeging in appsettings.json:
"Umbraco": {
"CMS": {
"Content": {
"LoginBackgroundImage": "../myImagesFolder/myLogin.jpg",
"LoginLogoImage": "../myImagesFolder/myLogo.svg",
"LoginLogoImageAlternative": "../myImagesFolder/myLogo.svg"
}
}
}
Het werken met relatieve paden, daar hou ik niet zo van.
Ik heb in mijn wwwroot-map een map umbraco-media aangemaakt en daar mijn afbeeldingen ingezet. Het alternatieve logo zie je als je /umbraco via je mobiel of mobiele weergave bezoekt.
Ik heb in mijn config het volgende gezet:
"LoginBackgroundImage": "/umbraco-media/login-background.jpg",
"LoginLogoImage": "/umbraco-media/logo.jpg",
"LoginLogoImageAlternative": "/umbraco-media/logo-alternative.jpg"
In Program.cs heb ik het volgende gedaan:
await app.BootUmbracoAsync();
// deze regel heb ik toegevoegd
app.UseStaticFiles();app.UseUmbraco()
Daarmee krijg ik mijn eigen afbeelding te zien!
Security - zet je headers goed
We gaan nu zorgen dat onze site de juiste security-headers teruggeeft. Laten we het meteen goed doen. Je kunt je site (of een andere site) scannen via securityheaders.io. Wel even een vinkje zetten bij "Hide results" om een slechte site niet meteen in de "Hall of Fame" te zetten ;)
Maak een map Middleware aan, maak daar binnen een bestand ResponseHeadersAdditionMiddleware.cs aan. Vul dat bestand met de volgende inhoud:
public class ResponseHeadersAdditionMiddleware
{
private readonly RequestDelegate _next;public ResponseHeadersAdditionMiddleware(RequestDelegate next)
{
_next = next;
}public async Task Invoke(HttpContext context)
{
context.Response.OnStarting(() =>
{
AddHeader(context, "X-Frame-Options", "DENY");
AddHeader(context, "X-Xss-Protection", "1; mode=block");
AddHeader(context, "X-Content-Type-Options", "nosniff");
AddHeader(context, "Referrer-Policy", "no-referrer");
AddHeader(context, "X-Permitted-Cross-Domain-Policies", "none");
AddHeader(context, "Permissions-Policy", "accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()");
if (!context.Request.Path.ToString().ToLower().StartsWith("/umbraco"))
{
// de items van CSP zul je zelf moeten bepalen, dus je eigen domein en misschien nog wat extra locaties
AddHeader(context, "Content-Security-Policy", "default-src 'self' media.s-bol.com www.prijs-bewust.nl prijs-bewust.nl");
}
return Task.CompletedTask;
});await _next(context);
}private void RemoveHeader(HttpContext context, string header)
{
try {
if (context.Response.Headers.ContainsKey(header))
{
context.Response.Headers.Remove(header);
}
}
catch (Exception) {
/* if removal fails, so be it */}
}private void AddHeader(HttpContext context, string key, string value)
{
try {
RemoveHeader(context, key);
context.Response.Headers[key] = value;
}
catch (Exception) { /* if adding fails, so be it */ }
}}
In de map Middleware maak je een bestand MiddlewareExtensions.cs aan met de volgende inhoud:
public static class MiddlewareExtensions
{
public static IApplicationBuilder UseSecurityHeaders(this IApplicationBuilder app)
{
return app.UseMiddleware<ResponseHeadersAdditionMiddleware>();
}
}
Het enige wat je dan nog hoeft te doen is in Program.cs het volgende te doen:
...
app.UseStaticFiles();
// deze 2 regels toevoegen!
app.UseHsts();
app.UseSecurityHeaders();
// dat is alles.app.UseUmbraco()....
...
Dat levert mij vandaag (28 december 2024) een A+ score op. Uitstekend dus!
De eerste inhoud op je website
Als je nu naar je website gaat, krijg je nog de melding "You're seeing this wonderful page because your website doesn't contain any published content yet.". Daar gaan we verandering in aanbrengen.
Log in via /umbraco
Ga dan naar Settings, Document Types. Klik op de 3 puntjes en kies voor "Document Type with Template". Noem deze Homepage
Voeg een group toe, geef deze de naam html
Voeg daarop een property type, type RichText Editor en geef deze de naam contents
Klik rechtsboven op de knop "Permissions" en zet "Allow as root" aan.
Sla dit documenttype op.
Ga dan in het menu links naar beneden naar Templates.
Daar staat nu een Homepage tussen. Vul deze met de volgende inhoud:
@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.Homepage>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@{
Layout = null;
}
<html>
<head><title>Dit is een test-site</title></head>
<body>
@Model.Value("contents")
</body>
</html>
Ga dan naar Content.
Klik op de 3 puntjes achter Content (in het linkermenu) en kies voor Create an Item under Content. Je kunt alleen maar kiezen voor Homepage.
Je kunt dan een stukje tekst invoeren in de editor (contents) en vervolgens sla je de pagina op en publiceer je deze.
Dit is natuurlijk wel heel basic en je site gaat er straks heel anders uitzien, maar de basis is gelegd!