Export your website

Transform your local Website into a production-ready static website that works anywhere.

Export Your Website

Once you've added all your content, it's time to share it with the world!

The export feature transforms your folder contents into a production-ready static website that loads lightning-fast and works on most hosting platforms.

Here's how to do it:

If'you're running 4567 in your terminal, stop the server by pressing Ctrl + C.

Then run it again, but this time select "Export website" option from the menu.

When you select "Export website", 4567 will launch and show the folder picker again. Choose the same Website folder you used before, browse for a new one, or go back.

📦 Select Folder to Export
   Choose which website folder to export:

📋 Recent Locations:
   1) my-Website /Users/username/Projects/my-Website
   2) client-work /Users/username/Desktop/client-work

   3) Browse for folder... (opens native file picker)
   4) Use current directory
   5) Clear recent locations
   6) Exit / Cancel

That's it! 4567 will automatically generate a complete static website.

What gets generated?

When you run the export command, 4567 creates a complete, self-contained website:

Complete Site Structure 🏠

• Homepage with all your projects and navigation
• Individual project pages for each folder
• Category pages for filtering (web-design/, branding/, etc.)
• Tag pages for all your project tags
• Year pages for chronological browsing
• About page with your information
• Static assets (CSS, JS, images)
• Project metadata (descriptions, categories, years)
• External links
• Featured project sections
• Filtering and navigation

SEO & Performance

• sitemap.xml - Helps search engines index your site
• robots.txt - Controls search engine crawling
• Optimized HTML - Clean, semantic markup
• Relative paths - Works from any subdomain or folder

All Visual Features

• Responsive layout - Beautiful on all devices
• Custom colors - Per-project color schemes preserved
• Typography - Beautiful, readable text hierarchy
• Professional presentation - Clean, simple design

Preserved folder 📂 structure

Your original folder organization is maintained:

export/
├── index.html                    # Homepage
├── about/index.html              # About page
├── project/
│   ├── my-web-design/index.html  # Individual projects
│   └── mobile-app/index.html
├── category/
│   ├── web-design/index.html     # Category filtering
│   └── branding/index.html
├── tag/
│   ├── e-commerce/index.html     # Tag filtering
│   └── responsive/index.html
├── year/
│   └── 2024/index.html           # Year filtering
└── static/                       # All assets
    ├── css/
    ├── js/
    └── images/

Image Processing 🖼️

• Automatic thumbnails - Generated for gallery views
• Multiple formats - Supports JPG, PNG, GIF, WebP, SVG
• Optimized delivery - Right-sized for different contexts
• Preserved originals - Full-resolution images available

Working Navigation 🔗

• Internal links - All Website navigation functional
• External links - Direct links to live projects preserved
• Category filtering - Browse by project type
• Tag browsing - Find projects by keywords
• Chronological sorting - Projects organized by year

Analytics Ready 📊

• Clean URLs - SEO-friendly paths (/project/my-website/)
• Meta tags - Proper page titles and descriptions
• Structured data - Ready for rich search results
• Performance optimized - Fast loading scores

Where can you host the exported website?

The exported files work basically anywhere that can serve static HTML files.
Here are some popular options:

Free Hosting Options

• Netlify - Drag & drop deployment, custom domains
• Render - Simple static site hosting
• Cloudflare Pages - Global CDN, free SSL
• Vercel - GitHub integration, instant previews
• GitHub Pages - Free hosting with GitHub account
• GitLab Pages - Similar to GitHub, with GitLab
• Firebase Hosting - Google's platform, CDN included

Professional Hosting

• User your own web server - Upload via FTP/SFTP
• Cloud platforms - AWS S3, Google Cloud Storage
• CDN services - Cloudflare, AWS CloudFront
• Shared hosting - Any provider that serves HTML files

Why static is better? 🚀

• Lightning fast - No server processing required
• Ultra reliable - No databases to break
• Cost effective - Many hosts offer free static hosting
• Secure - No server-side vulnerabilities
• Scalable - Handles traffic spikes effortlessly

Tips for a smooth export process

Before You Export

• Test locally first - Make sure everything looks perfect
• Check all links - Verify external links are working
• Review content - Ensure all project descriptions are complete
• Optimize images - Large files will slow down your site

Performance Optimization

• Use modern formats - WebP images load faster than JPEG
• Reasonable file sizes - Keep images under 1MB when possible
• Clean folder names - Use hyphens instead of spaces
• Test on mobile - Ensure responsive design works perfectly

Updating Your Site

1. Make changes to your local Website
2. Run export command again
3. Upload new files to replace old ones
4. Changes are live immediately

Mobile Optimization

• Responsive design - Works perfectly on all devices
• Touch-friendly - Easy navigation on phones/tablets
• Fast loading - Optimized for slower mobile connections
• App-like experience - Progressive web app features included

Why export is powerful?

🚀 No Vendor Lock-in - Your files, your site, your control
⚡ Lightning Performance - Static files load instantly
💰 Cost Effective - Host for free on many platforms
🔒 Ultra Secure - No server-side code to exploit
🌍 Works Everywhere - Any server that serves HTML
📈 SEO Optimized - Search engines love static sites

Troubleshooting

Export folder is empty?

• Make sure you have projects with content in your source folder
• Check that project.md files are properly formatted
• Verify the folder picker selected the correct directory

Images not showing?

• Verify image files are in project folders
• Check that file extensions are supported (jpg, png, gif, webp, svg)
• Ensure folder permissions allow 4567 to read files

Links not working?

• Ensure external links in project.md use proper URLs (https://)
• Check that internal navigation uses relative paths
• Test links in local version before exporting

Site looks different than local?

• Clear browser cache and reload
• Verify all CSS and asset files were copied correctly
• Check that export completed without errors