How to Publish A Custom Web Design On Sharepoint Online (Office 365) Public Web Site

Below are the steps you must take to create and publish a custom design to Sharepoint Online Public Website:

  1. Create Public Website Collection in Office 365 Tenant
  2. Map network drive
  3. Upload files (html,js,css,images)
  4. Create Master page using Design Manager
  5. Publish changes and new Master page
  6. Set Master page

Create Public Website Collection in Office 365 Tenant

Skip this step if you have already created a public web site collection

  • Navigate to Site Collections under Sharepoint Admin Center (Navigation > Admin > Sharepoint > Site Collection)
  • Select New – option from Ribbon. Next – select Private Site Collection.
  • Confirm settings – create new public website
    Note: you can have only one Public Website per domain.

Map Network Drive

Maping network drive to Sharepoint Online/Office 365 site collection/document library is already well documented process so I will just provide link to an MSDN article –

In general, the steps below should do the necessary:

  • Select the Keep me signed in check box*
  • Add your SharePoint Online sites to trusted sites*
  • When you map the new network drive use the URL of the newly created public website,
    URL will probably be in a format similar to this – https://<tenant-name>
    Note: Write a comment if you have problems with this step

Upload Files

What you really need to do is just copy files to network drive. Design files are usually found in the folder under <site-collection-url>/catalogs/masterpage/<new-folder>. Create a new folder and paste/move files.

Create The Master Page Using  Design Manager

  • Go to Site Settings – Design Manager under Look and Feel Group (Public Website Collection > Site Settings > Design Manager) or just add this to the URL of a Site Collection – _layouts/15/DesignMasterPages.aspx
  • On the left side of the new window select Edit Master Page
  • Select Convert an HTML file to a Sharepoint master page
  • Navigate to the HTML file you will convert to the Masterpage
  • If conversion succeeds you will be notified in the Status field
    Note: In case of failed conversion follow error message – most of the time they are really descriptive and helpful

Publishing Changes And New Master Page

Check In every single file you need for this design to be visible from the web and Anonymous users to see. Since Sharepoint Online is missing a feature of Multi Select-Check-In (this is something that Sharepoint On-premise has no problem doing), you should just use Sharepoint Designer, unless you have the time and energy to Check-In all the files one by one. I doubt that.

  • Install > Open Sharepoint Designer
  • Open Site Collection of Public Website
  • Go to folder where the files are (_catalogs/masterpage/<folder>)
  • Select files > Check In > Publish
  • Note: You will still need to go over every folder – you can’t select a folder an Check-In/Publish all the files it contains #fail

Set Master Page To Site Collection

  • Go to Site SettingsMaster Page (under Look and Feel Group)
  • Select Master page next to: Specify a master page to be used by this site and all sites that inherit from it:
  • Note: If master page file has no errors and master page (.html) was Checked-In you should be able to see it from drop down control

Give us a feedback in comments below. Thanks!




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s