背景
最近在浏览微软的文档的时候发现，微软喜欢用Hugo这个文档框架，有些技术产品的文档页面就用Hugo来做的，同时搭配Github + Azure Static Web Apps Service这个组合来完成自动构建和发布。
刚好我也有个和Hugo类似的静态前端框架在用，结果还真的在Azure Static Web Apps Service支持的范围内，索性就尝鲜一试。
什么是Azure静态网站应用服务(Azure Static Web Apps)
Azure Static Web Apps是一种服务，可从代码存储库自动生成完整的堆栈Web应用，并将其部署到Azure。
使用下来通俗的感受就是，基于Git，发布你的静态SPA到Github上，然后会自动触发Github的Actions进行流程构建，在Github构建流程中会编译SPA，并且最终发布到Azure的静态应用中去，加上自定义域名，也就实打实的一个静态网站了，应该特别适合一些技术产品的网站或者文档中心来着。
基本概念
Azure静态Web应用的工作流适用于开发人员的日常工作流。基于代码更改生成并部署应用。
当你创建Azure Static Web Apps资源时，Azure会直接与GitHub或Azure DevOps交互以监视你选择的分支。每次你向受监视的分支推送提交或接受拉取请求时，系统都会自动运行一次生成，并将你的应用和API部署到Azure。
通常使用不需要服务器端渲染的库和框架（例如，Angular、React、Svelte、Vue或Blazor）来生成静态Web应用。这些应用包括构成应用程序的HTML、CSS、JavaScript和映像资产。对于传统Web服务器，这些资产与任何所需的API终结点一起由单个服务器提供。
使用静态Web应用时，静态资产与传统Web服务器分离，由分布在世界各地的服务器端提供。由于文件在物理上离最终用户更近，这种分布使文件提供的速度更快。此外，API终结点使用无服务器体系结构，无需将完整的后端服务器组合在一起。
Azure Functions是一种无服务器解决方案，可以使用户减少代码编写、减少需要维护的基础结构并节省成本。无需担心部署和维护服务器，云基础结构提供保持应用程序运行所需的所有最新资源。
主要功能
- 适用于HTML、CSS、JavaScript和映像等静态内容的Web托管。
- 由Azure Functions提供的集成API支持。
- 一流的GitHub和Azure DevOps集成，其中的存储库更改会触发生成和部署。
- 全球分布的静态内容，使内容更接近你的用户。
- 可自动续订的免费SSL证书。
- 自定义域为应用提供品牌自定义。
- 调用API时使用反向代理的无缝安全模型，这不需要配置CORS。
- 身份验证提供程序与Azure Active Directory、Facebook、Google、GitHub和Twitter集成。
- 可自定义的授权角色定义和分配。
- 后端路由规则，使你能够完全控制所提供的内容和路由。
- 生成的临时版本由拉取请求提供支持，在发布前提供站点的预览版本。
可对静态Web应用执行的操作
- 使用Angular、React、Svelte、Vue等JavaScript框架和库构建新式Web应用程序，或使用带Azure Functions后端的Blazor创建WebAssembly应用程序。
- 使用Gatsby、Hugo、VuePress等框架发布静态站点。
- 使用Next.js和Nuxt.js等框架部署Web应用程序。
安装Visual Studio Code扩展
通过VSC的扩展菜单搜索Azure Static Web Apps关键词安装即可。
实在找不到就用下面的地址：
https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps
安装完成之后，VSC的左侧菜单会多出一个Azure图标。