🧩 1. Install All Required Tools

Before deploying to Vercel, you need three tools:

✔ 1.1 Install Git

Git is the tool used to upload your project to GitHub, so Vercel can deploy it.

Download Git

👉 https://git-scm.com/downloads

Choose your operating system and install.

During installation:

• Keep all default settings
• Click Next → Next → Install
• Done!

Check Git installation

Open Terminal (Mac) or Command Prompt (Windows):

git --version

If you see a version number → Git is installed.

🛠️ 2. Create a Git Repository (Step-by-Step)

Step 1 — Create a GitHub repository

Go to: 👉 https://github.com/new

• Name: flexiblog
• Visibility: Private
• DO NOT add README or .gitignore

Step 2 — Connect local Git to GitHub

Copy the repo URL and run:

git init
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
git commit -m "Initial FlexiBlog setup"
git add .
git push -u origin master

Your FlexiBlog theme is now on GitHub.

🚀 3. Deploy to Vercel (Step-by-Step)

Step 1 — Log in to Vercel

👉 https://vercel.com

Log in with GitHub.

Step 2 — Click “Add New Project”

Vercel will automatically show all your GitHub repositories.

Step 3 — Select your FlexiBlog repository

Vercel imports the repo.

⚙️ 4. Configure Build Settings for FlexiBlog

You MUST update these settings because FlexiBlog is inside a /site folder.

BASE DIRECTORY

/

BUILD COMMAND

cd site && npm run build

OUTPUT DIRECTORY

site/public

🔐 5. Add Environment Variables

Go to:

Vercel → Project → Settings → Environment Variables

Copy everything from:

site/.env

Also add this required variable:

GATSBY_CPU_COUNT=2

Click Save.

Then:

👉 Click Deploy or Redeploy.

🔄 7. Auto-Deploy on Every Git Push

Any time you update your site:

git add .
git commit -m "Update homepage"
git push

Vercel will rebuild and publish.