Tutorials
The Dojo: Umbraco tutorials
Practical, step-by-step guides from 20+ years of building and upgrading Umbraco sites. Real code, real screenshots, tested on Umbraco 18.
No tutorials match that. Try another word, or ask us.
Getting started
How to install Umbraco 18 and create your first site
Install the .NET 10 SDK and the Umbraco templates, create a new Umbraco 18 project with SQLite, and log in to the backoffice for the first time. About 10 minutes.
Read the tutorialDocument types, compositions and templates in Umbraco
Model your content properly: create a document type with a template, add properties, reuse fields with compositions, and render them in Razor with or without Models Builder.
Read the tutorialHow to build a navigation menu and breadcrumbs in Umbraco
Build a main menu with active states and dropdowns, hide pages with umbracoNaviHide, and add accessible breadcrumbs, with copy-and-paste Razor for Umbraco 18.
Read the tutorialStrongly typed models with Models Builder in Umbraco
Use Models Builder to get IntelliSense and compile-time checks for your document types. Choose the right mode for development and production, and avoid the common deployment traps.
Read the tutorialContent & media
How to use Block List and Block Grid in Umbraco
Let editors build flexible pages from reusable blocks. Set up a Block List and a Block Grid, create element types, and render each block with its own Razor partial view.
Read the tutorialImages, media and responsive crops in Umbraco
Upload images, pick them with the Media Picker, define crops, and output fast, responsive WebP images with srcset and proper alt text using Umbraco's built-in ImageSharp processing.
Read the tutorialHow to build a multilingual site in Umbraco
Add languages, let content vary by culture, give each language its own URL or domain, translate fixed text with the Dictionary, and add a language switcher.
Read the tutorialForms, members & email
How to create a contact form in Umbraco without Umbraco Forms
Build a secure contact form with a surface controller: model validation, anti-forgery protection, a honeypot for spam, email notification and a thank-you message. Copy-and-paste code.
Read the tutorialHow to send email from Umbraco with SMTP
Configure SMTP for Umbraco 18 (Microsoft 365, SendGrid, Mailgun and others), keep credentials secret, test with a local mail catcher, and send your own emails with IEmailSender.
Read the tutorialMember login and protected pages in Umbraco
Let website visitors sign in: create members and member groups, restrict pages with Public Access, and add login and logout forms using Umbraco's built-in controllers.
Read the tutorialHeadless & search
Go headless with the Umbraco Content Delivery API
Turn on Umbraco's Content Delivery API, query pages as JSON with filters, sorting and paging, secure it with an API key, and fetch content from JavaScript, React or a mobile app.
Read the tutorialHow to add site search to Umbraco with Examine
Build a fast site search page using Umbraco's built-in Examine (Lucene) index: a reusable search service, a search results page and tips for better relevance.
Read the tutorialSEO & URLs
How to add an XML sitemap and robots.txt to Umbraco
Generate a dynamic sitemap.xml from your Umbraco content tree, add a robots.txt that points search engines at it, let editors exclude pages, and submit it to Google Search Console.
Read the tutorialSEO meta tags, Open Graph and canonical URLs in Umbraco
Give every page an editable SEO title and meta description, a canonical URL, Open Graph and Twitter tags for social sharing, and a noindex switch, using one composition and one partial view.
Read the tutorialURL rewrites and redirects in Umbraco
Set up 301 redirects and URL rewrites on a modern Umbraco site: force one domain, lowercase URLs, trailing slashes and old .aspx links. Copy-and-paste rules, tested on this very site.
Read the tutorialDifferent URLs and domains for different pages in Umbraco
Give pages custom URLs and extra URLs, then point a separate domain at a section of your site, from DNS records to Umbraco's Culture and Hostnames. With screenshots.
Read the tutorialBackoffice development
How to create a custom dashboard in the Umbraco backoffice
Add your own dashboard to the Umbraco 14–18 backoffice with an umbraco-package.json manifest and a Lit web component, including reading the signed-in user. Tested on Umbraco 18.
Read the tutorialHow to create a custom property editor in Umbraco
Build your own property editor for Umbraco 14–18: register a propertyEditorUi in a manifest, create a Lit element that reads settings and saves its value, then use it in a data type.
Read the tutorialRun code when content is published in Umbraco (notifications)
Hook into Umbraco events with notification handlers: run code after a page is published, block publishing when rules aren't met, and register handlers with a composer. Plus no-code webhooks.
Read the tutorialHosting, security & upgrades
How to harden your Umbraco site's security
A practical security checklist for Umbraco 18: HTTPS and HSTS, security headers and a Content Security Policy, backoffice lockdown, strong passwords, secrets management and staying patched.
Read the tutorialFind vulnerable packages with the Umbraco Security Dashboard
Install the free Umbraco Security Dashboard to scan your site against known vulnerabilities every day, see which advisories actually affect you, and report results to a central place via webhook.
Read the tutorialHow to deploy Umbraco to IIS or Azure App Service
Publish an Umbraco 18 site for production: the right appsettings, runtime mode, Data Protection keys, IIS setup with the .NET 10 Hosting Bundle, folder permissions, and Azure App Service deployment.
Read the tutorialHow to upgrade Umbraco to a new version
Upgrade Umbraco safely: back up first, read the version-specific notes, update the NuGet packages, run the database upgrade, and test. Covers patch, minor and major upgrades.
Read the tutorial