SkyArtShop/docs/WORKFLOW.md

# Website File Management Workflow

## 📁 Directory Structure

```
/media/pts/Website/SkyArtShop/          ← Your git repository (EDIT HERE)
├── website/
│   ├── public/          ← Public website files (shop.html, home.html, etc.)
│   ├── admin/           ← Admin panel files
│   └── assets/          ← CSS, JS, images
├── backend/             ← Node.js backend server
├── deploy-website.sh    ← Deployment script
└── local-commit.sh      ← Git commit helper

/var/www/skyartshop/                    ← Live website (DEPLOYED TO)
├── public/
├── admin/
└── assets/
```

## ✅ How to Edit Website Files

### 1. Edit files in the git repository

```bash
cd /media/pts/Website/SkyArtShop/website/
```

Open any file:

- `website/public/shop.html`
- `website/public/home.html`
- `website/admin/dashboard.html`
- `website/assets/css/main.css`
- etc.

### 2. Deploy your changes

```bash
cd /media/pts/Website/SkyArtShop
./deploy-website.sh
```

This will copy your files to `/var/www/skyartshop/` and make them live!

### 3. Commit your changes to git

```bash
./local-commit.sh
# Or manually:
git add .
git commit -m "Updated shop page"
```

## 🚀 Quick Workflow Example

```bash
# 1. Navigate to repository
cd /media/pts/Website/SkyArtShop

# 2. Edit a file (use VS Code or any editor)
code website/public/shop.html

# 3. Deploy the changes
./deploy-website.sh

# 4. Test in browser
# Visit: https://skyarts.ddns.net

# 5. If it looks good, commit
./local-commit.sh
```

## 📝 Important Rules

✅ **DO:**

- Edit files in `/media/pts/Website/SkyArtShop/website/`
- Run `./deploy-website.sh` after making changes
- Commit your work regularly with `./local-commit.sh`

❌ **DON'T:**

- Edit files directly in `/var/www/skyartshop/` (they'll be overwritten on next deploy)
- Forget to deploy after editing
- Forget to commit your changes

## 🔄 Deployment Script Details

**What it does:**

1. Copies files from `website/` → `/var/www/skyartshop/`
2. Sets proper permissions
3. Keeps your changes safe in git

**When to run it:**

- After editing any HTML, CSS, or JS files
- When you want to see your changes live
- Before committing (to ensure everything works)

## 💡 Tips

- **Always work in**: `/media/pts/Website/SkyArtShop/website/`
- **VS Code workspace**: Open `/media/pts/Website/SkyArtShop/` as your workspace
- **Test locally**: Make changes → Deploy → Test → Commit
- **Version control**: All changes are tracked in git (locally only, no GitHub sync)

## 🆘 If You Get File Save Errors in VS Code

If VS Code shows "Unable to save" or asks to overwrite:

1. **Close the file** without saving
2. **Open the file from the correct location**: `/media/pts/Website/SkyArtShop/website/public/shop.html`
3. Make your edits
4. Save normally
5. Run `./deploy-website.sh` to push to live site

## 📍 Current Setup

- **Git Repository**: `/media/pts/Website/SkyArtShop/` (branch: pts/updateweb)
- **Live Website**: `/var/www/skyartshop/`
- **Backend Server**: Running on port 5000 (managed by PM2)
- **Website URL**: <https://skyarts.ddns.net>
- **Admin URL**: <https://skyarts.ddns.net/admin>

---

**Remember:** Edit in git repo → Deploy → Test → Commit