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"


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

Setting items value
App location /
Api location Do not enter this time
App artifact location build

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

Recommended Posts

I tried deploying a page made with antique Middleman on Azure Static Web Apps
I tried deploying a Docker container on Lambda with Serverless Framework
I made a portfolio with Ruby On Rails
I made a GUI with Swing
I made an app to scribble with PencilKit on a PDF file
I tried to make a Web API that connects to DB with Quarkus
I made a site that summarizes information on carbohydrate restriction with Vue.js
I tried playing with BottomNavigationView a little ①
I made a risky die with Ruby
I made a rock-paper-scissors app with kotlin
I made a calculator app on Android
I made a rock-paper-scissors app with android
I built a Java EE environment on AWS and tried running a web application
I tried to clone a web application full of bugs with Spring Boot
04. I made a front end with SpringBoot + Thymeleaf
I made a mosaic art with Pokemon images
I made a gender selection column with enum
I made blackjack with Ruby (I tried using minitest)
I tried running Ansible on a Docker container
I made a LINE bot with Rails + heroku
I tried to break a block with java (1)
I tried running Java on a Mac terminal
I tried Getting Started with Gradle on Heroku
[Azure] I tried to create a Java application for free ~ Connect with FTP ~ [Beginner]
I made a drawing chat "8bit paint chat" on WebAssembly
I tried using Log4j2 on a Java EE server
I tried OCR processing a PDF file with Java
I made a library for displaying tutorials on Android.