Crust provides 3 standard ways to host websites based on Crust SDK and IPFS SDK:
💻 Crust Command Line: Allow user to publish website to Crust Network through terminal command line.
📦 Crust Pin Nodejs Package: Allow user to write javascript code to publish website to Crust Network through javascript code.
🔗 Crust IPFS Pin Github Action: Allow user to integrate standard Github Action to publish website to Crust Network.
In this guide, we will host a simple React website as an example and show how to deploy and host it on Crust Network use 3 different ways.
Prerequisites
Create a React app
npx create-react-app hello-crust
Build it
cd hello-crust/
PUBLIC_URL=./ npm run build
Deploy to Crust IPFS Network
1. [Local Mode] Through Crust CLI
In the local mode, please make sure you have IPFS running locally, refer to this to install and run.
Login with seeds
SEEDS are 12 secret words of your Crust Account. You can refer to this to create your Crust Account.
npx crust-cli login [SEEDS]
Pin build/
npx crust-cli pin build/
You'll get an IPFS cid in this step, like QmYene5icko1cusFCG9D92YUyfonN4hmRPNdPkxvJkNjTb.
Publish build/
npx crust-cli publish QmYene5icko1cusFCG9D92YUyfonN4hmRPNdPkxvJkNjTb
Now your website is published into Crust Network. Storage nodes in Crust Network will get notified and try to pull your website to store.
Monitor website status
You can query your website's status by calling the command below, it will show you how many IPFS nodes are hosted your site.
npx crust-cli status QmYene5icko1cusFCG9D92YUyfonN4hmRPNdPkxvJkNjTb
2. [Script] Through Crust Pin Nodejs Package
We take typescript as an example, in the script mode, please make sure you have IPFS running in your code environment, refer to this to install and run.
Create an deploy project
mkdir site-deployer && cd site-deployer
yarn init
Install dependencies
yarn add ipfs-http-client @crustio/crust-pin
Pin site to IPFS
const IpfsHttpClient = require('ipfs-http-client');
const { globSource } = IpfsHttpClient;
/**
*
* @param folderPath Site files path
* @returns IPFS CID
*/
async function pin(path: string): Promise
// 1. Create IPFS client
const ipfs = IpfsHttpClient();
// 2. Pin it
const { cid } = await ipfs.add(globSource(path, { recursive: true }));
return cid;
}
pin('./build/');
Publish site
import CrustPinner from '@crustio/crust-pin';
/**
*
* @param cid IPFS cid
*/
async function publish(cid: string) {
// 1. Create CrustPinner
const crustPinner = new CrustPinner(process.env.CRUST_SEEDS);
// 2. Publish to Crust
await crustPinner.pin(cid);
}
publish('QmP71MVoZBWzuh7BLXSPTnGSm7ykhfxYEsD6YNThqQ3go7');
This deploy code sample can be found on Github.
3. [Github Action] Crust IPFS Pin
Crust also provides standard Github Action to help host website, you can refer ipfs-crust-pinner's template workflow to config your own Github CD.
It uses 2 Github Actions provided by Crust Network:
Crust IPFS Upload: This action helps to upload website onto Public IPFS Gateway - crustwebsites.net, this action also can be replaced by some pin services, such as Pinata Workflow, IPFS Cluster Workflow, ...
Crust IPFS Pin: This action helps to place a storage order(IPFS CID) on Chain, then the storage nodes will pull the file from local/gateway's IPFS and decentralized stored by the whole network.
[Optional] Link a domain
Once you deployed your website to Crust Network and since Crust is a standard IPFS Network, you can refer this doc to link your domain with IPFS CID.
Also, there is a standard Github Workflow to help automatically update the DNS Record of Cloudflare.
Cases
There's already some project used Crust Network to host their website application.
🦄 Uniswap: Uses Crust IPFS Pin Github Action
🟣 Polkadot Apps: Uses Crust Pin Nodejs package
🟠 Crust Apps: Uses Crust IPFS Pin Github Action
More
Resources
Uniswap
Polkadot Apps
Crust Apps
crust-pin
ipfs-crust-action
ipfs-upload-action
ipfs-crust-pinner
website-hosting-demo
ipfs-http-client