Building a WordPress site with Shifter Headless and WP Faust (Faust.js) on Vercel


Set up Shifter Headless

Get a WordPress URL and secret key for FaustWP

Create Shifter Headless site

Copy WordPress URL

Enable WP GraphQL and FaustWP plugin then copy a credential

Login to WordPress dashboard, then enable FaustWP and other necessary plugins such as WP GraphQL.

Navigate to [Settings] –> [Headless]

Copy [Secret Key]

Edit permalink

Change permalink structure to /posts/%postname%/

Modify WP GraphQL settings

Navigate to GraphQL menu, then check [Enable Public Introspection].

Please make sure WordPress is running.

Create an app on local

Follow Quick Start Doc on Getting Started with Next.js | Faust.js (

Create workspace

Run the following command:

npx create-next-app 
--example-path examples/next/getting-started
cd my-app

Edit .env.local

Rename .env.local.sample to .env.local.


# Your WordPress site URL

# Plugin secret found in WordPress Settings->Headless

Make a test by running dev

Run the command: npm run dev to build local server.

% npm run dev

> next-headless-getting-started@0.1.0 dev
> next dev

ready - started server on, url: http://localhost:3000
info - Loaded env from ~/Faustjs/my-appc/.env.local
event - compiled client and server successfully in 3.4s (475 modules)
wait - compiling /404 (client and server)...
event - compiled client and server successfully in 632 ms (532 modules)
wait - compiling / (client and server)...
event - compiled client and server successfully in 172 ms (540 modules)

Access development environment

Access http://localhost:3000 to confirm the sever fetches contents from Shifter Headless container.

Pushing files to Git repository

Create a git repository on GitHub, GitLab or Bitbucket, and push your local files.

On this document the repository ShifterHeadless-Faust-Vercel on GitHub.

Click [New] on GitHub or other Git service.

Copy the repository’s URL.

Add the repository’s URL as a remote

% git remote add origin

% git remote -v
origin (fetch)
origin (push)

Then push it.

% git push origin main
Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 16 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 570 bytes | 570.00 KiB/s, done.
Total 4 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
90ce35a..863d1d4 main -> main

Set up Vercel

Login to Vercel dashboard

Connect your Vercel project and git repository

Almost done.

After importing the repository, Vercel will start deployment.

If it doesn’t start, push some updates to the branch. In this sample, it’s a main branch.

Access the provided domain name end with

You’ll get posts on your deployed site.

That’s all!

Take the Next Step

Get started on your website today with Shifter. Try out our free plan and take the first step towards building the perfect website for you and your visitors.

Copyright © 2023 DigitalCube

A product by

Check out our other products