IPFS Dedicated Gateways: Hosting a Static Website

Learn how to use an IPFS dedicated gateway to host a static website.

Filebase IPFS dedicated gateways can be configured to serve a single IPFS CID at the root of the gateway. This means that instead of needing to specify the IPFS CID in the gateway URL, by default the URL will host the configured CID.

For example, when using an IPFS gateway, the format typically follows:

When using a dedicated gateway with a root CID, the path and CID fields are not required to return the root CID. A dedicated gateway through Filebase will use the following domain structure:

https://gatewayname.myfilebase.com

If a root CID is set, this single URL can be shared to distribute the stored CID’s content.

1. Start by creating a new folder called ‘My Website’ and create the file index.html.

This file is a basic HTML file to serve as the homepage of your website. Change and edit this file to reflect your website’s content, and style it accordingly. To learn more about HTML and CSS styling, see here.

<!DOCTYPE html>
<html>
<head>
<title>A Static Site Hosted on the Decentralized Web</title>
</head>
<body style="background-color:black;">
<h1 align="center" style="color:white;"> A Static Site Hosted on the Decentralized Web</h1>
<p style="color:orange;" align="center">
A website hosted on IPFS through Filebase, using a Filebase dedicated IPFS gateway.
<a href = "https://filebase.com">
<img src="./image1.png" width="300px" >
</a>
</p>
<ul align="center">
<li>
<li>
<table border align="center">
<tr> <th style="color:teal;">IPFS</th> <th style="color:green;">Sia</th>
</tr>
<tr><td> <img src="./image2.png" width="400px" > </td> <td> <img src="./image3.png" width="400px"></td></tr>
</table>
</body>
</html>

2. This example uses 3 image files, so we’ll save those in the same folder that our index.html file is saved in.

Any files you want to be used with your website, such as image files or script files, save in this folder.

Currently, the directory should look like this:

  • My Website

    • index.html

    • image1.png

    • image2.png

    • image3.png

3. Then, navigate to the Filebase Web Dashboard. Create a new bucket on the IPFS network.

4. Select your bucket, then select ‘Upload’ > ‘Folder’.

5. Select your website’s folder that contains your index.html file and any other website assets and upload it to your bucket.

6. Next, navigate to the Gateways page on the Filebase web console.

Filebase IPFS Dedicated Gateways are a feature only available to paid users. They are not available for users on the free tier.

7. Select the ‘Create Gateway’ button in the upper right corner.

8. A new window will open prompting you to provide a gateway name and select the gateway’s access level.

Gateway names are subject to the same naming restrictions as bucket names. All gateway names must be lowercase, between 3-63 characters, and must be unique.

9. Select ‘Public’, then select ‘Create Gateway’.

10. Next, click on the ‘Buckets’ option from the menu to open the Buckets dashboard.

11. Select your IPFS Bucket that you uploaded your website folder to.

12. Select the additional options menu for the folder.

13. Select ‘Set as Root’ from the list of options.

14. Then select the dedicated gateway you created earlier, then select ‘Set as Root Gateway’.

15. Now, when you open your dedicated gateway, your website will be viewable without needing to specify the folder’s IPFS CID in the URL:

If you have any questions, please join our Discord server, or send us an email at hello@filebase.com

Last updated