Skip to main content

How to install uSkinned Site Builder on Umbraco Cloud

Step 1

Login to the Umbraco Cloud portal (https://umbraco.io).

Step 2

Go to your project.

Step 3

Hit to 'How to connect to your machine'. Copy this URL.

Step 4

On your computer, paste the URL into your git client or terminal and your site will be downloaded to your local machine. We would recommend GitKraken or Source Tree.

Step 5

Open your site in Visual Studio Code. Assuming you have IIS Express for VS Code installed, you can run the website in a browser by hitting CTRL+F5 then choosing which browser in the prompt window. 

Step 6

Login to Umbraco CMS. 

Step 7

Go to the Packages section.

Step 8

Select Install Local from the top right-hand side.

Step 9

Browse to the location of the package on your computer. This should be a Zip folder of the Site Builder package.

Step 10

Please wait while the package uploads.

Step 11

Read and accept the terms and conditions on the screen. Click install to begin.

Step 12

Please wait while the Site Builder package installs. This may take several minutes, please be patient and do not navigate away from the screen. :-)

Step 13

Please wait while Umbraco CMS restarts. Please do not navigate away from the screen.

Step 14

Please wait while the browser window refreshes. Please do not navigate away from the screen.

Step 15

Now you can click to 'Finish' the installation. Please do not navigate away from the screen until you have clicked 'Finish'.

Step 16

Please wait.

Step 17

Your uSkinned Site Builder Package has successfully installed. Now navigate to the Content section to start building your new Umbraco website.

Step 18

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

It is important to make sure that you push all changes back to Umbraco Cloud. Some files are automatically ignored by your git client so you must make sure that the following files are committed and pushed back to Umbraco Cloud:

/App_Code (All files)
/App_Plugins/ (All files)
/bin/createsend-dotnet.dll
/bin/MailChimp.dll
/bin/ServiceStack.Text.dll
/bin/USNStarterKit.dll
/bin/PackageGarden.Licensing.dll
/bin/ImageProcessor.Plugins.WebP.dll
/bin/uskinned-v8-site-builder.lic
/config/usntheme.config
/css (All files)
/images (All files)
/Media (All files)
/scripts (All files)
/usn (All files)
/views (All files)
/error.html
/favicon.ico

Step 19

All changes that the Site Builder has made to your website will now be deployed to Umbraco Cloud. Example content will not be present yet. If you login to the Umbraco Cloud CMS and access the Settings section of Umbraco, you will now see new Document Types, Templates, Partial Views etc have been added.

Step 20

You now want to deploy any content and media items that you have added to your local site. First, go to the Media section of Umbraco. Right-click the Media heading and select 'Queue for transfer'. Click the 'Queue' button.

Step 21 

Return to the Content section of Umbraco. Click the 'Send changes to Live workspace' button. This will start the process of uploading your media items to the live Umbraco Cloud environment.

Step 22

Next, you want to deploy your content to the live Umbraco Cloud environment. Right-click the 'Content' heading and select 'Queue for transfer. Click the 'Queue' button.

Step 23

Click the 'Send changes to Live workspace' button. This will start the process of transferring your content changes to the live Umbraco Cloud environment.

Step 24

Your uSkinned Site Builder will now be completely deployed to your Umbraco Cloud environment. Login to the Umbraco Cloud CMS or browse to your Umbraco Cloud URL to see the website.

 

Additional steps - if necessary

If you run into any issues with your content not loading on Cloud, or you see errors when you try to edit a page in the CMS on Cloud, please do the following.

  1. Go to the folder ~/data/
  2. Open the command prompt as an admin
  3. cd to the ~/data/ folder
  4. Run the command echo > deploy-export
  5. Go to your Git client, there should be around 400(ish) new files
  6. Push these files to Cloud

Once your push has completed, go to your Umbraco Cloud site.

  1. Login to the CMS
  2. Go to Settings 
  3. Click on the Published Status tab
  4. Memory Cache > Reload
  5. Database Cache > Rebuild

Once this is complete, go to the front end of your site and hit a hard refresh. Your site should be working as expected.

#h5yr

uSkinned Site Builder

Get started — for FREE!

Join thousands of agencies, freelancers & businesses of all sizes worldwide who use uSkinned Site Builder for Umbraco to deliver results.