> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fermion.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Using Source Code

> Learn how to create fully customized pages by adding source code directly for complete control over design and functionality

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

<Tip>
  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).
</Tip>

## How do custom webpages on Fermion work?

To understand that, check the image below:

![](https://codedamn-website-assets.s3.us-east-1.amazonaws.com/uploads/24-11-2024/screenshot-000112%402x.lzitrw.png)

* 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.

<Steps>
  <Step title=" Navigate to Pages & redirects">
    From your dashboard, navigate to `Pages & redirects`.

    ![](https://codedamn-website-assets.s3.us-east-1.amazonaws.com/uploads/24-11-2024/32%402x.zmznlx.png)
  </Step>

  <Step title="Access Custom Pages">
    Click on `Custom pages` and go to the `Manage Fermion` section.

    ![](https://codedamn-website-assets.s3.us-east-1.amazonaws.com/uploads/24-11-2024/58%402x.pmticb.png)
  </Step>

  <Step title="Choose your technology">
    Choose from available technologies.

    ![](https://codedamn-website-assets.s3.us-east-1.amazonaws.com/uploads/24-11-2024/33%402x.kxgjgj.png)

    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.
    </Info>

    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.

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

    ![](https://codedamn-website-assets.s3.us-east-1.amazonaws.com/uploads/24-11-2024/08%402x.wvlfvk.png)

    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.

    ![](https://codedamn-website-assets.s3.us-east-1.amazonaws.com/uploads/24-11-2024/20%E2%80%AFPM.svvcxj.png)
  </Step>

  <Step title="Prepare your ZIP file">
    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>

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

    ![](https://codedamn-website-assets.s3.us-east-1.amazonaws.com/uploads/24-11-2024/58%402x.eiirbe.png)

    <Warning>
      Fermion does **not** store your ZIP files. Once uploaded, your ZIP is **flattened and hosted alongside your school's assets**. This means it is difficult to recover old code after uploading. Make sure you retain a local copy of your files before deployment.
    </Warning>
  </Step>

  <Step title=" Configure static assets">
    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](https://custom-webpage-static-assets-production.fermion.app/66467a43e44cda2c9f7ab7a9-custom-zip-pages/my-script.js)
  </Step>

  <Step title="Verify publication">
    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.

    ![](https://codedamn-website-assets.s3.us-east-1.amazonaws.com/uploads/24-11-2024/59%402x.pldzlh.png)
  </Step>
</Steps>
