Learn to host a one-page HTML static website on IPFS (InterPlanetary File System)
Learn to host a one-page HTML static website on IPFS (InterPlanetary File System)
Step 1: InterPlanetary File System (IPFS) is a protocol and network designed to create a content-addressable, peer-to-peer method of storing and sharing hypermedia in a distributed file system. It's a great way to host static websites in a decentralized way. Here's a step-by-step guide on how to do it:
Step 2: IPFS is already installed on your setup so we can skip installation. You can check the IPFS version by running this command on a terminal.
Step 3: You need to initialize IPFS. Open a terminal and run the command. This will create a new IPFS repository in your home directory and output your new node's peer identity.
Step 4: This will start the IPFS daemon (in background) which allows your node to connect to the IPFS network.
Step 5: Let's check all connected peers.
Step 6: IPFS stores content on the network and locate it using CID (Content Identifiers). A CID can be compared to a URL. However, unlike a URL which points to the server's location, a CID represents the actual content, independent of its location.
Step 7: Let's add some dummy content (in this case a string 'IPFS Test 1') to IPFS and store CID in a variable.
Step 8: Print the CID value stored in the variable.
Step 9: View the content corresponding to a CID.
Step 10: Now, let's store a static HTML page on IPFS.
Step 11: Open VS Code, create a new file index.html and paste the provided HTML code to it. It is a very simple static HTML website.
Step 12: Add the webpage to IPFS. This will store the webpage on IPFS and issue a CID.
Step 12: Save the cid obtained in previous step in CID variable. This way, we won't have to copy-paste it repeatedly.
Step 13: Publish the single page website to IPFS.
Step 14: The page is now available to access. Use curl to access the page on localhost.
Step 15: We learned how to host a file or website page on IPFS.