> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bless.network/llms.txt
> Use this file to discover all available pages before exploring further.

# Hosting Static Websites

> Deploy a static website on the Bless Network in minutes

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](../installation))
* 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:

```sh theme={null}
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:

```sh theme={null}
cd my-awesome-site
```

### Quick Login Check

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

```sh theme={null}
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:

```sh theme={null}
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:

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

<CodeGroup>
  ```html index.html theme={null}
  <!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>
  ```

  ```css style.css theme={null}
  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;
  }
  ```

  ```js script.js theme={null}
  function changeText() {
      alert('Ouch, why did you do that');
  }
  document.getElementById('alertButton').addEventListener('click', changeText);
  ```
</CodeGroup>

### 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.

```js index.ts theme={null}
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.

```sh theme={null}
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:

```sh theme={null}
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](https://github.com/orgs/blessnetwork/discussions) on GitHub and we will typically respond within **48 hours**.
