Deployment

Quick Check

Ready to deploy?

Does it work on desktop?
Does it work on mobile?
Are images loading?
Are links working?
Are file paths correct?
                    

Before You Deploy

Check:
- all files linked correctly
- no console errors
- images loading
- no broken links
- layout works on different screen sizes
                    

Project structure:

/project
  index.html
  /css
  /images
                    

Using GitHub

1. Create repository
2. Upload files
3. Commit changes
4. Push to GitHub

Terminal flow:

pwd
git init
git status
git add .
git commit -m "Initial commit"
git remote add origin ...
git branch -M main
git push -u origin main
                    

Common mistake:
files not in root folder

Fix:
index.html must be at the top level
                    

Hosting (GitHub Pages)

Hosting (GitHub Pages)

1. Go to repository settings
2. Find Pages section
3. Select branch (main)
4. Save

Result:
Your site gets a public URL
                    

Deploying to Render

Render connects to your GitHub repo and deploys automatically
every time you push.

Push to GitHub → Render detects the change → rebuilds and redeploys
                    

Setup steps:

1. Go to render.com and sign in with GitHub
2. Click "New" → choose service type
   Static Site  → HTML/CSS/JS only
   Web Service  → Node / Express / full-stack
3. Connect your GitHub repo
4. IMPORTANT: Set region to Frankfurt (EU)
   → required for GDPR / data protection
   → do not leave it on the US default
5. Set build command and start command if needed
6. Click Deploy
                    

Region setting:
→ choose Frankfurt (EU) not Oregon (US)
→ this is for GDPR / data protection compliance
→ set this before first deploy — changing it later requires a new service
                    

After setup — everyday workflow:

git add .
git commit -m "your message"
git push

Render picks it up automatically.
No manual redeploy needed.
                    

Common gotchas:

Free tier spins down after inactivity
→ first load after a while may take 30-60 seconds
→ this is normal on the free plan

Build failing?
→ check the Render build log
→ usually a missing file, wrong command, or env variable

Site not updating?
→ check the deploy tab in Render
→ check the push actually went to GitHub first

Environment variables (API keys, secrets):
→ never put these in your code
→ add them in Render → Environment tab
                    

After Deployment

Check live site:

- images working?
- links working?
- layout correct?
- mobile working?
                    

If something breaks:
usually file path issue
                    

Fast Reminders

If site is broken:
→ check file paths

If images missing:
→ check folder structure

If CSS not loading:
→ check link path

If page not found:
→ check index.html location

If everything worked locally:
→ deployment issue = path issue 90% of the time
                    

Folder behaviour:

index.html in root = main site page

folder/index.html = accessible via:
/folder/

Example:
If your project is inside /embedding/
→ visit /embedding/ to see it live