Requirements

• Shifter account (Creating an account)

• GitHub account

• AWS account

• Node.js

• Gridsome CLI

Start Shifter Headless

1. Login Shifter dashboard

https://go.getshifter.io/

Navigate to Headless

2. Create new Headless Site if you haven’t

Please refer to support document How to start up Shifter Headless WordPress for more details.

3. Create or import some posts/pages and media

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. Start Shifter Headless and copy its URL

Sample WordPress URL: https://shifterheadless-gridsome-aws-amplify.hl-a.getshifter.io

Create new GitHub repository

1. Access GitHub

https://github.com/

2. Create repository

Click [New] button near the Repositories menu

Name your repository.
We name it as shifterheadless-gridsome-aws-amplify for a sample.

3. Copy the repository’s URL

The URL will be git@github.com:YOUR-GITHUB-ACCOUNT/shifterheadless-gridsome-aws-amplify.git or https://github.com/YOUR-GITHUB-ACCOUNT/shifterheadless-gridsome-aws-amplify.git

Create new Gridsome project on your local

1. Install Node.js if you haven’t.

A. Install via package

• https://nodejs.org/en/download/

B. Install via homebrew with nodebrew

• https://github.com/hokaccha/nodebrew

• https://dev.to/toyotarone/how-to-install-nodejs-on-macos-with-nodebrew-4627

2. Install “Gridsome CLI” to the local machine

Runthe following to install it

$ npm install --global @gridsome/cli

Refer an official document for more details

3. Create new Gridsome project

Run gridsome create YOUR-PROJECT-NAME wordpress command

Refer an official WordPress starter for Gridsome document for more details.

$  gridsome create shifterheadless-gridsome-aws-amplify wordpress

❯ Clone https://github.com/gridsome/gridsome-starter-wordpress.git 1.64s
❯ Update project package.json 0s
❯ Install dependencies 20.46s

  - Enter directory cd shifterheadless-gridsome-aws-amplify
  - Run gridsome develop to start local development
  - Run gridsome build to build for production

4. Move into created project directory

$ cd shifterheadless-gridsome-aws-amplify
or
$ cd YOUR-PROJECT-NAME

5. Initialise and setup git for the project

$ git init
Initialized empty Git repository in shifterheadless-gridsome-aws-amplify/.git/

6. Set remote URL

Add remote URL as an origin of the repository

$ git remote add origin git@github.com:YOUR-GITHUB-ACCOUNT/shifterheadless-gridsome-aws-amplify.git 

or

$ git remote add origin https://github.com/YOUR-GITHUB-ACCOUNT/shifterheadless-gridsome-aws-amplify.git

7. Edit “gridsome.config.js” and save changes

Rewrite YOUR_WEBSITE_URL with copied WordPress URL on Shifter dashboard.

  plugins: [
    {
      use: '@gridsome/source-wordpress',
      options: {
            baseUrl: 'YOUR_WEBSITE_URL', // required
            typeName: 'WordPress', // GraphQL schema name (Optional)
      }

will be like below:

  plugins: [
    {
      use: '@gridsome/source-wordpress',
      options: {
            baseUrl: 'https://shifterheadless-gridsome-aws-amplify.hl-a.getshifter.io', // required
            typeName: 'WordPress', // GraphQL schema name (Optional)
      }

8. Run develop command for checking how Gridsome website works

$ gridsome develop

Access http://localhost:8080/ for checking website

Access http://localhost:8080/___explore for exploring GraphQL data.

Click [Ctrl] key with [C] key to stop server if all look good.

Let’s build your website.

9. Run build command for building data

$ gridsome build

All data will be build under dist directory.

10. Commit files and push them to GitHub

$ git add .
$ git commit -m "first deployment"
$ git push origin master

Working with AWS Amplify Console and deploy

1. Navigate to AWS Amplify Console

https://console.aws.amazon.com/amplify/home

2. Click [Connect app] button

3. Choose Git service and click [Continue] button

We use GiHub as a sample.

4. Click [Authorize aws-amplify-console] button to continue

5. Fill in password for chosen Git service (GitHub) and click [Confirm password]

6. Add repository branch and click [Next] button.

Repository: shifterheadless-gridsome-aws-amplify

Branch: master

7. Click [Edit] button to configure

8. Edit baseDirectory to /dist then click [Save]

9. Click [Next] button

10. Click [Save and deploy] button

11. Amplify will start working

12. Now AWS Amplify is building the webapp

13. Build has been succeeded and deployed

14. Click generated URL which ends with “amplifyapp.com” to check your web app

15. You’ve got your webapp now!

That’s all!