MC2MC Community Week session by Peter De Tender

1. MC2MC
Deploying a static website
on Azure for $5 /month

2. peter@pdtit.be @pdtit http://www.007ffflearning.com
What will be covered
CREATING STATIC
WEBSITES
HOSTING STATIC
WEBSITES ON
AZURE
SECURING &
PROTECTING YOUR
WEBSITE
DEMOS Q & A

3. peter@pdtit.be @pdtit http://www.007ffflearning.com
About Me
• Peter De Tender
• Azure Business Program Mgr |
Azure Technical Trainer - @ Microsoft
• Former Azure MVP (5y)
• Technical Writer & Book publisher
peter@pdtit.be @pdtit http://www.007ffflearning.com

4. peter@pdtit.be @pdtit http://www.007ffflearning.com
Static Website
• A static website contains Web pages with fixed content,
typically in HTML
• A static website doesn’t mean a Single Page Application (SPA),
(as that one typically runs client-side scripts, which is not “static”)

5. peter@pdtit.be @pdtit http://www.007ffflearning.com
Top Static Website Examples
• Jekyll
• Hexo
• Hugo
• Octopress
• Pelican
• ...

6. peter@pdtit.be @pdtit http://www.007ffflearning.com
Using Hugo as an example
• Http://www.gohugo.io
• Written in Go (GoLang)
• Cross Platform (Windows, Linux, MacOS, FreeBSD)
• Extensive library of Free Open Sourced Themes
• Supports HTML and MarkDown files
• Free for mention policy
Thx to @Gregor_Suttie

7. Creating a new Hugo Website
Demo

8. peter@pdtit.be @pdtit http://www.007ffflearning.com
Azure Storage Account
• Storage as a Service
• Blob | SMB Files | Tables | Queues
• HTTP/HTTPS and REST API connectivity (and SMB for Files)
• Cheap! Easy!
• Redundancy options built-in
• Supports Static Website

9. peter@pdtit.be @pdtit http://www.007ffflearning.com
Storage Account | Static Site
• Expects an “index.html” or other default webpage
• Expects a “404.html” or other default error webpage
• Generates a URL: <storageaccount.zone.web.core.windows.net>
• $Web = your static site folder
• FTP Upload
• Azure Storage Explorer
• VSCode Extension
• (Azure) DevOps with Git Source Control

10. Creating an Azure Storage Account for
Static Web Site
Demo

11. peter@pdtit.be @pdtit http://www.007ffflearning.com

12. peter@pdtit.be @pdtit http://www.007ffflearning.com
What’s to fix?
• HTTPS = *.web.core.windows.net SSL/TLS Cert name
• URL with correct /public/ path to our web site (=Hugo reason)
• Theme doesn’t get recognized (=Hugo reason)
• Custom Domain / Custom URL

13. peter@pdtit.be @pdtit http://www.007ffflearning.com
Solutions
• Azure CDN (Content Distribution Network)
• Azure Application Gateway
• Azure Front Door

14. peter@pdtit.be @pdtit http://www.007ffflearning.com
Azure CDN – Content Delivery Network
• Azure Global Service (=config in multiple Azure Regions within
the geographies you specify)
• Content Caching
• URL Redirection
• Compression

15. Azure CDN
Demo

16. peter@pdtit.be @pdtit http://www.007ffflearning.com
Azure App Gateway |
• Layer 7 Load Balancer
• SSL/TLS offloading
• URL Path redirection
• HTTP to HTTPS redirection
• Session Affinity
• Web Application Firewall (WAF)
Azure App Gateway
Region-Based Load Balancer Global/Hybrid Load Balancer

17. Azure Front Door
Demo

18. peter@pdtit.be @pdtit http://www.007ffflearning.com
Show me the money!!
$0,20
/m
$0,80
/m
$51,45
/m
All this for <$5 /month Or $50 /month if you want ultimate security


19. peter@pdtit.be @pdtit http://www.007ffflearning.com
What you learned
CREATING STATIC
WEBSITES
HOSTING STATIC
WEBSITES ON
AZURE
SECURING &
PROTECTING YOUR
WEBSITE
DEMOS Q & A
A full blog post will go live tomorrow with all step-by-step instructions on how to build this yourself on
The 007FFFLearning and MC2MC blogs

20. peter@pdtit.be @pdtit http://www.007ffflearning.competer@pdtit.be @pdtit http://www.007ffflearning.com
Thank you