SharePoint Online Public Site: adding JS & CSS references to a Master page

I’m not going to describe the process of creating a custom master page from end to end, as there are plenty of good articles and blogs out there already. I just want to share one possible pitfall that I fell into…

As any owner of a website might, I decided to create a new master page for my SharePoint Online Public Site.  And to save time I started by coping one of the HTML files associated with an “out of the box” mater-pages.

The first thing I planned to do was to add references to my CSS and JavaScript files. This should be a very simple task, unless like me you decide to try to add the references right at the bottom of the <HTML /> block. Or to me more precise, just after the <mso:CustomDocumentProperties /> block of code.

Note: The mso tag contains block SharePoint metadata used by Design Manager to convert the file into a .master file.

After much trial and error I found the “Design Manager” parser seemed to ignores code (or at least mine) that proceeds the mso tags, in the <head /> block.  The fix is simple, I added my references just above the mso tags and all will be fine.

And this is what my JavaScript and CSS references look like:

<!--CS: References to External Files-->

<!--SPM:<SharePoint:CssRegistration Name="/_catalogs/masterpage/MPName/CSS/london.css" After="corev15.css" runat="server"/>-->

<!--MS:<script id="jQuery"     type="text/javascript" src="/_catalogs/masterpage/MPName/JS/_Bundle.js">--><!--ME:</script>-->

<!--CE: References to External Files-->

If you are interested in what these tag and can be used for, taking a look at this page:

Other useful links:

Update January 2015:

Starting January 2015, Microsoft is making changes to the SharePoint Online Public Website feature. Customers who currently use this feature will continue to have access to the feature for a minimum of two years after the changeover date of March 9, 2015. New customers who subscribe to Office 365 after the changeover date won’t have access to this feature. Moving forward, Office 365 customers will have access to industry-leading third-party offerings that will enable them to have a public website that provides a complete online solution and presence.