Upload a static website

Uploading static websites

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

Maintaining link structure

When you upload an entire folder of assets to Bundlr 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:


you can download the logo with the link https://arweave.net/[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.

A sample website to upload

In our Bundlr Basics repository on GitHub (opens in a new tab), there is a small example website (opens in a new tab). The structure is as follows:


The index.html file loads the styles in styles.css and then displays the images along with some example text. All links inside index.html are relative; there are no absolute links. Here's what it looks like:

And here it is served from the permaweb: https://arweave.net/kG358dvaEJUTKqNkZPmP8276ObdnBZxLL4l27bk2Y9w (opens in a new tab)

Using our SDK

You can upload the entire website using the SDK's bundlr.uploadFolder() function. The code is also contained in the Bundlr Basics repository (opens in a new tab).

// Connect to a Bundlr node
const bundlr = new Bundlr.default("http://node1.bundlr.network", "arweave", privateKey);
try {
	// Call upload folder.
	// You MUST pass the name of your main index file as the indexFile parameter
	const response = await bundlr.uploadFolder("../assets/example_spa/", {
		indexFile: "index.html",
	// This URL will now load your entire website from the permaweb
	console.log(`SPA Uploaded https://arweave.net/${response.id}`);
} catch (e) {
	console.log("Error uploading file ", e);

Using our CLI

You can also achieve something similar using our CLI. Make sure to change the parameter options to provide your own private key and the name of your site's main index file.

cd bundlr-basics/assets
bundlr upload-dir example_spa --index-file index.html -c arweave -h http://node1.bundlr.network -w privateKey.json