The Interplanetary File System (IPFS) is a peer-to-peer hypermedia protocol aimed to replace HTTP with a name-based system. One of the main use cases for this new technology is that it allows you to host distributed websites. However, IPFS currently presents two major barriers when it comes to the setup of these distributed websites:
- The name/address of the distributed website is far from human readable
- The upload of pages isn’t easy, and most of the time the website loads slowly
I addressed the first problem in my previous article about a distributed search engine. The current article will focus on how to host distributed web pages with Dweb.page in literally a couple of seconds!
There are several tutorials on how to do this (e.g. here or here). In these tutorials, you usually need to install IPFS on your computer, make sure that your website contains only relative links and upload the whole folder to your IPFS gateway (with ipfs add -r folder/). This allows your distributed website to load fast on your local gateway, but once your site is requested from a different gateway like ipfs.io/ipfs/, it takes quite a while to load the page. The reason for this slow loading is because once your hash is requested and loaded from the public gateway (by entering ipfs.io/ipfs/yourAwesomeHash), it starts requesting other necessary hashes from the network (e.g. the hash containing the CSS or Javascript file). And even though the propagation of hashes through the IPFS network has been improving, it still takes a some time if your website is not fully distributed yet. This initial loading time is just something people aren’t used to. Additionally, if you click on a link, the whole process starts from the beginning, and if one part of your site, like the CSS file, is deleted from the IPFS network, the whole site will stop working.
The best way to solve this is to create a single page application (SPA) and put all the code into one HTML file. This way your webpage loads much faster on the distributed web and you don’t have any issues with links. Of course, creating a small hello world website by putting all the code into one HTML file is fine, but for a big project, you might want to use something else.
That is why for the development of Dweb.page we are using Webpack together with the HTML Webpack Plugin as well as html-webpack-inline-source-plugin. If you never heard of Webpack, there are tons of helpful tutorial out there, like the YouTube tutorial series by Ihatetomatoes.
One final note here. If you plan on creating a more advanced Dweb application, you probably don’t want to integrate a centralized backend. You should rather take a look at decentralized solutions based for example on OrbitDB, IOTA or any other distributed ledger. Now, after you created your awesome webpage, we can host it on the distributed web. Just take the HTML file, select the public sharing mode and upload it on Dweb.page. That’s it. I bet you never hosted a distributed webpage or even a normal webpage so fast!
You now can request your website from any ipfs gateway, like https://ipfs.io/ipfs/, https://ipfs.infura.io/ipfs/ or https://ipfs.eternum.io/ipfs/ + your hash. If you want to keep this file available, even though people might not constantly open it, you need to pin it to an IPFS gateway. We can help you with this, just send us the hash of your webpage, and we make sure it stays online. And since you are sending us an email anyway, maybe include some feedback/ideas for the further improvement of Dweb.page 😉