In this tutorial, I’ll show you how to host your very first page on IPFS in on time at all. 

  1. Creating a Metamask wallet
  2. Using the wallet to signup to fleek
  3. Creating a Github Repository
  4. Creating our React JS Webpage
  5. Internet Computer or IPFS?
  6. Going Live

1. Creating a Metamask Wallet

Let’s go ahead and download the MetaMask Wallet in this case we’ll be downloading the Chrome Extension. Go to MetaMask and click the “Download” Button to install the extension in chrome.

2. Using the wallet to signup to fleek

Before we get into the signup using a wallet, let’s look at fleek.io. Fleek makes it easier for developers to deploy and host websites and apps through multiple services. Fleek currently supports website and app deployment to Internet Computer and Interplanetary File System or IPFS for short.

Okay, let’s signup using a wallet.

Go to fleek.io and click signup, they have a free basic plan which will satisfy this tutorial, you’ll then be presented with the following;

Selecting a Wallet

We’ll click the Ethereum Wallet Icon, this will connect with our newly installed MetaMask extension.

Sign your wallet with the App

Your wallet extension should bring up the signing screen, this allows us to sign the wallet to the app.

Account created 

All done, in future, we’ll be able to login using the same wallet using the signing process.

3. Creating a GitHub repository

Next, lets create a GitHub repository, we’ll assume you’re signed up and can create new repositories.

4. Creating our React JS Webpage

Let’s create our new shiny React JS webpage.

You’ll need NPM and Node JS installed on your system, please check out this tutorial first.

Once your all set, Open your command prompt (start > type CMD).

Next we’ll create our react app using NPM.

npx create-react-app my-app

cd my-app

npm start

You should see something like this.

Let’s go ahead and run the app, then launch it in the browser using: http://localhost:3000.

Now we have our react webpage we can go ahead and push it our GitHub repository we just created.

Once the build files have been pushed to our repository, we are ready to connect our git repository to fleek.

5. Internet Computer or IPFS?

Internet Computer and IPFS are distributed computing platforms which allow http serving and file serving amongst other features. To determine the best decentralised network to use for your project, consult the Fleek documentation.

For the purpose of this tutorial we’ll use the IPFS.

The final step will be to select the build tool for fleek, to build the app into static files for storage and serving on IPFS.

If everything ran smoothly, we should now have our first react app living on the new web.

Here it is, feel free to check it out; https://still-sky-1939.on.fleek.co/