Hello World (Code)

This guide walks you through a quick way to get a static HTML, CSS and JavaScript webpage onto 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
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 permaweb-deploy 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 permaweb-deploy

Install and configure permaweb-deploy for deployment:

npm install --save-dev permaweb-deploy

Add a deployment script to your package.json:

{
  "scripts": {
    "deploy": "permaweb-deploy --arns-name my-hello-world --deploy-folder src"
  }
}

Deploy your application:

DEPLOY_KEY=$(base64 -i wallet.json) npm run deploy

For detailed deployment instructions, see Permaweb Deploy.

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 permaweb-deploy

# Congrats!!