Using source code for custom pages

When creating custom pages on Fermion, you have the flexibility to upload and host your own static websites directly from source code.

This powerful feature allows you to deploy custom-built web applications, landing pages, or any other web content you've developed using modern web technologies.

This guide will walk you through the process of uploading your static website to Fermion, explain how assets are handled, and provide best practices for successful deployment.

What are static websites?

A static website consists of HTML, CSS, JavaScript, and other assets that are pre-built and ready to serve to users. Unlike dynamic websites that generate content on-the-fly, static websites are pre-rendered, making them fast, secure, and easy to deploy.

Supported technologies

Fermion can support any technology that can create a static export after building. This includes, but not limited to:

• Raw HTML/CSS/JS projects
• Next.js
• Remix
• React, Astro, etc. with Vite

Asset hosting (CSS, JS, and other assets)

Fermion automatically hosts all static assets that are included in your build output, including:

• CSS files
• JavaScript files
• Images
• Fonts
• Other media files (videos, audio, etc.)

When you upload your ZIP file containing the build output, we automatically:

• Extract all assets from the ZIP file
• Upload them to our CDN (content delivery network)
• Make them available through your unique CDN prefix URL

INFO

• All assets must be included in your build output folder before zipping

• Make sure your assets are properly optimized before building (compressed images, minified CSS/JS)

How do custom webpages on Fermion work?

To understand that, check the image below:

• You must upload one zip file of static export (this can be either raw HTML/CSS code, or generated by CLI commands like next export for example if you're using Next.js)

• All the HTML files you have in the zip file would automatically become pages on your website. For example, let's assume you have a domain called myawesomewebsite.com and you upload the ZIP file as shown above. Then you would have the following pages as custom pages:

  • myawesomewebsite.com homepage would be index.html
  • myawesomewebsite.com/welcome-to-my-page would be welcome-to-my-page.html (notice no .html at the end of the page)
  • myawesomewebsite.com/hello/world.html would be hello/world.html (notice no .html at the end of the page)

What about static assets?

The static assets in this case (style.css and my-dog.mp4) would be hosted on a CDN instead of directly on your main domain (myawesomewebsite.com). This ensures less load on main host and faster website load times.

This means that instead of myawesomewebsite.com/style.css for loading the stylesheet, you would load it from anotherdomain-cdnurl.com/.../style.css. This other URL that you have to prefix will be provided to you based on the technology you use.

Is it not a lot of manual work to replace CDN URL in my code for static assets?

Most modern frameworks like Next.js and Vite provide out of the box support for third party CDNs for static hosting at build time. All you have to do is follow the instructions as given below and it should work fine.

But yes, if you're hosting a custom HTML/CSS/JS build without any bundler, you must manually replace the links yourself.

How can you upload a custom page?

Follow the steps below to understand how source-code hosting works on Fermion.

Step 1

From your dashboard, navigate to Pages & redirects.

Step 2

Click on Custom pages and go to the Manage Fermion section

Step 3

Choose from available technologies

When building your static website on Fermion, you can choose from several modern web technologies. For simpler projects or custom implementations, you can use plain HTML/CSS/JavaScript.

INFO

All these technologies will be properly hosted on Fermion with full asset support (CSS, JavaScript, images, etc.) through our CDN.

For example: I'll be demonstrating the process by uploading a basic HTML website. So I will choose the custom HTML website option. Similarly, based on your requirements you can choose from available options of technologies.

Step 4

Click on one of the technologies you want to use (in this case it is custom HTML website)

INFO

Please note that this step is merely for demonstration purpose. It is not mandatory to choose the custom HTML website option. Please choose the option which suits the best for your needs.

Once you have clicked on the option, you will see further instructions and details for deploying your website project. Note that these instructions are different for every technology.

Step 5

Prepare for the upload. Create a ZIP file containing your website files. All static assets (HTML, CSS, JavaScript, images) should be included in this ZIP file.

Step 6

Upload your website by clicking the "Upload website ZIP file" button. The system will process your ZIP file and deploy it to the CDN.

Step 7

Configure your static assets to use the CDN prefix URL. There are two ways to do this:

• Update your base href tag in your HTML: <base href="https://custom-webpage-static-assets-production.fermion.app/66467a43e44cda2c9f7ab7a9-custom-zip-pages/">

• Or prefix all your static asset URLs with the CDN URL:

  • Before: ./my-script.js
  • After: https://custom-webpage-static-assets-production.fermion.app/66467a43e44cda2c9f7ab7a9-custom-zip-pages/my-script.js

Step 8

Once uploaded and configured, your page will be published and accessible. You can verify this by checking the status which should show as "Published" in the pages list.