A guest article by zaccary.eth, the founder and editor of softcover.eth. He’s a fantastic example of how a non-tech person can set up a .eth website. Thanks for contributing this article to Esteroids, Zaccary.
If you’re exposed even a little bit to cryptocurrencies, you’ll have gotten wind of the ENS airdrop in early November. While it is too late for you to do anything that can get you into that airdrop, it’s not too late to get involved in ENS for the first time.
When you register an ENS name you basically get a decentralized ID that has plenty of use cases ranging from a future metaverse ID to an NFT artist tag.
I, for example, connected my ENS name, zaccary.eth, to my Ethereum wallet address. Now you can tip me, if this piece has been helpful, by sending tokens to zaccary.eth.
The use case this article focuses on is hosting a decentralized website accessible through your ENS domain. I do it myself at softcover.eth.
The core advantage of a decentralized website is that your domain registrar or website host can’t seize or take down your website. As they’re decentralized across the Ethereum and IPFS networks, only you, the owner of the domain, can take your site down.
So how do you create your own decentralized website? Here’s how to do that in 10 easy steps.
1. Register your ENS domain.
Registering your ENS domain is easy. Just head to app.ens.domains, search for a domain that you like, and buy it. Domains typically cost USD$5 per year, though short ones with 3–4 letters cost a bit more.
Note: this article does assume that you have a wallet connected to your browser and some Ethereum in that wallet to buy the domain. If you need a wallet, we recommend MetaMask.
2. Set your new ENS domain as the primary name for your wallet.
3. Write a static HTML website.
There are several ways to do that. If you’re not a tech person, like me, you can write a simple website with a combination of HTML, CSS, and Javascript. That’s how I built Softcover, for example.
If you’re a more experienced web developer, you could try a static website framework like Hugo or Jekyll. Or, if you’re a pro web developer, you could create a React website, but remember — it must be static!
Find inspiration over at esteroids.eth directory of decentralized websites — or dWebsites for short.
4. Upload your HTML file to Github. Github’s first-timer walkthrough is super helpful if you’ve never used the site, or any kind of code repository, before — like I hadn’t.
5. Sign up to Fleek. Fleek is where you’ll connect your Github repository so that updates to your HTML code automatically deploy to the IPFS network.
6. Once you’ve connected your Fleek account, get your IPFS hash and head back to your ENS domain info.
7. There (in the ENS domain info), edit your Content record to point to that IPFS hash.
8. While you’re there (still, the ENS domain info), update your URL to point to your new .eth website address — either as ‘yourprimaryname.eth.limo’ or ‘yourprimaryname.eth.link’.
Find out more about the differences between .limo and .link here.
Make sure to do steps 7 & 8 at the same time as updating each separately counts an individual transaction so you’ll have to pay gas fees twice if you edit them one at a time.
9. Save your edits. This requires an Ethereum transaction which may be expensive, depends on gas price.
10. Now head to ‘yourprimaryname.eth.link/limo’ and check out your cool new .ETH website.
What next?
Expect to appear in an @dwebsitesbot rundown on Twitter in the week after your launch. This bot is run by Esteroids, a decentralized web search engine. They work closely with the ENS DAO to provide common web services to web3.
Note that each time you update your site’s code and go to push it live via Github, you’ll have to take the new IPFS hash from Fleek and update your ENS content record. That means it will cost gas fees each time unless you can work out an IPNS workaround.
Esteroids are also working on an IPNS workaround — which Softcover now runs on. You can find out more about at https://dwebservices.xyz. There’s no formal beta period so just email them to find out how to join the service.
Then, show it off! Your ‘primaryname.eth.link/limo’ link will work natively in Brave, Safari, Firefox, and — only recently — Chrome.
