Hosting Static Websites

Ready to launch your website into the decentralized world? Whether you’re building a personal blog, a meme page, or just experimenting with web development, we’ll help you get your site up and running on the Bless Network in no time. This guide is perfect for beginners, but even if you’re an experienced developer, you might pick up some cool tricks along the way. Let’s dive in\\!

Before We Start

Before you begin, you’ll need:

The Bless CLI installed on your computer (hop over to our installation guide)
Some basic HTML, CSS, and JavaScript knowledge (but don’t worry, we’ll provide all the code you need\\!)

Let’s Get Started

Create Your Project Space

First, fire up your terminal and run this command to create your new project:

npx blessnet init

When it asks for a name, pick something fun (like my-awesome-site). This will create your project template where all the magic will happen. Next, let’s move into your new project:

cd my-awesome-site

Before we proceed further, let’s make sure you’re logged in:

npx blessnet account login

Just follow the email verification prompts, and you’ll be good to go\\!

Building the Website

Set Up Your Canvas

Create a new folder called public - this is where all your website files will live. If you want to do it using the terminal, run:

mkdir public

Create Your First Files

Let’s create three files that will bring your website to life. Don’t worry about typing everything perfectly - just copy and paste - we’ll walk through each component:

index.html - This is your main page that visitors will see
style.css - Makes your website visually appealing with custom styling
script.js - Adds interactive features to engage your visitors

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bless Network</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Welcome to Blessnet</h1>
        <img src="https://i.ibb.co/vvbN7FJ/2333232-removebg-preview.png" alt="Bless Network">
        <h1>Powered by <em>The Bless Network</em></h1>
        <button id="alertButton">Click Me</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    background: gold;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    text-align: center;
}
img {
    max-width: 300px;
    border: 5px solid black;
    border-radius: 15px;
}
button {
    background: black;
    color: gold;
    border: none;
    padding: 12px 24px;
    font-size: 18px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 15px;
    transition: 0.3s;
}
button:hover {
    background: darkgoldenrod;
    color: black;
}

function changeText() {
    alert('Ouch, why did you do that');
}
document.getElementById('alertButton').addEventListener('click', changeText);

Set Up Your Simple Server

We are almost there\! Let’s edit the index.ts file in the project root (you need to go back from the public folder where you just added the three files). This creates a simple server that will send the three files you just created to the browser accessing your website.

index.ts

import WebServer from '@blockless/sdk-ts/dist/lib/web';
const server = new WebServer();

server.statics('public', '/');
server.start();

Time to Launch

Now, we are ready to deploy and see your website in production!

Test Drive Locally

Before we show the world, let’s make sure everything looks perfect. Run the following command to test your website locally on your computer.

npx blessnet preview serve

Visit http://localhost:3000 to see the website you just created come to life\\!

Deploy to Bless

Now it’s finally time to deploy your website to the Bless Network and show it off to the world\\! To do that, run:

npx blessnet deploy

Congratulations\\! Your site is now live on the Bless Network\\! You’ll get a URL like https://your-awesome-site.bls.dev that you can share with everyone.

Trouble Shooting

If you encounter any problems that you cannot solve, we are here to help. Simply start a thread on the Bless Forum on GitHub and we will typically respond within 48 hours.

Build on Bless

CLI

Deploy Your App

Cost & Billing

Tutorials

Integrationss

Before We Start

Let’s Get Started

Create Your Project Space

Building the Website

Set Up Your Canvas

Create Your First Files

Set Up Your Simple Server

Time to Launch

Test Drive Locally

Deploy to Bless

Trouble Shooting

​Before We Start

​Let’s Get Started

​Create Your Project Space

​Quick Login Check

​Building the Website

​Set Up Your Canvas

​Create Your First Files

​Set Up Your Simple Server

​Time to Launch

​Test Drive Locally

​Deploy to Bless

​Trouble Shooting

Before We Start

Let’s Get Started

Create Your Project Space

Quick Login Check

Building the Website

Set Up Your Canvas

Create Your First Files

Set Up Your Simple Server

Time to Launch

Test Drive Locally

Deploy to Bless

Trouble Shooting