Blog Home
>
>
How To Link Your ENS Domain to your IPFS Website
How To Link Your ENS Domain to your IPFS Website

How To Link Your ENS Domain to your IPFS Website

3
Min read
How To Link Your ENS Domain to your IPFS Website

What does it really mean to ‘decentralize’ your website? Many of you are familiar with the term, but what does it mean for a page that people access through a standard HTTP browser?

In a word, control. Control over the decision to let your website persist. Control over who can and cannot access it. And control over its secure existence, rather than waiting for yet another high-profile server hack that could compromise your hard work and sensitive data.

If you’ve already successfully deployed your website to IPFS and are ready to take it a step further, this tutorial will show you how to resolve your ENS domain to your website CID, so that registering domains on platforms like GoDaddy or Google Domains become a thing of the past.

First, let’s talk about what ENS is and why it matters.

What is ENS?

ENS (Ethereum Name Service) is your web3 username. It’s the web3 equivalent to DNS (Domain Name System), which is the standard for how all browsers load websites. ENS lives entirely on the Ethereum blockchain as a decentralized service to address resources.

Just as DNS converts human-readable names to IP addresses, ENS converts human-readable names to Ethereum addresses. And just as IPFS solves some of the key pain points from HTTP, ENS aims to resolve some of DNS’s problems, such as man-in-the-middle attacks and scalability.

To get and use your own ENS, you’ll need to sign a unique smart contract, and set resolver records to them to link to your wallet address. Here’s everything else you’ll need for this tutorial:

Prerequisites

  • A Pinata account
  • An ENS Domain (get one here)
  • A Browser Wallet (e.g. Metamask)
  • A wallet with some ETH available
  • A website deployed on IPFS via Pinata (via this tutorial)

Step-by-Step Guide

Your ENS Dashboard

Let's get to linking. To get all nice and settled in, let’s first take a closer look your ENS dashboard 🕶️.

Head over to <span class="code-inline">https://app.ens.domains/</span> and connect the wallet with your ENS domain.

Once connected, click on ‘Profile’ on the avatar dropdown menu.

On your ENS Profile dashboard, you’ll be able to see all the below tabs. Click into ‘Records’, and navigate to the ‘Other’ tab.

Populate the Content Hash Field

Alright, Pinnie time. Go ahead and log into your Pinata account.

From your dashboard, click into your pinned website folder, and copy the IPFS URL. The format should be like this:

https://[your-gateway]/ipfs/[your-cid]

Copy that URL and go over to your ENS account dashboard. Paste it into the ‘Content Hash’ field and click ‘Save’.

Confirm Details

A pop-up modal will appear, prompting you to double check your details before confirming in your wallet. Make sure to double check that you’ve got the right wallet and the right URL.

Click ‘Open Wallet’ and sign the transaction (you will need to pay a small fee to make the change). Once complete, you can now navigate to <span class="code-inline">[your-ens].ens/</span> and there you will see your CID content 😎.

That’s it! Now you have a fully decentralized website — deployed on IPFS, and named with a decentralized name service 🏄🏼‍♀️.

Next Steps

From here, the possibilities are endless. You can start sharing your website to your audience, or, if you’re like me, you can take what you’ve learned and create another, way more complicated website that scratches that insatiable itch of being a builder.

The benefits of building and deploying your website on IPFS are many. If you're interested in knowing more about why it's such a big deal, check out this article by Cynthia Taylor to read more on the problems with DNS. And if you need a refresher on how to deploy your IPFS website, open up the main tutorial in a new tab to help you along as you build.

With Pinata and ENS, you can add your own creative flavor with your tools of choice. If you have any doubts or questions along the way, feel free to reach out to our team on Twitter, Discord, Threads — or whichever social platform takes your fancy 🤌🏼.

Happy pinning!

3
MIN READ

H1 - THE RICH TEXT
EXAMPLE STARTS HERE

H2 - Enabling Widespread Adoption for Music NFTs

paragraph — The first thing the music industry needs is more exposure. For artists, listeners and yeah, the labels. Even with the use cases mentioned above, the majority of the music industry still sees NFTs as a novelty rather than a legitimate way to run a business. We see a future where the experience is built and monetized on the blockchain, with labels taking part of the experience, as well.

Second, there needs to be a big jump in user experience. Listeners know what to expect with Spotify and Apple Music: a smooth, intuitive experience that lets them listen to Lil Nas X with just a few clicks. Web3 platforms aren’t quite there. Music NFTs and related premium content require extra steps that most people don’t yet have an appetite for.

H3 - How Could Music NFTs Save Artists?

paragraph — Musician Daniel Allan spent months building a relationship with the NFT community and raised 50 ETH to fund his new album, Overstimulated. Companies like Audius and artists like Vérité's, who raised $90,000 in an NFT launch, are at the forefront of exploring new ways to get paid. Avenged Sevenfold launched an NFT collection called "Deathbats Club" with 10,000 items that grants holders access to benefits such as meet and greets at shows, lifetime free tickets, limited edition merchandise, and more.

Photo of ETHDenver 2022 with Pinata employees
This can also be styled!! Image caption.

H4 - Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

H5 — How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

LINK — This is how a link looks like. Please provide normal & hover state (if different than this)

  • This will be bullet points
  • Numbered list is the same but with numbers
  • It has a margin-left applied
  1. Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
  2. Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
  3. Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
QUOTE — Everyone is obsessed with making money and seeking alpha, which does a disservice to what [NFTs] can actually do. We have been instructing many bands that NFTs are a ticket for access to an exclusive club.” - M. Shadows, Avenged Sevenfold’s lead singer.