Uploading static websites

You can use Irys to upload entire static websites directly to the permaweb using only a few lines of code. You can use the uploadFolder() SDK function, or the upload-dir command with the CLI.

Maintaining link structure

When you upload an entire folder of assets to Irys at the same time, two link structures are generated. You can download each asset directly using the transaction ID generated when uploading that unique asset. You can also download each asset using a link generated by combining the manifest ID generated for the entire folder upload with the relative path to the file.

For example, if you upload a folder with the following structure:

index.html
styles.css
images/hero.jpg
images/logo.png

you can download the logo with the link https://gateway.irys.xyz/[manifest-id]/images/logo.png. Because relative paths are maintained, as long as your website uses relative links, you will not need to change any of your HTML when moving to the permaweb.

Using the SDK

You can upload the entire website using the Irys SDK's uploadFolder() functions.

import Irys from "@irys/sdk";
import dotenv from "dotenv";
dotenv.config();
 
const getIrys = async () => {
	const network = "devnet";
	// Devnet RPC URLs change often, use a recent one from https://chainlist.org/
	const providerUrl = "";
	const token = "ethereum";
 
	const irys = new Irys({
		network, // "mainnet" || "devnet"
		token, // Token used for payment and signing
		key: process.env.PRIVATE_KEY, // ETH or SOL private key
		config: { providerUrl }, // Optional provider URL, only required when using Devnet
	});
	return irys;
};
 
const uploadFolder = async () => {
	const irys = await getIrys();
 
	// Upload an entire folder
	const folderToUpload = "./my-spa/"; // Path to website folder
	try {
		const response = await irys.uploadFolder("./" + folderToUpload, {
			indexFile: "index.html", // Your site's index file
			batchSize: 50, // Number of items to upload at once
			keepDeleted: false, // wWhether to keep now deleted items from previous uploads
		}); // Returns the manifest ID
 
		console.log(`Website uploaded. Manifest ID ${response.id}`);
	} catch (e) {
		console.log("Error uploading file ", e);
	}
};

Using the CLI

You can also achieve the same using our CLI and the upload-dir command. Make sure to change the parameter options to provide your own private key and the name of your site's index file.

irys upload-dir ./my-spa --index-file index.html -n mainnet t -w bf20......c9885307

Monitor node balance Transcode video with Livepeer