用 Azure Static Web App 给女神做网站

导语

众所周知，程序员找对象极其困难。追求女神的时候，不少程序员会精心制作一个网站表达浪漫。然而网站如何host是个问题。在免费方案里，GitHub Pages 一直是大家的首选，直到 Azure Static Web App 的出现让我们有了另一种选择。

制作一个静态网站

Azure Static Web App (SWA) 支不需要编译的持纯静态 HTML/CSS/JS 网站，以及静态内容生成器如Hugo、VuePress、Gatsby，也支持主流前端框架如 Angular，React，Vue，甚至 .NET 最新的 Blazor WASM。最重要的是！它完全免费！免费！免费！

因此，我们的技术框架选择非常丰富。大家都是程序员，这一步不用多啰嗦了。网站做完以后，存放到 GitHub 的仓库里就行了。本次我演示的是一个无需编译的纯静态 HTML 网站。

创建 Static Web App

在 Azure Portal 中点开 Static Web Apps，然后点击 Create

指定一个网站名称，选择 Free 免费套餐薅羊毛，Deployment source 选择 GitHub。然后点击 "Sign in with GitHub" 完成登录授权。

随后选择你存放网站的仓库以及分支名称

确认信息都正确后点击 “Create” 创建 SWA

此时回到 GitHub，会发现 Azure 偷偷帮我们提交了一个 commit，增加了一个 Action 用来编译和部署我们的静态网站。等待几分钟，它就能跑完。

随后，回到 Azure Static Web App，点击生成的随机URL，就可以打开我们做完的静态网站了。

绑定域名

默认URL非常难看，比如我这个 https://salmon-mushroom-0dc8efe00.azurestaticapps.net 送给女神表白肯定是要爆的。没关系，Azure Static Web App 和 GitHub Pages 一样支持自定义域名，并赠送 HTTPS 证书。

在 SWA 菜单里点击 “Custom domains”，点击 "Add"，然后输入你给女神购买的域名。

SWA 支持顶级以及子域名，对于顶级域名，需要做TXT记录验证，子域名只要CNAME就行了。我的这个域名正好是个顶级域名，所以在这里我们需要点击 "Generate code"，生成TXT记录值，之后去DNS里设置。

复制生成的代码

以 Azure DNS 为例，添加 TXT 记录

添加完成后 SWA 要静静思考一会儿人生，就像这样

我们不用傻等，还是回到 Azure DNS，把正常的 A 记录给加好。Alias record set 选为 Yes，type 为 Azure resource，然后选择 SWA 的网站名称，即可绑定。

最后，当 SWA 处理完成，自己的域名状态变成 Ready 后，就可以用自定义域名打开网站了。

用 SWA 部署静态HTML网站就是这么简单。如果大家对 SWA 部署 Blazor WASM 有兴趣，也可以看看我的 https://rmbcap.blazor.ediwang.dev/ 它就是用 SWA 部署的 .NET 5.0 Blazor WASM 应用。

项目代码：https://github.com/EdiWang/RMBCapitalization-Blazor