How to host a website using Aleph Cloud?

Deploy your website on Aleph Cloud’s cutting-edge decentralized infrastructure for unmatched privacy, security, and uptime. This comprehensive tutorial guides you through creating and hosting any static website or dApp using Aleph Cloud’s Web3-native platform.

Your website files are uploaded to IPFS (InterPlanetary File System) and fully managed by the Aleph network. Aleph Cloud is fully GDPR-compliant, and if you decide to delete your dApp or stop holding the required tokens, your website will be automatically garbage collected by the network.

**Note: **IPFS being a public P2P network, your files or folder could still be available in the network if other nodes pinned it

What do you need to start

Prerequisites

1. Basic knowledge of web development (HTML, CSS, JavaScript)

2. Node.js and npm installed on your machine.

3. A source-code editor like VS code (optional)

4. A GitHub account.

5. Aleph tokens in your wallet

Step 1: Setting Up Your Development Environment

1. Install Node.js and npm: If you haven’t already, download and install Node.js from nodejs.org. npm is included with Node.js. You can actually use any framework (and package manager, such as NPM, PNPM, YARN, BUN…) to create your website.

2. Install Git: Download and install Git from git-scm.com.

3. Create a New Project Directory:

mkdir my-aleph-blog

cd my-aleph-blog

NOTE: Keep in mind that your website must only contain client-side components and the dependencies used by it. For backend support, check out the section below.

When your project is ready, you can build and generate your static folder. For example, using NPM:

npm install

npm run build

NOTE: The name of the output folder depends on the framework, but it’s usually out or dist.

Step 2: Creating a Blog Template

1. Initialize a New Project:

npm init -y

2. Install a Static Site Generator: We’ll use Next.js, a popular React-based framework:

npx create-next-app@latest my-blog
cd my-blog

3. Create Blog Pages: Next.js uses a pages directory to serve routes. Create a new file for your blog posts:

mkdir pages/poststouch
pages/posts/[id].js

4. Add Sample Content: Edit pages/posts/[id].js* to add sample blog content:

// pages/posts/[id].js
import { useRouter } from 'next/router'

const Post = () => {
const router = useRouter()
const { id } = router.query

return (
<div>
<h1>Blog Post {id}</h1>
<p>This is the content of blog post {id}.</p>
</div>
)
}

export default Post

5. Run the Development Server:

npm run dev

Open http://localhost:3000/posts/1 *to see your first blog post.

Deploy and host your website

Deploy a secure, censorship-resistant Web3 site using IPFS and Aleph Cloud’s decentralized infrastructure.

Launch app

Step 3: Deploy to Aleph Cloud

Access the Console

1. 1. Navigate to app.aleph.cloud
2. 2. Click on “Web hosting”
3. 3. Choose your framework (Next.js, React, Vue.js, or other)

Upload Your Website

1. 1. Upload your built website folder
2. 2. Provide a name for your website
3. 3. (Optional) Add a custom domain - Aleph Cloud will generate one automatically if you don’t have your own

Step 4: Check out

1. Review the amount of $ALEPH needed to host your website

2. Sign the message and deploy your website. Your tokens won’t leave your wallet and won’t be consumed. Please note that if you withdraw your tokens from your wallet you will lose access to your website.

Step 5: Continuous Deployment

Monitor your site

Use the Aleph Cloud dashboard to:

• Monitor deployment status
• View logs and analytics
• Manage site settings

Update your website

Upload your updated folder to the dashboard whenever you make changes - Aleph Cloud will automatically rebuild and deploy your site.

Handle Redirections on IPFS

By default, IPFS can’t handle fallback redirections. To enable this, you should add a _redirects* file to your dapp structure.

For simple websites, it should be located in the root folder. For framework-based websites, it should be located in the public folder. Then, at build time, it will be moved to the root. Check out the documentation for more details.

• IPFS docs: Redirects and Custom 404s
• Specifications: Web Redirects File

Default Gateway Service

When your website is live on the Aleph network, we provide you with a gateway URL to easily access it: https://<ipfs-cid-v1>.ipfs.aleph.sh*

You can also access it similarly using alternative gateways, as your website is hosted on IPFS. Check out alternative gateways here: Public Gateway Checker

ENS Domains

Since your website is hosted on IPFS, it is compatible with the ENS standard. To make it usable with an ENS resolver such as https://<your-ens-name>.eth.limo* or https://<your-ens-name>.eth.link*, you need to set up the content hash field of your ENS with: ipfs://<ipfs-cid-v1>*

Aleph is currently not compatible with IPNS, which would allow you to automatically update the live version of your dapp. We are planning to support it in the near future and are working on building our own Aleph-native alternative to Limo, which is currently not a decentralized and scalable service.

Backend Support

To add a backend to your website and make it a real fullstack dapp, there are two current approaches you can implement:

1. Deploy your backend as a function using our serverless solution.

2. Deploy your instance, set up your environment, and expose your APIs to the internet.

NOTE: You should set up your backend in advance to integrate the necessary endpoint URLs into your website later.

You now have a fully functional, decentralized website hosted on Aleph Cloud’s Web3 infrastructure! This setup provides superior security, uptime, and censorship resistance compared to traditional hosting while maintaining excellent performance and user experience.

Why choose Aleph Cloud for web3 hosting?

1. 1. Enhanced Security: Distributed storage across multiple nodes prevents single points of failure
2. 2. Censorship Resistance: No centralized authority can take down your website
3. 3. High Availability: Your site remains online even if individual nodes go offline
4. 4. Data Sovereignty: You maintain full control over your data and hosting
5. 5. Framework Agnostic: Supports any static site generator
6. 6. Easy Deployment: Simple upload and configuration process
7. 7. Automated Management: Handles IPFS pinning and network distribution
8. 8. Developer Tools: Comprehensive dashboard and monitoring
9. 9. Performance: Content delivered from nearest available nodes
10. 10. Cost Efficiency: Token-staking model or PAYG.

Continue building the decentralized web with Aleph Cloud’s powerful hosting solutions.