Deploying a static website on Azure for $5 / month
- 1. MC2MC Deploying a static website on Azure for $5 /month
- 2. [email protected] @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. [email protected] @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 [email protected] @pdtit http://www.007ffflearning.com
- 4. [email protected] @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. [email protected] @pdtit http://www.007ffflearning.com Top Static Website Examples • Jekyll • Hexo • Hugo • Octopress • Pelican • ...
- 6. [email protected] @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. [email protected] @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. [email protected] @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
- 12. [email protected] @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. [email protected] @pdtit http://www.007ffflearning.com Solutions • Azure CDN (Content Distribution Network) • Azure Application Gateway • Azure Front Door
- 14. [email protected] @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. [email protected] @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
- 18. [email protected] @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. [email protected] @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. [email protected] @pdtit http://[email protected] @pdtit http://www.007ffflearning.com Thank you