Many of our users take advantage of free static hosting services like Netlify, Vercel, or GitHub Pages to host their digital gifts or small interactive portfolios created from the codes they download at JCode.
At first glance, uploading an HTML folder to Netlify is a "drag and drop" process, but to get the best results and avoid the dreaded white screen of death (or 404 errors on images and sound), it is crucial to understand certain optimizations.
The Path Dilemma: Absolute vs Relative
One of the most common mistakes we see in our support team occurs when a user downloads a template, edits it, and upon uploading it, notices that the music doesn't play or the background images disappeared. 99% of the time, this is due to file path issues.
An absolute path in HTML looks like this: src="/assets/image.jpg". That starting slash / tells the browser to look for the file in the root of the main domain. If you upload your project to a subfolder or if Netlify assigns you a preview link with complex structures, the browser will get lost.
A relative path looks like this: src="assets/image.jpg" or src="./assets/image.jpg". This instructs the browser to look for the "assets" folder in the exact same directory where the current HTML file is located.
The JCode Update
In our latest update, we have internally adjusted all our downloads so they use strictly relative paths. This ensures that, regardless of whether you host your site in the root directory (e.g., your-name.netlify.app) or in a subfolder of your personal hosting (e.g., your-domain.com/gifts/flowers), the image, music, and CSS files will always load correctly without manual intervention on your part.
"A successful deployment is not just about uploading code; it's about preparing the project's architecture to survive any environment, regardless of the URL prefix."
Popular Free Deployment Options
- Netlify: Excellent drag-and-drop interface. Ideal for beginners who just want to upload their HTML/CSS/JS folder.
- Vercel: Performance-oriented. Perfect if you are evolving towards modern frameworks like Next.js or React.
- GitHub Pages: The most "developer-friendly" option, built directly from your code repository.
Redirects and SPAs
If your downloaded project is a small Single Page Application (SPA) that uses Javascript for internal routing (like the advanced portfolio templates we offer), you need to configure Netlify to redirect all requests to `index.html`. Otherwise, if someone reloads the page, they will see a 404 error.
/* /index.html 200
This small configuration file solves 100% of routing problems on Netlify for React, Vue, or pure Vanilla Javascript SPAs, like ours.