使用 Azure 静态 Web 应用服务免费部署 Hexo 博客

一.前言

最近在折腾 Hexo 博客,试了一下 Azure 的静态 Web 应用服务,发现特别适合静态文档类型的网站,而且具有免费额度,支持绑定域名。本文只是以 Hexo 作为示例,其他类型的框架也是支持的。

流程:

《使用 Azure 静态 Web 应用服务免费部署 Hexo 博客》

整个流程完全自动化,免费。并且访问具有不错的速度,演示:https://zhiqiang.li

二.环境准备

将会以标准的 Hexo 博客来作为演示,如果还不会使用 Hexo 博客,可以阅读我前面几篇文章。

《使用 Azure 静态 Web 应用服务免费部署 Hexo 博客》

三.Azure 静态 Web 应用

1.创建

访问 https://portal.azure.com/ 登录 Azure,如果没有账户可以去注册一个。

找到静态 Web 应用服务。

《使用 Azure 静态 Web 应用服务免费部署 Hexo 博客》

计划类型选择:免费

区域选择:East Asia(香港)

《使用 Azure 静态 Web 应用服务免费部署 Hexo 博客》

部署详细信息可以直接选择 Github,然后选择对应的仓库,Azure 会自动在仓库里设置 Github Actions,本文为了演示就选择其他,在创建后手动配置。

2.配置

在你的博客根目录下创建 .github/workflows目录,然后创建 github action 文件: static-web-app.yml

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push'
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: 'upload'
          app_location: '/'
          output_location: 'public'
          app_build_command: 'npm run deploy'

3.配置 SECRET

进入你的博客仓库 Settings => Security => Secrets => Actions

新建一个 Secret,名称 AZURE_STATIC_WEB_APPS_API_TOKEN

《使用 Azure 静态 Web 应用服务免费部署 Hexo 博客》

令牌在 Azure 获取:

《使用 Azure 静态 Web 应用服务免费部署 Hexo 博客》

四.测试

现在 push 任意 commit 都会触发 Github Actions 部署你的博客

《使用 Azure 静态 Web 应用服务免费部署 Hexo 博客》

可以访问 Azure 提供的 URL 来访问

《使用 Azure 静态 Web 应用服务免费部署 Hexo 博客》

五.自定义域

访问 设置 => 自定义域,可以配置自己的域名

《使用 Azure 静态 Web 应用服务免费部署 Hexo 博客》

六.额度

关于免费额度如下

《使用 Azure 静态 Web 应用服务免费部署 Hexo 博客》

    原文作者:晓晨Master
    原文地址: https://www.cnblogs.com/stulzq/p/16505837.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞