Decentralized Web Hosting with IPFS
2024 Aug 26Currently, web hosting is entirely centralized, from the infrastructure and file hosting to DNS. We introduce an alternative solution, using IPFS, a decentralized file storage and retrieval protocol and fleek.xyz for infrastructure and file hosting, along with ENS for decentralized DNS and routing.
What is IPFS?
IPFS stands for InterPlanetary File System and is a protocol for decentralized, peer-to-peer file sharing. Essentially all websites on the internet today, rely on centralized infrastructure, cloud and DNS providers for hosting. As we move from what is widely understood as Web2 to Web3, which embodies an ideology of decentralization and censorship resistance, it is important to work towards decentralizing this aspect of the internet.
The protocol is similar to BitTorrent or a blockchain, in that information is stored and shared across decentralized nodes, however it is important to differentiate these different technologies.
In order to upload a file to the network, we first must gain access to one of these nodes. We can either use a service that provides this access, or we can run a local client of an IPFS node. The upload process involves creating a hash of the file, using a hashing algorithm like SHA-256, which will be used as an identifier for that file, also called a CID (content ID). It is important to understand that once the file is uploaded, it is immutable, uploading a modified version will create a new hash and be logically separate from the original file.
When a client wants to access this file on the IPFS network, we make a query to a self hosted node or via a gateway from a provider. The node will then query it's peers for the file, and once it reaches a node that stores the file, it can then be accessed and delivered to the client. This process is fundamentally different from traditional web hosting; where we use domains that map to IP addresses in order to access content, IPFS locates files using a hash. The terminology here is called location addressing for the traditional, centralized method and content-based addressing for this new, decentralized file hosting. When a node queries and retrieves a file from another node, it will also make a copy of that file locally and index that file for ease of access. If the file is not used in a long time, it gets deleted through the garbage collection of the node, which can in fact be overriden when self-hosting a node and using what is called a pinning service.
IPFS offers us a decentralized file access that has been used as the underlying mechanism for several different services, including hosting a webserver, offered by fleek.xyz, which we will now begin to dive into.
What is Fleek?
Fleek is a decentralized webhosting solution built on top of IPFS, allowing developers an alternative to building and deploying applications away from centralized cloud infrastructure providers such as AWS, Azure and GCP. It currently works with a range of popular web frameworks, such as Next.js and React. Recently, fleek has also introduced functions, for executing server-side code. At the time of writing, hosting full back-end servers, apart from the back-end API offered through a full-stack Next.js application is not currently supported, although functions may be used to achieve some server-side functionality for a client.
The fleek platform itself offers much of the functionality you would like for building a web application, including CI/CD and automated deployments, managing domains and of course file storage. There are also some exciting new features in the works including audit logs and analytics. Keep in mind when using the platform that it is not as mature as something like AWS. The platform itself is of course open-source so that anyone can contribute to it.
ENS
Ethereum Name Service (ENS) is a decentralized and open-source domain protocol built on the Ethereum blockchain. This protocol allows users to translate human-readable names like freedomtechnology.eth into machine-readable identifiers, such as Ethereum addresses for transfer of value, content hashes for file hosting and other metadata. This reduces the barrier to entry for new cryptocurrency users when sending or receiving funds, and using decentralized applications (dApps).
ENS offers a decentralized alternative to the traditional Domain Name
System (DNS), the main protocol for addressing and routing used on the
internet today. On top of the benefits of decentralization, ENS also
provided enhanced security, true self-sovereignty and of course
censorship resistance. Under the covers, ENS names are actually
non-fungible tokens (NFTs) that users can register, manage, renew and
trade. ENS can be utilized for a form of decentralized identity,
enabling users to link other information, such as email address, social
media profiles or their website. We will be using it for identifying and
routing our website to
freedomtechnology.eth.limo.
Setup
First, head over to fleek.xyz and take a read through their documentation and resources before signing up. Once signed up, head over to sites and add a new site from the list of templates. There are several different templates to choose from, including Nuxt, React and Vue boilerplates. For the sake of this example, we are going to use the Blogmaker by Vitalik template.
Once the Blogmaker template has been selected, click the "Deploy Template" button. You will then be guided through a wizard to deploy this template, with the first step being to select your Git provider of choice. Set the name for the repository and then go ahead and create and deploy this template.
Your git repository will be created, along with your website within the fleek platform, and the first build and deploy will be automatically kicked off. We can view the status and logs of this deployment from the Deploys tab. Once the site has been built and deployed, we should be given an on-fleek URL in which to access it.
Clone the git repository and explore the code. Blog posts are written using markup, practice writing a new blog post and deploy it by pushing to the remote repository and clicking Redeploy in fleek.
In the fleek platform, navigate to Settings > Domains. From here, we can connect any centralized DNS or decentralized ENS domains. After adding either, you will be required to add an CNAME (for subdomain) or ALIAS (for root domain) entry in DNS or a Content Hash in ENS. For ENS, the website will be accessible at yourname.eth.limo, for instance freedomtechnology.eth.limo. You will be required to pay a small amount of ethereum (gas) for any actions in ENS, since it it built on top of the Ethereum blockchain.
We have now built and deployed a simple blog website from a template to a decentralized webserver using IPFS!
