Gatsby + Azure 搭建静态网站

搭建静态网站相信大家并不陌生，搭建的方法也有很多。就拿我自己来说，最初我采用的是Jekyll + Github的做法，也就是很多人熟知的Github Pages。之后又把Jekyll布置在了Heroku上。再往后发现Jekyll并不是那么自由，在尝试Gatsby之后，又花了几天把网页框架转成了Gatsby。

对于这个Gatsby + Heroku 方案，我其实相当满意了，然而要不是偶然刷YouTube看到有人教授在Azure上部署静态网站，也许我怎么着也不会去尝试一下Azure吧。

事情是这样的，前几天看到有人介绍使用Azure搭建一个静态的网页。因为对Azure没什么了解，怀着好奇我便点了进去。简单的浏览了一下，博主用的例子当然很简单，建一个简单的HTML的页面，然后部署在Azure。其实Azure也好，Google Cloud也好，抑或是AWS，本质上都大差不离。然而当他在设置Azure app的时候，我注意到下拉菜单里有一个“Gatsby”的选项。难道说？？

于是花了点时间试了一下Azure，没错，我要介绍一下如何用Azure和Gatsby搭建一个免费而又功能齐全的静态网站。

Heroku

最开始我使用的平台是Heroku。Heroku本质上是一个基于AWS的平台，可以理解为更好用的AWS，所以凭借这套封装对用户收费（hmm，合理）。截止到今天，我已经花费了140美元（20 x $7/month）。基本只是为了SSL的支持，以及随时保持活跃的服务器。部署方面，Heroku也很方便，只要连接Github Repo的指定branch即可，每当该branch更新，Heroku就会自动部署，还是非常省心的。

你大可以用免费的服务器，代价就是不能绑定你自己的域名，以及第一次访问会有很大的延迟。一开始并不觉得，然而在用了Azure之后，发现Heroku的方案对于我这个没什么人访问，只是自娱自乐，自我学习以及记录一点学习成果的网站来说，有那么一些奢侈呢。

Azure的好处

试了一下Azure，Heroku有的，Azure都有，还免费。准确的说，虽然Azure要求你30天内升级成“pay-as-you-go”账户，也就是正式用户，但这一步不收费。也正如这个账号的类别所说，只要你不超过额度或者使用付费服务，就不会收取费用。还有一些服务会提供12个月的免费，而Static Web Apps又有永久免费的选项（特别适合像我这种没什么访问量的）。个人理解这就是永久免费的意思。

最后的最后，Azure免费的选项里就支持了SSL证书管理，并且没有像Heroku一样的延迟。兄弟们，这就值了7刀每个月，要什么奶茶？

看完我一拍大腿，这岂不是完美？！

如何搭建与部署

那么如何搭建呢？

1. 一个静态网站

巧妇难为无米之炊，所以首先你需要有一个静态的网站。本文以我自己为例，用到的是基于Gatsby的网页生成框架。具体的可以参考Gatsby的官方网站，或者是我之前写的文章。

简单来说：

gatsby new my-awesome-web-app

cd my-awesome-web-app
git init
git add -A
git commit -m "app setup"

2. 上传到Github

（如果你已经有了一个repo，可以直接跳过这部分）

新建一个Github的Repository，这个就不多赘述，之后把这个repo加为本地的remote repo。

git remote add <github repo address>

git push把本地的app，也就是网站上传至新建的repo。

git push --set-upstream origin main

3. 创建一个Azure Static Web App

访问Azure Portal
选择"Create a Resource"
搜索并选择“Static Web Apps”
填写好App设置
值得注意的是要连接你的Github，选择正确的Repo和Branch即可，也即第2步里的Repo
在Build的选项里，选择Gatsby

最后选择“Review + Create” 即可。有意思的是Azure会自动创建一个Github的workflow配置文件，与此同时可以到你的Github页面，选择“Actions”，可以看到正在进行的部署。

当创建完成时，可以看到Azure提供了一个域名，一般是kind-ground-some-id.azurestaticapps.net，点开就可以测试网站是不是可以访问了。

4. 设置域名（可选）

到第三步也差不多搞定了。当然Azure给的域名肯定没有自己的酷，如果你有自己的域名的话，记得在Azure里设置。

选择“Custom domains”
选择“Add”
- Domain name要带www，因为是CNAME。比如www.junhan.xyz
- Azure会生成一个host名称，复制并且在你的域名提供商那儿设置，比如我用的是Google domain，那就在Google domain里加入相应的DNS记录即可

Vola!

小结

到这里就差不多了，轻轻松松就把网站从Heroku搬到了Azure。除了Gatsby，你也可以部署基于别的网页框架的静态网站到Azure。

目前用下来毫无问题，而且想必Azure有更多有趣实用的功能，我已经迫不及待准备了解更多了。嘻嘻。

这一波啊，要给微软爸爸打电话，真的很香！