I tried deploying a page made with antique Middleman on Azure Static Web Apps

Introduction

Preface

Since this article is supposed to be published in slide format, it is mainly bulleted.

Please note that this view is my personal view and does not match the view of the company to which I belong.

Self-introduction

It would be helpful if you could see around here.

--Born during the Employment Ice Age (1981) --Maybe a cowboy engineer -C # development at a special apparel subsidiary ――I'm doing a lot of other things --PyCon JP staff ... ――Writing such as the chief editor of the doujin circle "Kyotokudo"

Mainly used "weapon"

• C# ――But ASP.NET Core is not usable in practice
• SQL --Transact-SQL main
• JavaScript/TypeScript
• Python
• Ruby --Text

Now let's get into the main subject

Azure Static Web Apps

--New service announced at Build 2020 --Can publish static websites and APIs --It seems that static pages use CDN --API is Azure Functions and JavaScript --It seems to run on Linux Node.js --Deployment tightly linked to GitHub Actions --In addition to JAMstack, it also supports Hugo and Jekyll.

Middleman

--Ruby static site generator --Easy to use for those who understand Rails --Current version is 4.3.6 ――However, my page has not been upgraded to ver.4 series. -It is also used in Own page

My page

-** Made using the Antiques ** Middleman --Ver.3 series whose support has ended --Not updated much --The template is used by changing the color of 5t111111 / middleman-blog-drops-template. --This template, when I used it, Node.js was only used to fetch Font Awesome ――It seems that you are using babel now

Where are you using for hosting?

--Currently hosted on Netlify --Build uses Netlify's CI / CD environment --No YAML required for settings --Only specify the command --And faster than Azure Static Web Apps --Originally deployed on GitHub Pages --Build is local ――Let's take this opportunity to try Azure Static Web Apps ――But it's not straightforward

Azure Static Web Apps settings

For details, refer to MS Official Document.

This is almost the same as GitHub Actions.

1. Create Azure Static Web Apps in the Azure portal
2. Decide on a subscription, name, and region
3. Link your GitHub account with your Azure account
4. Link the GitHub repository

Azure Static Web Apps build settings

I adopted the following settings

Then edit the YAML added to the repository.

Editing YAML

The contents of YAML are [Page of the file on GitHub](https://github.com/huideyeren/huideyeren.github.io/blob/develop/.github/workflows/azure-static-web-apps-black-water- 01753d000.yml).

The points are as follows.

1. Added Ruby and Node.js setup.
2. Add build task
3. Change the deployment task to deploy only

But it works on Netlify but not on GitHub!

What went wrong

1. Font Awesome 4.7.0 has been increasing for screen readers for some reason
2. There was no setting for npm run build in package.json

Coping

1. Update Font Awesome to ver.5 Free version
2. Added npm run build settings --However, ** do nothing ** --Build should be done before deployment

as a result

I was able to actually deploy to Azure Static Web Apps!

However, deployment was faster with Netlify.

Therefore, we plan to continue using Netlify in the future.

By the way, what about the renewal?

The CMS + JAM stack conversion announced at PyCon JP 2019 is currently at a standstill.

If you can afford it, this person will also proceed with the plan.

thank you for your attention