Sep 10, 2021
A Guide for How to build and host a .ETH website using IPFS on ENS
Disclaimer: I’m a web3 newbie and have cobbled enough knowledge for this project but may not have all the terminology or concepts correct. Feel free to leave a comment with any additional insight or corrections. I’ve created this article to help those that like me, may have considered doing this but thought it was too difficult.
Back in 2018 I wrote about the prospects of a rising movement towards a decentralized web. I was excited but new it was early days with much work ahead before it could become a reality. A little over 3 years later I have created a decentralized website using IPFS (InterPlanetary File System) on ENS (a decentralized naming service). I went down a huge rabbit hole and it took me a while to figure out how to do this. I wanted to provide the details for others to avoid my pitfalls and and follow a simple path.
I recently registered krynsky.eth using ENS (Ethereum Name Service). At first I thought registering my .eth name was just a domain I would use to host my decentralized website but actually it’s much more than that. I began to learn about all the things a .eth name could be used for. It was at this point I realized how little I knew about web3 and how much I still needed to learn.
Having a .eth address provides you a global username across all web3 services. Sure you can use it as a “domain name” to host a website but it can also be used as an Ethereum wallet address, a way to globally manage your pfp (profile picture) across all web3 services and in the future much more. A .eth name is actually an NFT! that appears in your OpenSea account. But I digress…
This post focuses on giving you the basic information to point your .eth name to a website using IPFS. In doing my research for this I learned about many of the basic building blocks to achieve this manually but my goal was to keep this process simple using no-code / low-code methods.
Prerequisites & Steps
- A wallet with Ethereum and a supported browser
- You need to have or buy Ethereum on Coinbase or other market and have about ~$50-$100 dollars worth to register your name (5+ character) depending on current Ethereum gas prices and how many years you want to register the name for.
- You then need to move your Ethereum to a wallet. Metamask is one of the most popular wallets with an extension for most browsers.
- Now you are ready to register your .eth name. Look no further than this step-by-step guide from Brantly Millegan which is what I used to register mine. His guide assumes you are using a Metamask enabled browser although the guide could be used with any browser that supports an Ethereum wallet.
- Now that you have your name it’s time to find a way to host your site using IPFS. You can do this by installing the IPFS desktop client and hosting your own IPFS node or using an IPFS file hosting service like Pinata. Good instructions to do this are here. Then the last step would be to update your ENS record to set the IPFS content has as explained here. I wanted keep it as quick and simple as possible so I used a service called Fleek which I felt combined steps and did most of the heavy lifting for you. Their free account is more than adequate for testing and building a simple site.
- So here are the steps:
- Setup a Github repository for your site
- Sign up for Fleek
- Then you want to follow the steps to create a new site. It’s a pretty straightforward process and they have clear documentation but basically you will connect with Github, choose your repository, and deploy to IPFS.
- At that point you should be able to see your site hosted on their service address and IPFS hash. Here’s mine.
- Now you just need to setup the reference to your .eth name. To do this you need to configure the IPFS hash on ENS for your name but they provide a wizard to do this and great documentation for you and make it seamless. Note: you will also need to pay an Ethereum gas fee for this configuration.
- After that process and propagation is completed you should be able to see your site resolve to your name. However, most browsers won’t resolve krynsky.eth and there is a workaround to append .link for your site to resolve a .eth name but it hasn’t been reliable for me and I found that the eth.limo alternative (hat tip to Validator) works much better.
- That’s it! You should now be able to view your site. Min site can be viewed at krynsky.eth.limo
Hopefully this guide helped you. Please leave any questions in the comments. I also welcome any feedback to clarify things. I’m extremely excited by all the prospects I’m beginning to comprehend as it relates to web3 and this new internet so many people are now working towards. I plan to continue my path of curiosity and learning to try and contribute to its mission.
Originally published at https://krynsky.com.
