Setting Up CI/CD with CPANEL and FTP 🎉
🎯 Motivation
So, I was living the dream with Vercel and Heroku—no workflows, no manual uploads, just push and BOOM! Deployment done. 🎩✨ But now, working on a real project, things got... less fun.
Here in Ethiopia, shared cPanel hosting is the go-to, and let me tell you—zipping, uploading, unzipping, deleting old files—it's like a gym workout for your patience. 😩💪
But wait! There’s FTP, and it can handle half the work for us. So the big question is: HOW?! 🤔
🛠 Step 1: Create a Workflow File
First, inside your project, create a .github/workflows folder. This is where your GitHub Actions workflow will live. 🏡📂
Now, create a file with a .yml extension. Make it descriptive—mine is deploy.yml. ✅
📜 Step 2: Write the Workflow Config
Here’s a sample GitHub Actions workflow to deploy a React app with FTP:
name: 🚀 Build and Deploy React App
on:
push:
branches:
- main # Deploy on push to the main branch
jobs:
build:
name: 🏗 Build React App
runs-on: ubuntu-latest
steps:
- name: 📥 Checkout Code
uses: actions/checkout@v3
- name: 🛠 Set up Node.js
uses: actions/setup-node@v3
with:
node-version: 18 # Adjust Node.js version as needed
- name: 📦 Install Dependencies
run: npm install
- name: 🔨 Build React App
run: npm run build
- name: 📤 Deploy to FTP
uses: SamKirkland/FTP-Deploy-Action@4.1.0
with:
server: $` secrets`.`FTP_SERVER `
username: $` secrets`.`FTP_USER `
password: $` secrets`.`FTP_PASS `
local-dir: dist/
exclude: |
**/*.map # Exclude source maps
**/node_modules/** # Exclude node_modules
**/.git/** # Exclude git files
📝 Notes: This config is for React Vite, but with small tweaks, it can work for other projects too! 🚀
🔑 Step 3: Setting Up GitHub Secrets
Go to your GitHub repo.
Click Settings ⚙️ (top-right corner).
Navigate to Secrets and Variables ➝ Actions.
Click New repository secret.
Add the following secrets:
FTP_SERVER ➝ Your FTP server address 🖥
FTP_USER ➝ Your FTP username 👤
FTP_PASS ➝ Your FTP password 🔑
🎉 Step 4: Push and Deploy!
Once everything is set up, push your code to GitHub, and BAM! 💥 Your site should be deployed automatically. No more manual uploads! 🥳
🚀 Enjoy hands-free deployments, even with cPanel! 🚀
If there is anything missed comment down below and with questions or improvement suggestrions
🍾 Happy Coding
🎯 Motivation
So, I was living the dream with Vercel and Heroku—no workflows, no manual uploads, just push and BOOM! Deployment done. 🎩✨ But now, working on a real project, things got... less fun.
Here in Ethiopia, shared cPanel hosting is the go-to, and let me tell you—zipping, uploading, unzipping, deleting old files—it's like a gym workout for your patience. 😩💪
But wait! There’s FTP, and it can handle half the work for us. So the big question is: HOW?! 🤔
🛠 Step 1: Create a Workflow File
First, inside your project, create a .github/workflows folder. This is where your GitHub Actions workflow will live. 🏡📂
Now, create a file with a .yml extension. Make it descriptive—mine is deploy.yml. ✅
📜 Step 2: Write the Workflow Config
Here’s a sample GitHub Actions workflow to deploy a React app with FTP:
name: 🚀 Build and Deploy React App
on:
push:
branches:
- main # Deploy on push to the main branch
jobs:
build:
name: 🏗 Build React App
runs-on: ubuntu-latest
steps:
- name: 📥 Checkout Code
uses: actions/checkout@v3
- name: 🛠 Set up Node.js
uses: actions/setup-node@v3
with:
node-version: 18 # Adjust Node.js version as needed
- name: 📦 Install Dependencies
run: npm install
- name: 🔨 Build React App
run: npm run build
- name: 📤 Deploy to FTP
uses: SamKirkland/FTP-Deploy-Action@4.1.0
with:
server: $` secrets`.`FTP_SERVER `
username: $` secrets`.`FTP_USER `
password: $` secrets`.`FTP_PASS `
local-dir: dist/
exclude: |
**/*.map # Exclude source maps
**/node_modules/** # Exclude node_modules
**/.git/** # Exclude git files
📝 Notes: This config is for React Vite, but with small tweaks, it can work for other projects too! 🚀
🔑 Step 3: Setting Up GitHub Secrets
Go to your GitHub repo.
Click Settings ⚙️ (top-right corner).
Navigate to Secrets and Variables ➝ Actions.
Click New repository secret.
Add the following secrets:
FTP_SERVER ➝ Your FTP server address 🖥
FTP_USER ➝ Your FTP username 👤
FTP_PASS ➝ Your FTP password 🔑
🎉 Step 4: Push and Deploy!
Once everything is set up, push your code to GitHub, and BAM! 💥 Your site should be deployed automatically. No more manual uploads! 🥳
🚀 Enjoy hands-free deployments, even with cPanel! 🚀
If there is anything missed comment down below and with questions or improvement suggestrions
🍾 Happy Coding