Hello World (Code)

This guide walks you through a quick way to get a static HTML, CSS and JavaScript webpage on to the permaweb using a few lines of code and a command-line interface (CLI).

Requirements

NodeJSopen in new window LTS or greater
Basic knowledge of HTML, CSS and JavaScript
A text editor (VS Code, Sublime, or similar)

Description

Using a terminal/console window create a new folder called hello-world.

Setup

cd hello-world
npm init -y
npm i -g @irys/sdk
mkdir src && cd src
touch index.js index.html style.css

Next open your text editor and import the hello-world directory.

Generate a wallet

node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json

The wallet.json file must be in the root of the hello-world folder and not inside of your src folder.

Create a webpage

This webpage is using basic HTML, CSS and JavaScript to create a styled button that when you click it the header text changes color. Once finished, we will be using Irys and our previously generated wallet to deploy a fully functioning, static and permanent webpage to Arweave.

Paste the code from the following code blocks into their files:

index.html

Click to view HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="index.js"></script>
    <title>Cookbook Hello World!</title>
  </head>

  <body>
    <button onclick="changeColor()" class="button">Click Me!</button>
    <h1 id="main">Hello World!</h1>
  </body>
</html>

style.css

Click to view CSS

.button {
  padding: "10px";
  background-color: #4caf50;
}

index.js

Click to view JS

function changeColor() {
  const header = document.getElementById("main");
  header.style.color === ""
    ? (header.style.color = "red")
    : (header.style.color = "");
}

Now that there is a static site to deploy, it can be checked to ensure it all functions properly by typing open src/index.html in your console/terminal. If everything is working as expected it is time to deploy to Arweave!

Upload using Irys (Previously Bundlr)

The command below deploys the src directory whilst also indicating the index.html file as an index for the manifests (relative to the path provided to upload-dir flag).

irys upload-dir src -h https://node2.irys.xyz --index-file index.html -t arweave -w ./wallet.json

Congrats!!

You just published a static site on Arweave using a few commands and a few lines of code!

Documentation

# Hello World (Code)

# Requirements

# Description

# Setup

# Generate a wallet

# Create a webpage

# Upload using Irys (Previously Bundlr)

# Congrats!!