Requirements

Also refer to official documents

Install "Gatsby CLI" and dependencies, if you haven't

$ npm install -g gatsby-cli

Refer to Gatsby's official document Quick Start for more details.

Boot Shifter Headless website

1. Login to Shifter Headless dashboard
https://go.getshifter.io/admin/headless/

2. Start Headless WordPress
For more details, refer to another support document How to start Shifter Headless WordPress up.

3. Create any contents with logging in WordPress admin URL

We use theme unit test file for the document

You can download it directly: https://raw.githubusercontent.com/WPTRT/theme-unit-test/master/themeunittestdata.wordpress.xml

4. Copy WordPress URL

Document assumes WordPress URL is https://YOUR-WORDPRESS-URL.getshifter.co

5. Keep WordPress running

Clone a repository for Azure Static Web Apps

Navigate to our starter repository
https://github.com/getshifter/gatsby-starter-wordpress-typescript

1. Click [Fork]

2. The repository has been forked as "gatsby-starter-wordpress-typescript"

3. Click [Clone or download] to copy repository's URL

URL will be git@github.com:YOUR-GITHUB-UERNAME/gatsby-starter-wordpress-typescript.git

4. Clone to the local

$ git clone git@github.com:YOUR-GITHUB-USERNAME/gatsby-starter-wordpress-typescript.git ./gatsby-starter-wordpress-typescript

5. Edit `gatsby-config.js` with text editor or vi command

You should update some values

5-1. Dive into cloned directory. In this sample, it's a gatsby-starter-wordpress-typescript .

$ cd gatsby-starter-wordpress-typescript

5-2. Rewrite baseURL in line 23 to your WordPress URL without https://

baseUrl: "YOUR-WORDPRESS-URL.getshifter.co",

5-3. [Optional] Rewrite searchAndReplaceContentUrls section

From

// Search and Replace Urls across WordPress content.
// searchAndReplaceContentUrls: {
// sourceUrl: "https://central.wordcamp.org",
// replacementUrl: "https://localhost:8000",
// },

// Search and Replace Urls across WordPress content.
searchAndReplaceContentUrls: {
sourceUrl: "https://YOUR-WORDPRESS-URL.getshifter.co"",
// replacementUrl: "https://localhost:8000",
},

And save changes.

6. Commit the changes.

$ git add .
$ git commit -m "update gatsby-config.js"
$ git push origin master

7. Make sure commit has been succeeded with accessing your repository.

Create account set up Azure Static Web Apps

1. Open Microsoft Azure
https://azure.microsoft.com/en-us/free/

3. Navigate to Portal.Azure.com

https://portal.azure.com/?quickstart=true#allservices

After sign in or finished creating account navigate to the portal page

4. Search "static web apps" and click [Static Web Apps (Preview)]

5. Click [Create static web app]

7. Click [Authorize Azure-App-Service-Static-Web-Apps] to authorise

8. Fill in required fields and click [Next: Build>] button

9. Fill in required fields and click [Review + create]

App location: /
Api location: api
App artifact location: public

10. Click [Create]

11. Navigate to Overview and copy URL of Azure Web Apps

12. Click "Workflow file" to confirm GitHub Action had been created

13. GitHub Action is created and the Azure's workflow is also copied to the repository

Working with the starter kit for Gatsby

1. Back to cloned repository named gatsby-starter-wordpress-typescript to local

2. Install npm

$ npm install

3. Run "gatsby develop" command to boot server and check contents

$ gatsby develop

[......]

-> wordpress__POST fetched : 40
-> wordpress__PAGE fetched : 19

[......] 

You can now view gatsby-starter-wordpress-typescript in the browser.
⠀
http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 12.461s

4. Access provided URL with web browser

Open http://localhost:8000/ with Firefox, GoogleChrome, Edge or anything else, you'll get sample page:

5. Hit [Ctrl] with [C] key to stop local server

6. Build static files for deploying

Run gatsby build command, you'll get contents which are generated to static files into public directory.

$ gatsby build 

success open and validate gatsby-configs - 0.032s
success load plugins - 2.378s
success onPreInit - 0.005s
success delete html and css files from previous builds - 0.036s
success initialize cache - 0.013s
success copy gatsby files - 0.103s
success onPreBootstrap - 0.020s
success createSchemaCustomization - 0.003s
-> wordpress__POST fetched : 40
-> wordpress__PAGE fetched : 19

[.....]
⠀
success Building production JavaScript and CSS bundles - 12.085s
success Rewriting compilation hashes - 0.006s
success run queries - 12.560s - 6/6 0.48/s
success Building static HTML for pages - 3.154s - 66/66 20.93/s
info Generated public/sw.js, which will precache 6 files, totaling 236235 bytes.
The following pages will be precached:
/offline-plugin-app-shell-fallback/index.html
success onPostBuild - 0.077s
info Done building in 56.884 sec

7. And commit your files

$ git add .
$ git commit -m "My first Gatsby's website with Azure"
$ git push origin master

Enumerating objects: 53, done.
Counting objects: 100% (53/53), done.
Delta compression using up to 16 threads
Compressing objects: 100% (49/49), done.
Writing objects: 100% (53/53), 265.62 KiB | 1.74 MiB/s, done.
Total 53 (delta 5), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (5/5), done.
To github.com:YOUR-GITHUB-USERNAME/gatsby-starter-wordpress-typescript.git

8. Make sure your repository has been updated

Access your repository: https://github.com/YOUR-GITHUB-USERNAME/gatsby-starter-wordpress-typescript

9. Navigate to "Actions" tab and confirm it completed to run

10. Access Azure Web Apps URL with your web browser

You'll get the contents

Also, you can add the URL to iPhones home use as a PWA

That's all