使用Azure Static Web Apps部署Hexo站点
LI Rui

Azure上的静态Web应用(Static Web Apps)是一种新式的Web服务,我们可以将React、Vue等框架编写的应用上传到GitHub上,并通过GitHub工作流自动生成静态文件部署到云上。除了静态前端外,我们还能集成Serverless动态后端提供扩展,搭建完整的网站。

目前静态Web应用还处于预览状态,属于免费使用,本博客也转向使用静态Web应用+CDN的方案来减轻服务器负担并简化更新流程。下面将一步步介绍如何部署Hexo博客到静态Web应用上。

创建博客并上传到GitHub

在Linux环境中,我们通过下面的命令来新建一个博客到hexo_blog文件夹下:

1
hexo init hexo_blog

如果找不到hexo命令或者缺少Node.js环境,可以参考Hexo的文档。我们在新建好的文件夹内可以使用hexo s在本地起一个测试服务器查看博客效果。

切勿将测试服务器用于生产环境。

假设我们已经完成了博客的编写,我们可以在GitHub上创建一个仓库,并将博客推到仓库上。你可以选择博客为公共或者私有仓库。假设我们创建的仓库名为hexo_blog,下面的命令在本地博客文件夹内运行。

1
2
3
4
5
6
git init
git remote add origin git@github.com:KernelErr/hexo_blog.git
git add .
git commit -m "Initialize"
git branch -M main
git push -u origin main

至此我们的博客文件已经被上传到了GitHub上。

创建静态Web应用完成部署

接下来让我们登录Azure门户完成静态Web应用的创建,选择Create a resource->Web->Static Web Apps (preview)。

选择你的Azure订阅和资源组,并链接GitHub选择对应的仓库和分支。Build Details保持图中默认的Custom设置,接下来即可进行创建。Azure会自动创建GitHub工作流文件,并开始部署。

一旦部署完成,你可以在Azure的资源详情页找到一个azurestaticapps.net下的子域名,那就是部署的位置。可以将这个地址分享给他人访问或者绑定自己的域名。目前CDN服务还未支持直接集成静态Web应用,期待后续更新。

  • 本文标题:使用Azure Static Web Apps部署Hexo站点
  • 本文作者:LI Rui
  • 创建时间:2021-04-16 09:11:45
  • 本文链接:https://www.lirui.tech/post/2021/10f1726f638d.html
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-SA 许可协议。转载请注明出处!