Sites on IPFS

Introduction

For this demo, we will use this blog to deploy it to IPFS. We will then route it to an IPNS name and later configure it into an ENS domain. This will give us the complete hosting flow via the CLI.

Since we are deploying a static site, we need to ensure that our build command in the package.json is npm build && npm export. This will create a static site from our project and output it to the out folder, which we will use to pin to IPFS.

This demo runs on version 0.0.2-rc.2 or 0.0.2

Configuring the Sites

The first step to deploy a site using Fleek.xyz CLI is to stand in the project directory and run fleek sites init command.

> fleek sites init

For this process the CLI checks if a fleek.json file exists, in the case it does not it starts a step by step process to set up the site.

> fleek sites init
WARN! Fleek CLI is in beta phase, use it under your own responsibility
✔ Choose one of the existing sites or create a new one. › Create a new site
✔ Type name of you new site. … fleek-demos-blog
✔ Specify the dist directory from where the site will be uploaded from … out
✔ Do you want to include the optional "build" command? … yes
✔ Specify `build` command … npm run build
> Success! Fleek config file has been saved.

Now we can see that a fleek.json file has been created with the configuration for our deploy, this files looks like this.

{
  "id": "cldda19st0000kz081v8v9esj",
  "name": "fleek-demos-blog",
  "distDir": "out",
  "buildCommand": "npm run build"
}

If we try to run again the fleek sites init command then we will be greeted with the following message

> fleek sites init
WARN! Fleek CLI is in beta phase, use it under your own responsibility
Error: Configuration file found already.
> Site already exists in this folder.

Now that we have our site configured and our deploy all set up we can proceed to deploy it using the fleek sites deploy command. This will start by checking the existance of the fleek.json file and start the build and upload process.

> fleek sites deploy
WARN! Fleek CLI is in beta phase, use it under your own responsibility
 
> build
> next build && next export

Once the process is finished you will have an IPFS CID that represents you site.

Export successful. Files written to fleek-demos-blog/out
 
> Success! Deployed! IPFS CID: Qmb2psuVMkGfSdH3egfLEHc2di5VKtDVdTqtB8wqFNbK2h

If everything went as planned you could go here and you will see this blog.

IPNS - Making a static reference to your site

The InterPlanetary Name System (IPNS) is a system for creating mutable pointers to CIDs known as names or IPNS names. IPNS names can be thought of as links that can be updated over time, while retaining the verifiability of content addressing. In this case in particular, they are mostly used to represent IPFS files (through their hashes).

We are going to be using IPNS to have an static pointer that we can later refference to our domains so we only need to update one reference to our updated site everytime we do a new deploy.

To start this we will use the fleek ipns create command.

> fleek ipns create

This will create a new IPNS hash that you can later refference to your site CID.

> fleek ipns create
WARN! Fleek CLI is in beta phase, use it under your own responsibility
> Success! IPNS record created.
> k51qzi5uqu5di60n67az2cfbca05pvwcuv6di5zk0zz8mka85zzrvucka2u8sk
> You can now publish this record with the following command:
> fleek ipns publish k51qzi5uqu5di60n67az2cfbca05pvwcuv6di5zk0zz8mka85zzrvucka2u8sk <ipfsCid>
https://ipfs.io/ipns/k51qzi5uqu5di60n67az2cfbca05pvwcuv6di5zk0zz8mka85zzrvucka2u8sk

Let take the CID that we have generated before to link it to the IPNS we had just creates

> fleek ipns publish k51qzi5uqu5di60n67az2cfbca05pvwcuv6di5zk0zz8mka85zzrvucka2u8sk Qmb2psuVMkGfSdH3egfLEHc2di5VKtDVdTqtB8wqFNbK2h
WARN! Fleek CLI is in beta phase, use it under your own responsibility
> IPNS record published. You can visit it here:
https://ipfs.io/ipns/k51qzi5uqu5di60n67az2cfbca05pvwcuv6di5zk0zz8mka85zzrvucka2u8sk
WARN! IPNS propagation can take 1 up to 30 minutes.

Once IPNS propagates you can go to here to check the site that was deployed too. In future ocations you can use the same IPNS url as an static route to your content, thus improving the user experience.

The CLI comes with other capabilities like listing all you IPNS records for example.

> fleek ipns list
WARN! Fleek CLI is in beta phase, use it under your own responsibility
id                         name                                                            hash                                          
-----------------------------------------------------------------------------------------------------------------------------------------
cld1p9acj0002mk08ypnnfjba  k51qzi5uqu5dguh71fgl1wh25q155rpy36dltvjt67ccu3s7gzvyj3awqbzzvh  efewf                                         
cldd0tizw0000m508jzs1c8ab  k51qzi5uqu5dkp31g4y94s4revnri7b0v49lgmdi99q4k97k6h76l98v86pws7  QmTsu8ScyWyXE1KqG69jhSjjC1mtnJa6Z9b1TrqDMEWnh3
clddb2d890000l808bhyj9nya  k51qzi5uqu5di60n67az2cfbca05pvwcuv6di5zk0zz8mka85zzrvucka2u8sk  Qmb2psuVMkGfSdH3egfLEHc2di5VKtDVdTqtB8wqFNbK2h

Setting up an ENS domain to you Fleek.xyz site

In future updates we will have the possibility to spin up a domain using Fleek's custom domain service, but that does not mean we cannot add an ENS domain to our recentlydeployed site using IPNS.

What we are going to do is configure it by going to our ENS domain and setting up the IPNS record we created. WARNING this operation cost money to pay the Gas, but by using IPNS you only need to do this once!

Go to your ENS dashboard and add a content record using the following

ipns://<your-ipns-hash>
or
ipns://k51qzi5uqu5dkp31g4y94s4revnri7b0v49lgmdi99q4k97k6h76l98v86pws7

Once the record is replicated, this may take some time, you can go to your ENS domain using the .limo extension to access your deployed site. Now when yo do a new deploy you just need to update the IPNS record and you will see it reflected on the ENS domain.

This is an example of an ENS configured on and IPNS registered using a CID pinned with Flee.xyz mntis.eth.limo