How to Build a Website on Blockchain Without Coding

Houman Shadab
3 min readOct 5, 2021

--

Learning how to code is no longer an obstacle to building websites and decentralized applications that run on blockchain.

Using ICME, anyone can now easily build a website that runs entirely on the public Internet Computer blockchain open sourced by the Dfinity Foundation. (This is in contrast to Ethereum, which relies heavily on traditional tech providers.)

ICME makes building straightforward:

(1) a Pages editor to add pages with customizable elements

(2) Components for reusable headers and footers

(3) Themes to customize your design.

ICME building dashboard

Below is an overview of how to use ICME to build websites on blockchain without coding using this site I created as an example.

1. Convert ICP tokens to Cycles.

Developing on the Internet Computer blockchain requires developers to convert ICP tokens to Cycles. You can purchase ICP tokens on Coinbase, Kraken, and other exchanges. Once you do, as detailed in the ICME Settings section, simply send a few ICPs to the NNS wallet that is associated with your Internet Identity, and from your NNS wallet send a small amount to ICME to be converted to Cycles.

ICME Settings page

To create an NNS wallet and Internet Identity, follow these instructions.

2. Add webpages with customizable components.

At the Pages editor’s main page, you will be able to create new or edit existing pages.

ICME Pages Editor

If you add or edit a page, you will be taken to the page editor. From there, you can simply add a wide variety of components from the top that include many different styles of text, images, and other elements.

User Interface elements that can be added to any page.

You can customize elements by tweaking the HTML. For example, when I added an image with text on the right using the Media button, I was able to change the default image by clicking on HTML and changing the link to my image. Links to external pages can be added with a point and click.

Customized image, text, and external links

3. Connect pages with headers and other reusable elements.

ICME’s Components page enables you to quickly add standard page elements such as headers and footers so users can easily navigate through different pages in your site.

For example, in the header element, I used the plus button to add my site’s About page to the header and then chose what page should be linked from a menu. It’s that easy.

ICME Components page

4. Launch your website on blockchain!

With your website created, you can now return to the ICME dashboard and launch your simply by clicking Deploy so the world can use your website.

Unlike Ethereum and other blockchains, users don’t have to pay gas fees to interact with websites and dapps built on the Internet Computer.

--

--