Homepage Filebase Dashboard Discord Blog

IPFS Dedicated Gateways: Hosting a Multipage Website

Learn how to use an IPFS dedicated gateway to host a multipage 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>
<h2 style="color:orange;" align="center"><a href="about.html">About this website</a></h2>
</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. Then, create a second file called about.html. Insert the following content:

<!DOCTYPE html>
<html>
<body style="background-color:black;">
<h1 align="center" style="color:white;"> A Static Site Hosted on the Decentralized Web</h1>
<head>
<meta charset="utf-8" />
<title>About | Sample Multipage Website</title>
<meta
name="description"
content="A sample multipage website."
/>
<meta name="author" content="The Filebase team." />
</head>
<body>
<h1 align="center" style="color:white;"> A sample multipage website.</h1>
<p align="center" style="color:white;"> This website is a sample multipage website hosted on IPFS using Filebase.
</p>
<h2><a href="index.html">Go back home</a></h2>
<footer>
<hr />
</footer>
</body>
</html>

3. This example also uses 3 image files, so we’ll save those in the same folder that our index.html and about.html files are 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

    • about.html

    • index.html

    • image1.png

    • image2.png

    • image3.png

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

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

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

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

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

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

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

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

12. Select the IPFS Bucket that you uploaded your website folder to.

13. Select the additional options menu for the folder.

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

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

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

17. When you click ‘About this website’, it’ll bring you to the about.html page.

If you click ‘Go back home’, you’ll return to the index.html page. From here, you can create as many pages as you’d like and customize them to fit your project!

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

PreviousIPFS Dedicated Gateways: Hosting an Image GalleryNextIPFS Dedicated Gateways: Hosting a Resume or Portfolio

Last updated