How to host a decentralized website using Twentysix Cloud?
This tutorial will guide you through creating a blog template and hosting it using Twentysix Cloud. It uss possible to deploy any kind of dApps using Twentysix Cloud. You just need to provide the root folder containing your static website's files. It will be uploaded to IPFS (InterPlanetary File System) and fully managed by the aleph network. Twentysix Cloud is fully GDPR-compliant, if you decide to delete your dApp or if you stop holding/streaming the needed tokens to keep it online, your website will be automatically garbage collected by the aleph.im 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. Some $ALEPH 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.
Step 3: Hosting on Twentysix Cloud
1. Deploy to Twentysix Cloud:
Go to console.twentysix.cloud
2. Click on "Web hosting"
3. Choose the framework you used to create your website Next.js, React or Vue.js
4. Upload the folder of your website
5. Give a name to your website
6. (Optional) Add a Custom Domain. If you don’t own a domain, Twentysix Cloud will randomly generate one for you.
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
1. Monitor Deployments: Use Twentysix Cloud dashboard to monitor your deployment status, view logs, and manage your site settings.
2. Automate Deployments: Every time you push changes to your repository, upload your folder to your dashboard and Twentysix Cloud will automatically rebuild and deploy your site.
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, self-hosted decentralized blog on Twentysix Cloud! This setup leverages the power of aleph.im with Twentysix Cloud efficient decentralized hosting services to ensure your content is highly available and performs well. Keep iterating on your content and site design to fully leverage the capabilities of Twentysix Cloud.