Overview
Deploy your LiveCodes projects as standalone websites hosted on GitHub Pages for free. Your project becomes a public website accessible at:
https://username.github.io/repo-name/
Quick Deploy
Sign in with GitHub
Click Menu → Sign in and authorize LiveCodes
Open Deploy
Click Menu → Deploy → Deploy to GitHub Pages
Configure
- Enter repository name
- Choose to include source files (optional)
- Decide between single HTML file or separate files
Deploy
Click Deploy and wait for the process to complete
Visit Site
Your site is live at https://username.github.io/repo-name/
Deployment creates a new repository with a gh-pages branch. GitHub Actions automatically publishes your site.
Deploy Options
Repository Settings
New Repository
Existing Repository
Creates a new public repository:Repository name: my-awesome-project
Branch: gh-pages
Visibility: Public
Deploys to existing repo:
- Updates
gh-pages branch
- Overwrites previous deployment
- Preserves repository settings
Deploying to an existing repository will overwrite all files in the gh-pages branch.
File Structure Options
Single HTML File:
repo/
└── index.html (all code embedded)
repo/
├── index.html
├── style.css
└── script.js
repo/
├── index.html
├── style.css
├── script.js
└── src/
├── index.html
├── style.scss
├── script.ts
└── livecodes.json
Include source files if you want others to:
- View your original code
- Import your project back into LiveCodes
- Contribute to your project
What Gets Deployed
Compiled Output
- HTML: Compiled markup (e.g., Pug → HTML)
- CSS: Compiled styles (e.g., SCSS → CSS)
- JavaScript: Compiled scripts (e.g., TypeScript → JavaScript)
- External resources: Linked stylesheets and scripts
Source Files (Optional)
- Original markup, style, and script files
livecodes.json configuration- README with project info and LiveCodes link
Generated Files
- README.md: Auto-generated with project description
- .gitignore: Standard web project ignore file
- LICENSE: Optional license file
Deployment Process
Compile Code
LiveCodes compiles all your code to vanilla HTML/CSS/JS
Create Repository
A new public repository is created on GitHub (if new)
Commit Files
All files are committed to the gh-pages branch
Enable GitHub Pages
GitHub Pages is automatically enabled for the gh-pages branch
Build & Deploy
GitHub Actions builds and publishes your site (takes 1-2 minutes)
Repository Structure
Created repository includes:
# My Awesome Project
Deployed from [LiveCodes](https://livecodes.io)
## Description
Your project description here.
## Links
- [Live Demo](https://username.github.io/repo-name/)
- [Source Code](https://github.com/username/repo-name/tree/gh-pages/src)
- [Edit in LiveCodes](https://livecodes.io/?x=project-id)
## Technologies
- HTML
- CSS
- JavaScript
Custom Domains
Add a custom domain to your deployed site:
Configure DNS
Point your domain to GitHub Pages:CNAME: username.github.io
Add CNAME File
In your repository, create CNAME file: Enable HTTPS
GitHub automatically provides SSL certificates
Redeployment
Update your deployed site:
Make Changes
Update your code in LiveCodes
Deploy Again
Use the same repository name when deploying
Confirm Overwrite
Confirm you want to update the existing deployment
Changes typically appear within 1-2 minutes after deployment.
Deploy Single Assets
Deploy individual files (images, data files) to an existing repo:
import { createPlayground } from 'livecodes';
const playground = await createPlayground('#container');
// Deploy a single file
const result = await playground.exec('deployFile', {
file: {
path: 'data.json',
content: JSON.stringify({ foo: 'bar' })
},
repo: 'my-assets',
branch: 'gh-pages',
message: 'Add data file'
});
console.log(result.url); // File URL
Limitations
- Repositories are public (GitHub Pages requirement for free accounts)
- 1 GB repository size limit
- 100 GB bandwidth per month
- 10 builds per hour
Troubleshooting
Site not loading after deployment
- Wait 1-2 minutes for GitHub to build and publish
- Check repository settings → Pages section
- Verify
gh-pages branch exists
- Check browser console for errors
Resources not loading (404 errors)
- Ensure external resources use absolute URLs
- Check that CDN links are accessible
- Verify image paths are correct
Code not running as expected
- Test in LiveCodes before deploying
- Check browser console for errors
- Verify all dependencies are included
Best Practices
Test First
Thoroughly test your project in LiveCodes before deploying
Add Description
Set a clear title and description for your project
Include Source
Enable “Include source files” for transparency
Use Meaningful Names
Choose descriptive repository names
- Export - Export as files
- Share - Share project URLs
- Assets - Manage project assets
- Import - Import from GitHub and other sources