How to Build a Website on Blockchain Without Coding

Learning how to code is no longer an obstacle to building websites and other content that runs on blockchain.

Using ICME, anyone can now easily build a website that runs entirely on the public Internet Computer blockchain without relying on web2 to host the front end.

Here's how to use ICME to build a site on blockchain:

  • Create an anonymous account and log in
  • Subscribe to the ICME Unlimited plan
  • Create webpages
  • Add customizable elements
  • Deploy to blockchain

Let's get started!

1. Create an anonymous account and log in

To get started, go to ICME's log in page and create an ICME account with biometrics using Non-fungible Identity (NFID). NFID allows you to easily log in using your Google account but still keep your identity completely private.

2. Subscribe to the ICME Unlimited plan

From ICME's main dashboard page, click on Account to purchase an ICME Unlimited plan. This lets you build websites on blockchain for 30 days.

You can pay using credit card or with ICP tokens. If you pay by credit card, you also get one NFT minting and storage canister.

If you pay with ICP tokens, you will have to purchase NFT canisters separately. You will also need to first purchase ICP tokens on an exchange, send them to an ICP wallet (such as NNS or Stoic), and then send the ICP tokens

After you have made your payment, click on Dashboard and refresh the page to confirm that you have a positive Convertible balance. Then press the Convert ICP to Cycles button and the 30 days balance will appear.

3. Create webpages

You can now begin to build webpages with ICME's modern design tools.

First, click on Builder on the top left to enter the page builder mode.

Second, create at least one page for the site's main page (the Page Url of this main page must be blank). You can add additional pages to your site simply by clicking Add page +. These additional pages must have a Page URL name that will correspond to the URL's subpage, such /dogs or /cats.

4. Add customizable elements

Overview

Now you can build your pages by adding Elements. These elements include text, image, and video.

When you click on elements inside the editing field, you can further edit with the right-hand editor. For example, you can change the color of text, add in links to other websites, and change the fill color for cards.

In addition, clicking on the horizontal menu at the top left of any element allows you to make several adjustments including changing the row background color, text alignment, and image borders.

Images, Themes, and Header & Footer

When you click on an image element, you have three options to add an image from the editor on the right side of the page:

1. Use an online image on the web by pasting its URL (typically ending .jpg, .png, .svg). Here's an example online image file.

2. Upload an image from your computer.

3. Use an NFT image that you have already minted on-chain in your NFT minter.

For options 2 and 3, you must first set up an NFT minter by clicking on the NFT & Storage component on the left hand menu, and then following the instructions. Read here for more details about minting on-chain NFTs that can be used in your websites.

The Theme component allows you to add consistent colors and fonts across elements.

The Header & Footer components allows you to create elements that are reusable across all pages.

5. Deploy to blockchain

Once you have built and saved you website. Proceed back to the Dashboard by pressing the Home button in the top left.

Next click the Deploy your site button. When it is done deploying, click on Your site is live on blockchain here.

Congratulations!

About the author

Houman Shadab is a cofounder of ICME