Requirements

Make sure git and npm correctly works or install them if you haven't.

 

Start up Shifter Headless WordPress

1. Login to Shifter Headless dashboard

https://go.getshifter.io/admin/headless/

2. Start Headless WordPress

For more details, checkout support document: Start up Shifter Headless WordPress
https://support.getshifter.io/en/articles/3981108

 

Connecting Vercel

3. Sign up to Vercel

https://vercel.com/ 

4. Choose your favourite Git service or sign up with e-mail.

5. Click [Authorize New by Vercel (formerly ZEIT)] button (if you choose Git service)

6. Sign up completed

 

Set up Frontity sample site

7. Git clone our sample repository to local and dive into it

$ git clone git@github.com:getshifter/example-frontity-wordpress.git 
$ cd example-frontity-wordpress

8. Modify frontity.settings.js

Open frontity.settings.js with your favourite editor
or with vi.

$ vi frontity.settings.js

Then rewrite URL around line 5, from

"frontity": {
"url": "https://test.frontity.io",

to

"frontity": {
"url": "https://YOUR-SHIFTER-HEADLESS-URL",

Also, around line 44

"source": {
"api": "https://b5d85ac952f05c2bcb7e0b42979eff431beac2f1.hl-a.getshifter.co/wp-json"
}

to

"source": {
"api": "https://YOUR-SHIFTER-HEADLESS-URL/wp-json"
}

Double check and save changes.

Additionally, you can change menu from

"menu": [
[
"Home",
"/"
],
[
"Edge Case Category",
"/category/edge-case-2/"
],

to

"menu": [
[
"Home",
"/"
],
[
"Menu Item #1",
"menu-item-1"
],

or anything else.
Never forget save changes.
 

Start local server

9. Install additional for the project

$ npm install

10. Run below command to start local server

$ npm run dev

npm returns below

SERVER STARTED -- Listening @ http://localhost:3000
- mode: development
- target: module

and http://localhost:3000 will be opened up with your web browser.

11. Check how your web site works

12. Pushing [Control] key and [C] key to stop server.

 

Build website and deploy

13. Build website

$ npm run build

It may take a while.

14. Login to Vercel (now.sh)

$ npx now login

Now CLI 18.0.0
Enter your email: YOUR-EMILADDRESS

We sent an email to YOUR-EMILADDRESS. Please follow the steps provided inside it and make sure the security code matches Kind Lion.

✔ Email confirmed
Congratulations! You are now logged in. In order to deploy something, run `now`.
💡 Connect your Git Repositories to deploy every branch push automatically (https://zeit.ink/1X).

15. Deploy build website to Vercel (now.sh)

$ npx now --prod

Now CLI 18.0.0
? Set up and deploy “example-frontity-wordpress”? [Y/n] y
? Which scope do you want to deploy to? NAME-OF-SCOPE
? Link to existing project? [y/N] n
? What’s your project’s name? example-frontity-wordpress
? In which directory is your code located? ./
🔗 Linked to NAME-OF-SCOPE/example-frontity-wordpress (created .now)
🔍 Inspect: https://zeit.co/NAME-OF-SCOPE/example-frontity-wordpress/iij40if2b [5s]
✅ Production: https://example-frontity-wordpress.now.sh [copied to clipboard] [56s]


16. Open Production URL with web browser

That's all!

Did this answer your question?