- Organizational Level
- Site Level
On this blog post let’s see how to host static content (HTML, JS, CSS, Images et) by updating the site scripts settings at the site level. At the end I write some options to host Static content in Azure.
- Modern SharePoint Communication Site
- SharePoint Online Tenant Admin access for executing few PowerShell commands
- HTML Content
- Access to Azure Subscription as a Contributor to test static content hosting in Azure
Hosting Static content on a SharePoint Online Site:
For sample HTML content I’ve downloaded from the following Azure Sample GitHub repo
Connect a SharePoint Online administrator to a SharePoint Online connection. This cmdlet must run before any other SharePoint Online cmdlets can run
Connect-SPOService -Url https://domain-admin.sharepoint.com
Run a Power shell command to disable the property DenyAddAndCustomizePages at the site level by running the following command
Set-SPOsite https://domain.sharepoint.com/sites/sitename -DenyAddAndCustomizePages 0
Verify if DenyAddAndCustomizePages is Disabled. To check this the property value run the following command
Get-SPOSite -Identity https://domain.sharepoint.com/sites/sitename -Detailed | select DenyAddAndCustomizePages
Be ready with the HTML sample. I’ve downloaded static content from the Azure HTML Sample github repo which has
If there is any file with HTML extension, rename the extension to .aspx. On this sample there was 1 HTML file by the name index.html, I’ve renamed the file index.html to index.aspx
Open the SharePoint Online Communication site in the browser & navigate to the Document library. I’ve chosen the default document library (Shared Documents) for the storing the HTML, you can also create a custom document library, site assets library.
Upload the folder which has the .HTML file renamed to .aspx and the supporting files (JS, Images, CSS etc)
After the upload
Click the index.aspx file, it should render the file with HTML, CSS, JS etc as shown below
The URL of the HTML page will be in the following structure for the index.aspx file
In the document library if you have a HTML file converted to ASPX before executing the command, it may not work. To make it work delete the ASPX file and upload it again to the document libraryTip
You can now Enable the property DenyAddAndCustomizePages by executing the following SharePoint Online PowerShell cmdlet
Set-SPOsite https://domain.sharepoint.com/sites/sitename -DenyAddAndCustomizePages 1
If you wanted to add another HTML file after the above command, you will have to disable the property DenyAddAndCustomizePages before adding the HTML file. I’ve shown you how to host static HTML on SharePoint Online site which will not cost you anything provided there is Microsoft 365 license. If you need additional features like Custom domain, anonymous access, deployments etc you can do so with Azure.
Embed the Static HTML Page in a SharePoint page:
To embed this on a SharePoint Page, add the Embed webpart on the page and paste the above link on the Webpart property pane for Website address or embed code as shown below
Static Content in Azure:
There are couple of options in Azure to host your HTML as shown below
- Azure App service
- You can create an App service in Azure to host your static HTML. There is Microsoft documentation with detailed instruction to set this up. You can lot of options with App service like Auto scaling, Custom domain, Anonymous access, auto deployments etc. There is also a Free pricing tier F1 for hosting your content.
- Azure Static Webapps
- As of now the service is in Preview mode which automatically builds and deploys full stack webapps to Azure from Github repository. During preview, its free of cost. I’ve recently tested this, if you wanted to try go through this documentation.
- VS Code extension for Static Webapps
- You can also serve dynamic content with Azure functions integration.
- Azure Storage
- This service also has capability to serve static content (HTML, CSS, JS & image) from the blob container. To know more, check this documentation from Microsoft.
Summary: On this post we have seen options to host static content in SharePoint Online site & Azure. Based on your requirement (Anonymous access, custom domain, cost etc) you can choose one from the options given above. Hope you have found this informational & helpful in some way. If there is some other option to host static content, please let me know on the comment section below