# How to Host a Website on ethoFS

## Getting Started

{% hint style="info" %}
Please note that currently only HTML, CSS and JS work on ethoFS web hosting. Server side languages such as PHP are not yet supported.&#x20;
{% endhint %}

## Preparing the Website for Upload

{% hint style="info" %}
All data uploaded to ethoFS is immutable, as such any changes to your website after hosting will require another hosting contract to be created. It is not possible to update an existing contract.&#x20;
{% endhint %}

The screenshot below shows an example folder structure. A parent folder contains HTML files and images along with a sub-folder, containing images for a specific page of the website. (In this case team pictures for the ethoLABS website.) This demonstrates that it is possible to upload a folder structure to ethoFS.&#x20;

![ethoLABS website file structure.](/files/-LYE16C_kn4kgzbcmlbQ)

## Uploading Files to Immutable ethoFS Storage

* Open the browser of your choice and ensure you have unlocked your MetaMask Wallet. &#x20;
* Once you've unlocked MetaMask go to <https://uploads.ethoprotocol.com/>

You will be presented with a page which lists all of your active contracts and some ethoFS stats, scroll down to the **ethoFS Hosting Contracts** section:&#x20;

![ethoFS Hosting Contracts Section](/files/-LYE2kBv0S3rLsQQSIWW)

To start a new hosting contract, click on the green button named **New Hosting Contract**. You will then be presented with the contract setup system:

![ethoFS contract setup system](/files/-LYE3A9F4w7vC2Vvk0P5)

To upload your folder, click on the cloud icon. You will then need to upload the parent website folder, as shown in the screenshot below. (Do not upload the files individually, instead upload the complete folder.)

![](/files/-LYE3ePdh_UgRxFvI25F)

Following selection of the website folder, you will see the previously blank section of the window become populated with the contents of the website folder.  (This is a good opportunity to double check that all the files are present.)

![](/files/-LYE4PZV64ejkTkU35zw)

Then scroll down and enter a contract name. In this example  "ETHOLABS" was used.&#x20;

![ethoFS Contract Name](/files/-LYE4ZWbNedfdfa9-7kB)

You will now need to select the duration of the contract. On ethoFS the contract length is measured in blocks, so select the desired contract duration using the drop down menu, shown in the screenshot below. (In order to estimate the block time, you can multiply the block time by the number of blocks to determine an estimate for the duration of the hosting contract in seconds.)

![ethoFS Contract Duration](/files/-LYE4i36z9Y-ISy77hVH)

Then in the bottom corner you will be able to see how much $ETHO the hosting contract costs:

![ethoFS Contract Cost](/files/-LYE58qZ9d_DnrOvxA0m)

Then click confirm:

![](/files/-LYE5Dbr9TgvIadN4xyb)

A new screen should open - this is the MetaMask transaction approval screen which will look like this:

![](/files/-LYE6mx7gw6Uiohlr5kA)

Click submit and the MetaMask pop-up will close. A new pop-up will appear, showing the status of the payment:

![ethoFS transaction status](/files/-LYE6wcdx8rYiKtyxQBG)

Before the file upload begins, you will need to wait until the transaction is confirmed by the network. You will see a notification from the ETHO Mask Wallet, along with the ethoFS upload status pop-up.&#x20;

![ETHO Mask Confirmed Transaction](/files/-LYE7G5hu1n1Vc8iztQD)

![ethoFS file upload status window. ](/files/-LYE7_uJcV2KJbpFv1D5)

Once the ethoFS upload status reached 100%, your files have been uploaded to the ethoFS network. You will  be returned to the first screen listing your contracts:

![Don't worry about the contract name change - I did that due to a version issue](/files/-LYE7w41_rR_M8nhvZ4s)

Click on the contract, you will be greeted by another pop-up which contains the contract details this is very important, scroll down until you see this:&#x20;

![](/files/-LYE8I5dOBxeGnLXhHwm)

You need to copy the content hash to setup your TLD

## Setting up Your Domain DNS for ethoFS

Step 1: Head over your domain provider and login.

Step 2:  Setup your domain web address for the ethoFS hosted hash you just uploaded. In our case we want to create the subdomain: **goog.** We do this via a domain DNS CNAME record creation which points to: **dns.ethofs.com.** Make your CNAME Record the name of the subdomain you want, in the example it's **goog**.domainnamehere.com.

![CNAME record](/files/-La12IH09QGezCw_PQax)

Step 3: This is where you need the content hash. You're going to need to setup a TXT record called (note: .**goog** matches the subdomain name you chose for your CNAME record above):

```
_dnslink.goog
```

Then inside the TXT record you will need to enter this:

```
dnslink=/ipfs/YOUR_CONTENT_HASH_HERE
```

Once done it should look similar to this:

![TXT record](/files/-LaM0QSUlY35GXw7Sw9v)

Step 4: Visit your website!\
\
Please Note: Your website might not be available immediately as it can take a bit of time for DNS changes to propagate over the internet.

## Congratulations! You just setup your decentralized website on ethoFS!

{% hint style="info" %}
If you require any assistance in using ethoFS, please join our [discord](https://discord.gg/zKWkayA)!
{% endhint %}

{% hint style="info" %}
Due to the immutable (not able to be changed) nature of ethoFS, you need to upload a new version of the website every time you need to make a change, as well as update the txt DNS record.  It's recommended you test all changes locally and confirm everything is 100% working and the way you want it before uploading to ethoFS
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ethoprotocol.com/ethofs/how-to-host-a-website-on-ethofs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
