App
Use end-to-end encryption or publish public files to Arweave.
API
Plug Akord vaults into existing products and workflows.
Explorer
Find, discover and follow Akord vaults with our Permaweb dApp.
Learn > Developer

Publishing a website with Akord

Richard Caetano
Richard Caetano
23 Apr 2023 · 2 min

Publishing static websites to the permaweb using Akord is a great way to ensure that your website remains available permanently without the risk of it being taken down. With Akord, you can easily create a public vault, upload your website files, and generate a manifest to create a permaweb link for your website. In this tutorial, we will guide you through the steps required to publish a static website to the permaweb using Akord.

Let's start!

  • Create a Public Vault: To create a public vault, open v2.akord.com and log in to your account. Click on the "New Vault" button, select the "Public" option, and name your vault.
  • Upload an "index.html" file: To upload your index.html file, click on the "Upload a File" or "+" button and select the file. Below is an example of what your index.html file may contain:
<html>
  <head>
    <title>Permaweb Website</title>
    <link rel="stylesheet" type="text/css" href="styles/styles.css" />
  </head>
  <body>
    <h1>Welcome to My Permaweb Website</h1>
  </body>
</html>
  • Create a folder titled "styles": To create a folder titled "styles", click on the "+" button, select "Create Folder" and enter "styles" as the folder name.
  • Upload the styles.css file to the "styles" folder: To upload the styles.css file to the "styles" folder, click on the folder and select the "Add File" from the "+" button. Below is an example of what your styles.css file may contain:
body {
  background-color: #f2f2f2;
}
h1 {
  color: #c84343;
  align-items: center;
  text-align: center;
  font-family: Georgia;
}

Generate a manifest

At this point, you should have a public vault with an index.html in the root, and a styles.css file in the styles folder. Next let's generate a manifest that will instruct the Arweave gateways to render this vault as a public website.

  • Add a manifest: To add a manifest, click on the "+" button and select "Add Manifest". Once completed, you'll find a 'manifest.json' file in your vault. This file lists all the contents in your vault, assigning the file's on chain hash with a friendly name provided by the Akord vault.
  • Wait for the transactions to confirm on the Arweave blockchain: While pending the file name will appear with a small orange dot. You can check on its status by selecting "Storage" from the left nav menu.
  • Find the permaweb link to your websites: Once the transactions are confirmed, go to your vault, select the manifest.json file menu on the right, and click on "File Info". Copy the permaweb link.
  • Open the URL in your web browser: Open your web browser and paste the permaweb link to view your static website.

Akord makes it easy to publish static websites to the permaweb, which is an excellent way to ensure that your website remains available permanently. By following the above steps, you can easily publish your website to the permaweb and share it with the world.Akord makes it easy to publish static websites to the permaweb, which is an excellent way to ensure that your website remains available permanently. By following the above steps, you can easily publish your website to the permaweb and share it with the world.

Troubleshooting website publishing

  • If you're unable to load files from your HTML, make sure that the links are relative to the root. For example if you have a folder named photos you would use src="photos/photo1.jpg or if you're accessing a file from the root href="index.html"
  • Ensure that your manifest.json file was generated after uploading your files. You can generate manifests multiple times, giving you a URL for each that manifest represeting a vault state in time.
  • Wait for the transactions to confirm on the Arweave blockchain before attempting to access your site. This may take a few minutes up to an hour.
  • Make sure to choose the permaweb url from the File Info menu from manifest.json. You can also choose to access the permaweb via https://arweave.net/<file tx id>. The file tx id if found under the 'File Info' menu.
  • If you encounter any errors, refer to the Arweave documentation or our Community Discord channel for support.

Make your first upload to Arweave for free

Upload public or private data to Akord’s digital vaults. The only app to provide free storage on the Arweave blockchain.