How to install uSkinned Site Builder on Umbraco Cloud

Step 5

Open the command line interface.

You can do this by navigating to any folder on your machine and typing cmd into the browser bar followed by the enter key.

Step 6

You should now build your project using the following command:

dotnet build

Step 7

You should now install uSkinned Site Builder. You can install the latest version via NuGet using the following command:

dotnet add package uSkinnedSiteBuilder

Step 8

On your local machine, open the file: 

/src/appsettings.json

Update the following Hosting setting to true:

"Hosting": {
    "Debug": true
}

The above setting will ensure that the smidge minification cache will be refreshed. This is required so that all of the custom property editors that ship with uSkinned Site Builder are displayed correctly.

Please note, after your first check-in, you can turn that setting back to false.

Step 9

Once complete, you can now run your site using the following command:

dotnet run

Step 10

Once the installation has been completed, navigate to the local URL provided by the command line.

The console will output a message similar to: 

[10:57:39 INF] Now listening on: https://localhost:44388

Step 11

Open your preferred browser and navigate to the local URL. 

uSkinned Site Builder for Umbraco will now be running on your local copy of your Umbraco Cloud website.

Now we want to push all of this hard work back up to Umbraco Cloud.

Step 12

When a website using uSkinned Site Builder is run for the first time, a migration process will be activated which makes changes to items within the Umbraco backoffice and installs demonstration content. Umbraco Cloud uses UDA files to control the metadata for your project. Items that we change during the migration process which have corresponding UDA files must be regenerated to force an update on these files. Otherwise you will get a Schema Mismatch error when deploying content to Umbraco Cloud.

In the Umbraco backoffice go to the Settings (Section) > Deploy (Tab).

Select the button labeled "Export Schema". This will extract the schema from your local Umbraco database and output the .uda files to your local environment.

Step 13

On your computer, open your git client or terminal from earlier. Now push your updates back to Umbraco Cloud.

Anything below the following folders should be excluded from your commit:

• src/UmbracoProject/wwwroot/uSkinned/css/generated/
• src/UmbracoProject/wwwroot/uSkinned/scripts/generated/

It is very important to make sure that you push all other changes back to Umbraco Cloud.

Please note, your website content will not be deployed to Umbraco Cloud yet.

Step 14

Once the check-in has been completed, return to your local Umbraco CMS back office. Now we want to deploy your local Content and Media to Umbraco Cloud. 

Go to the Media section of Umbraco. Right-click the Media heading and select 'Queue for transfer'. Click the 'Queue' button.

Go to the Content section of Umbraco. Right-click the Content heading and select 'Queue for transfer'. Click the 'Queue' button.

Step 15

In the Content section, go to the Dashboard and from the tabs click on Workspaces. You will see your Media and Content ready to transfer in the transfer queue. 

Click Transfer to Live.

Please note, depending on how many environments your project has on Umbraco Cloud the message might right Transfer to Development or Transfer to Staging and so on.

Wait for the Transfer to complete.

Step 16

uSkinned Site Builder along with Content and Media will now be completely deployed to your Umbraco Cloud environment.

Login to the Umbraco Cloud back office or browse to your Umbraco Cloud URL to see the website.

During the installation of uSkinned Site Builder, package migration actions are run which install demo content, update media types, member properties and appsettings. These steps should only ever be run once however the default behaviour of Umbraco Cloud is to run migrations on all environments.

You must disable this default behaviour if you intent to clone your project to a new environment.

To do this you must locate ~/appsettings.json and apply the following settings:

Set UpgradeUnatended to true.

Set RunSchemaAndContentMigrations to false.

{
  "$schema": "https://json.schemastore.org/appsettings.json",
  "Umbraco": {
    "CMS": {
      "Unattended": {
        "UpgradeUnattended": true
      },
     "PackageMigration": {
        "RunSchemaAndContentMigrations": false,
        "AllowComponentOverrideOfRunSchemaAndContentMigrations": false
      }
    }
  }
}

Further information on this requirement when working with Umbraco Cloud can be found here.