showmehow.eth

Podcast Experiment with 1W3.io No-Code Builder Customization Options

2023-08-28T00:00:00Z

When first jumping into web3, my journey began with research into hosting websites on the blockchain. I figured there had to be a way to store content on the blockchain, and not rely on a single point of failure in a server somewhere. There are ways to achieve redundancy and availability using services through AWS or CDNs. It’s kind of overkill for what I was trying to accomplish in the event I forget to pay for a cloud server or if my hosting company goes away.

Of course there are still advantages to having a server run backend code, especially in the cases of extremely dynamic or complex websites. However, there are a lot of use cases for just running a static website. Doing so will allow you to deploy a site to distributed storage networks such as IPFS or Arweave and not depend on any hosting servers.

No-code buidlers for decentralized websites

Previously I wrote a guide on how to create a decentralized podcast on IPFS with an ENS name. After creating that proof of concept I wanted to experiment with creating a podcast with a no-code builder. Though my previous guide isn’t too technically involved, it still is not for the average user. For instance you have to install IPFS Desktop, or know how to upload files into IPFS and then reference those CIDs in your site’s file. You also have to edit a few lines of code, which may be intimidating to some. I wondered if there was a way to create a podcast using a no-code builder like 1W3 that specifically works with distributed storage networks like IPFS and Arweave.

It’s kind of a “hacky” workaround, but it works.

Go to the 1W3 Dashboard and login. Next, add an Image block.

Add the image for the first episode / song.

Upload an image you want displayed while the episode or song plays. This image will also be used in the podcast feed.

Add your audio file (.mp3)

Immediately below the Image block, add an Audio block.

Upload an .mp3 file. Be sure to give it a title.

Add a Paragraph block

This will be used for the episode / song description.

Enter in a description.

Here is what it should look like so far.

Add more Image, Audio, and Paragraph blocks.

Repeat the process. Each time adding an Image, Audio, and Paragraph block in that order.

I added 3 total images and audio files. Notice how it scrolls which doens’t look all that great. No worries, we will introduce a custom script to reformat things.

Customize with JS and CSS

Let’s fix the player. Click on Customizations in 1W3 then click on Advanced. Copy in the following custom CSS and custom JS.

`custom JS`

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Hide empty div elements at the top
    document.querySelectorAll('.col-12.my-2 .card').forEach(function (div) {
        if (!div.hasChildNodes()) {
            div.style.display = 'none';
        }
    });

    var slideshowContainer = document.createElement('div');
    slideshowContainer.id = 'slideshow-container';

    var pairs = [];
    var pair;
    var images = document.querySelectorAll('.col-12.my-2 img.img-fluid.rounded');
    var players = document.querySelectorAll('.col-12.my-2 audio');
    var paragraphs = document.querySelectorAll('.col-12.my-2 .card-body');

    if (images.length === players.length && images.length === paragraphs.length) {
        players.forEach(function (player, index) {
            pair = document.createElement('div');
            pair.classList.add('pair');
            pair.style.display = index === 0 ? 'block' : 'none';

            // Create and append the title as a <span>
            var title = document.createElement('span');
            title.innerText = player.getAttribute('title'); // Using audio title
            title.style.color = 'white';
            title.style.fontWeight = 'bold';

            // Append elements to the pair
            pair.appendChild(images[index].parentElement);
            pair.appendChild(player.parentElement);
            pair.appendChild(title); // Title below audio player, above paragraph
            pair.appendChild(paragraphs[index]);

            pairs.push(pair);
            slideshowContainer.appendChild(pair);
        });
    }

    var nextButton = document.createElement('button');
    nextButton.id = 'next-button';
    nextButton.innerHTML = 'Next';
    nextButton.onclick = function() { navigateSlide(1); };

    var prevButton = document.createElement('button');
    prevButton.id = 'prev-button';
    prevButton.innerHTML = 'Prev';
    prevButton.onclick = function() { navigateSlide(-1); };

    slideshowContainer.appendChild(prevButton);
    slideshowContainer.appendChild(nextButton);

    var downloadButton = document.createElement('button');
    downloadButton.id = 'download-button';
    var iconElem = document.createElement('i');
    iconElem.className = 'far fa-arrow-alt-circle-down';
    downloadButton.appendChild(iconElem);
    var textNode = document.createTextNode(' RSS');
    downloadButton.appendChild(textNode);
    downloadButton.className = 'rss-button';
    slideshowContainer.appendChild(downloadButton);

    document.getElementById('links').appendChild(slideshowContainer);

    downloadButton.onclick = generateRSS;

    function navigateSlide(direction) {
        var activeIndex = 0;
        pairs.forEach(function(pair, index) {
            if (pair.style.display === 'block') {
                activeIndex = index;
            }
        });
        var newIndex = (activeIndex + direction) % pairs.length;
        if (newIndex < 0) newIndex += pairs.length;

        pairs[activeIndex].style.display = 'none';
        pairs[newIndex].style.display = 'block';
    }

    function generateRSS(event) {
        event.preventDefault();

        const podcast = {
            title: "My Podcast Title",
            author: "Author Name",
            description: "Podcast Description",
        };

        let episodes = [];
        let imagesHref = [];
        let episodeDescriptions = [];
        let episodeTitles = [];

        for (let i = 0; i < players.length; i++) {
            const audioSrc = players[i].querySelector('source').src;
            const imageSrc = images[i].src;
            const episodeDescription = paragraphs[i].textContent.trim();
            const episodeTitle = players[i].getAttribute('title'); // Using audio title

            episodes.push(audioSrc);
            imagesHref.push(imageSrc);
            episodeDescriptions.push(episodeDescription);
            episodeTitles.push(episodeTitle);
        }

        const rssHeader = `<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"><channel><title>${podcast.title}</title><link>${window.location.href}</link><language>en</language><itunes:author>${podcast.author}</itunes:author><description>${podcast.description}</description>`;
        let rssItems = '';

        for (let i = 0; i < episodes.length; i++) {
            const episodeTitle = episodeTitles[i];
            const episodeDescription = episodeDescriptions[i];
            const pubDate = new Date().toUTCString();

            rssItems += `<item><title>${episodeTitle}</title><description>${episodeDescription}</description><enclosure url="${episodes[i]}" length="0" type="audio/mpeg" /><itunes:image href="${imagesHref[i]}" /><pubDate>${pubDate}</pubDate></item>`;
        }

        const rssFooter = `</channel></rss>`;
        const rss = new Blob([rssHeader + rssItems + rssFooter], { type: 'application/rss+xml' });

        const url = URL.createObjectURL(rss);
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style = "display: none";
        a.href = url;
        a.download = 'podcast.rss';
        a.click();
        window.URL.revokeObjectURL(url);
    }
});

</script>

`Custom CSS`

#next-button,
#prev-button {
    display: inline-block;
    margin: 10px 5px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #333;
    width: 150px;
    border-radius: 6px;
    height: auto;
    line-height: normal;
    text-align: center;
}

button,
.rss-button {
    border: 0;
    width: 150px;
    padding: 10px 20px;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    background: #7a807d;
    border-radius: 6px;
    height: auto;
    line-height: normal;
    text-align: center;
}

button:hover,
#next-button:hover,
#prev-button:hover {
    background: #7a807d;
    transform: none;
    animation: none;
}

/* Remove hover effect for the rss-button */
.rss-button:hover {
    background: #7a807d;
}

Preview the site and publish

As you can see we’ve used Javascript and some custom CSS styling to reformat the image, audio, and paragraph blocks into groupings. It also has a podcast feed generator for downloading of the podcast.RSS file based on decentralized content it finds.

Connect the site to an ENS name

Here’s a published example of what we’ve done above: 1w3podcast.showmehow.eth.limo

Future of web templates as NFTs

1W3 has recently begun experimenting with alowing creators to mint an NFT from a template they have designed. If another user owns that NFT template, they can use that in their own decentralized website design.

The first NFT has been published on 1W3 by our amazing community member, @CRVNE_eth.
🎉 He brilliantly designed the decentralized website, which has been converted into a template. Now, anyone holding the NFT can effortlessly use crvne.eth's stunning design to build their own… pic.twitter.com/j7h73b3wFR
— 1W3.eth (@1W3io) August 2, 2023

This is a really interesting idea to facilate growth of creator economies! Check out the GitHub repo for more this experiment.

Create a decentralized podcast on IPFS with an ENS name - Original proof of concept to create a decentralized podcast on IPFS.
Setting up a customizable decentralized blog with an ENS name and IPFS desktop - Set up a decentralized blog on IPFS similar to vitalik.eth’s blog.

A guide for issuing POAPs using an IYK badge and an ENS name

2023-08-02T00:00:00Z

Attendees of conferences are sometimes gifted an ENS physical badge that has an NFC chip. NFC stands for Near Field Communication. This technology makes it easy to share a POAP with others you meet in real like events. By simply holding a mobile device that is NFC capable, the POAP can automatically be issued. You can also showcase your online and on-chain persona in a single tap.

Connect your wallet to the IYK site

First head over to the IYK admin dashboard. You can find it here:

iyk.app/admin

Connect with the wallet that was given ownership of the IYK card. If youn received this from an ENS event, then the wallet you registered with to receive your card should be used to connect with.

Once you are connected to the site with your wallet, click “Login”. You will be asked to sign a gasless transaction on your wallet to allow you to access the administrator dashbaord of IYK.

Choose the IYK card you want to manage

Any IYK cards your wallet is the owner of will appear now for you to manage. You might own multiple cards if you gone to multiple events where ENS has given this cards away.

Create a POAP

It’s easy to share a POAP. The Proof of Attendance Protocol turns a moment like meeting frENS or attending an event into a collectible. To share a POAP collectible, first you’ll need to create one. Do this by heading over to the POAP drop admin panel. Here is the link:

drops.poap.xyz

Enter an email address and you’ll be sent a code to enter the site.

Give your POAP a title, description, and pick a beginning and end date for event. Also, fill in any other details like the event type, a website, or social platform links. Mark the visibility as “private” if you are just doing a test. Don’t forget to upload your artwork! When you’re done, click “Create Drop”.

Setup your mint links

You will need these to input into the IYK admin panel later.

Pick the number of mint links

Set the total amount of POAPs you think you might use at the event and submit your request.

Your request will be review by POAP, and you should soon receive an email with a text file attachment.

If you don’t receive the email, you can always log back into drops.poap.xyz and check the status of your POAP. You can also download the links.txt file from there.

Upload your linkx.txt file into IYK

Once your POAP has been approved and you receive your links.txt, you will need to upload these into the IYK admin panel. Click on the IYK card you want to associate the POAP with. Then click “Edit”

On the next screen click “Upload codes to add selectable events”

Confirm the upload of your links file.

In IYK go back to your list of cards. Click the one you want to associate with the newly created POAP. Change the event to the one you just created and click"Save"

You’ve successfully setup a new POAP which you can distribute using your IYK ENS name badge!

Create a decentralized podcast on IPFS with an ENS name

2023-07-20T00:00:00Z

In this example, we will learn how to create a decentralized podcast using ENS and IPFS. You’ll be able to store and stream your podcast content from IPFS. Because IPFS is peer to peer, the hosting for your podcast will utilize decentralized storage instead of traditional web server storage solutions. In this way your podcast will not have any bandwidth or monthly download limits. You will also be able to give your users a podcast subscription feed link, so that they can listen through podcast apps like Apple Podcast. When a new episode is uploaded the podcast player and feed will automatically detect the new episodes.

How does this work?

This is a project uses javascript, so it’s purely frontend code. Because of that, you can point your ENS name’s contenthash record to the location of the content on IPFS. The javascript looks at your IPFS directory using its contenthash saved in the ENS records. It then populates a list of episodes and episode descriptions it finds in the directory structure. As long as the episodes are uploaded using a naming convention like, episode1.mp3 and episode1.txt, the podcast content and data will show up in the web app audio player so your episodes can be played from a browser. Optionally you can generate an RSS podcast feed file which can be used to subscribe in a podcast player like Apple Podcast.

The script also works without using an ENS name, and instead can use an IPFS gateway you specify. However, it’s easier with an ENS name and the links structured better.

Working demo

Podcast Web Player - podcast.showmehow.eth

IPFS CID: QmQW316xfuubnkwfZXynh6MQVsYwsS4q1Jx2mheXTax72s

Podcast Subscription RSS Feed (you can add this to Apple Podcast to subscribe) - feed.podcast.showmehow.eth

IPFS CID: QmaR1NKFxqP3kN9SSKdbVj3p8revjh3qDAQLw9dvfGwqdA

Podcast RSS Feed Generator (works with ENS names or public IPFS gateways - podcast.showmehow.eth/generator

IPFS CID: QmZ9A88gpJvvutMcnMpMhxfJACXQhceyoXGN2g7a6GtyHS

GitHub: https://github.com/zadok7/ipfs-ens-podcast/

Setting up the podast content

First download the /mypodcast folder. You can find this on the GitHub repo. You can also download the zip file which is hosted on IPFS. This will have the example folder structure and files for the podcast episodes. We will be running IPFS Desktop to upload the modified /mypodcast folder. Additionally we’ll use Lighthouse.storage to upload the same files for duplicate pinning. This way the podcast does not rely on your local IPFS gateway (via IPFS Desktop) to stay up.

Adding your own episodes, images, and descriptions

On your local computer, go into the directory structure of /mypodcast. There you will see some folders which will contain your episode audio files, episode images, descriptions, and main podcast image and description.

Add the audio files (.mp3) for your episodes

Look in the folder /mypodcast/podcast_content/episodes. You’ll notice 3 episodes there. episode1.mp3, episode2.mp3 and episode3.mp3. Just replace these with your own audio files. You can even add episode4.mp3 5, etc. The script will end up querying all that exist (as long as this naming convention is followed).

Add the episode images

Look in the folder /mypodcast/podcast_content/episode_images. You’ll notice 3 image filers there. episode1.png, episode2.png and episode3.png. Just replace these with your image files. The script hard codes .png, so be sure to use that format. Of course the script could be updated to look for any image type.

Add the episode descriptions

Look in the folder /mypodcast/podcast_content/episode_descriptions. You’ll see three text files there; episode1.txt, episode2.txt, episode3.txt. Edit each of these with a text editor so they have the episode’s title, description, and release date. The screenshot below is of the content view in IPFS Desktop. You won’t be able to edit there so use any text editor or a development environment like VSCode.

Edit the main podcast image and description

Go into the folder the folder /mypodcast/podcast_content and replace podcast.png with your own podcast image. This will be displayed on the podcast web player and when you subscribe to the podcast in apps. We’ll generate the RSS subscription file/link later. Also, edit podcast.txt with your podcast’s title, description, and author.

Setting up an ENS name for your podcast

The podcast player is purely Javascript. We can use meta tags in the section of the code in index.html. Open this file in a text editor or VSCode and add your ENS name there.

Edit index.html and add your ENS name to the meta tag

Look for this line:

<meta name="ensName" content="podcast.showmehow.eth"> 

Replace podcast.showmehow.eth with the ENS subname you want to use for the podcast.

Optionally, use another ENS subname for the podcast subscription feed location

Look for this line:

<meta name="feedName" content="feed.podcast.showmehow.eth"> 

Replace feed.podcast.showmehow.eth with the ENS subname you will use to allow people to subscribe to your podcast. For instance https://feed.podcast.showmehow.eth.limo can be used to subscribe in Apple Podcast player. Since we are letting the script know we are using an ENS name, it will automatically use the .limo resolver to fetch the IPFS content.

Point your ENS name’s `contenthash` record to the IPFS location

First get the IPFS CID of the /mypodcast folder. You can easily find this in IPFS Desktop by right clicking on “mypodcast” then “Copy CID”. If you’re using an IPFS uploading service like Lighthouse or Pinata, you can easily find the CID there as well. Be sure that you’ve made all the changes to //mypodcast folder first before getting it’s CID hash. If you add or edit any files in /mypodcast the CID will change!

Use the ENS Manager App to point to the IPFS locations for the podcast web player and podcast RSS feed location for subscriptions.

Be sure the place ipfs:// before the CID you copied so it looks like this in the ENS records (but with your own CID):

ipfs://QmQW316xfuubnkwfZXynh6MQVsYwsS4q1Jx2mheXTax72s

If you need help editing the contenthash record, see the ENS Support Guide: Building a Website. You should now be able to visit your ENS name, in this example, podcast.showmehow.eth.limo in your browser and play your podcast episodes but by using your very own ENS name!

You can now play the decentrally hosted podcast on IPFS right in your browser. However, if we’ve setup an ENS name for the podcast feed and set the meta tag variable for feedName we need to generate a feed file. You can do this using the included generator in /mypodcast/generator/index.html. You can also reach the podcast feed file generator script from podcast.showmehow.eth/generator. Just input the ENS name you used for the meta tag variable ensName in index.html.

Once you download podcast.rss, simply upload this file to IPFS, then grab its CID like you did to get the CID of /mypodcast.

Now, go to the ENS Manager App and point the contenthash record to the podcast.rss IPFS hash.

Now in a podcast player like Apple Podcast you can subscribe to the podcast using feed.podcast.showmehow.eth.limo but of course with your very own ENS name.

Optional - Use an IPNS location instead of IPFS

If you don’t want to update your ENS content records each time you use IPFS Desktop to publish an IPNS location. For a guide on that, see Setting up a customizable decentralized blog with an ENS name and IPFS desktop.

Optional also - Use an IPFS public gateway instead of an ENS name and the .limo resolver

You can choose to use a public IPFS gateway you specify instead of an ENS name and the default .limo resolver. To do this, leave the meta tag variables of ensName and feedname empty. The <head> would look something like this:

<meta name="directoryHash" content="QmfHWotD3BNryxBQcbKxsZfvfRytGewo779C1iWScALQGJ">  <meta name="feedHash" content="QmaR1NKFxqP3kN9SSKdbVj3p8revjh3qDAQLw9dvfGwqdA">  <meta name="ensName" content="">  <meta name="feedName" content=""> 

For a more technical explanation on how this works see the GitHub repo.

Setting up a customizable decentralized blog with an ENS name and IPFS desktop.

2023-06-26T00:00:00Z

In this guide, we will build a simple, easily updatable, and customizable blog website. It will be hosted on IPFS and linked to an ENS name. For this guide we will be using the Eleventy static site generator. The generator will output the entire website into static files that can be uploaded and ran on IPFS as a decentralized website. Using a static site generator is not required, but makes it easier to develop and make changes to your blog. You could also look for static template online and use a code editor like VS Code to make changes to the static files.

Download the Eleventy base blog example

For now let’s use the static site generator and create a simple blog similar to vitalik.eth.limo.

We will use the Eleventy base blog starter template to get going. It’s not exactly the same layout or generator, if any, that Vitalik.eth uses. However, you can understand the concepts behind it. View a live demo of the simple blog site we will make in this proof of concept. There are other Eleventy starter templates you could try out with more features and design elements. We will keep it simple for the purposes of this guide.

Visit the Eleventy base blog starter and click the download link and unzip it to the folder you would like.

If you have git installed, you can also clone the repo using:

git clone https://github.com/11ty/eleventy-base-blog.git .

Make sure npm is installed

We’re going to need the package manager npm installed. This is cross platform so it should work on Windows, OSX, and Linux. It’s best to use a package manager to install npm to avoid permission issues. You can find more details on downloading and installing npm. Here you can find node.js installers for different operating systems. This is probably the most difficult step in the guide, but you can do it!

Install the Eleventy static site generator and sample blog template

First we want to run the command to install all the dependcies the Eleventy static site generator will need. After npm is installed on your system, navigate to where you unzipped the download. Then on the command line or terminal run:

npm install

Test what it looks like on a locally running server

Run this command to start up a local web server to see your blog running locally.

npx @11ty/eleventy --serve

You should now be able to visit the site running locally at https://localhost:8080.

Make some content changes

First modify the metadata for your site. For the base template we’re using you can find it here:

_data/metadata.js with your blog’s information

After, let’s add a new post. Create a new markdown file ending in .md and place it in the /content/blog folder. You can name it whatever as long as it ends in .md The “source” files for your blog will be in this /content folder. Browse around the file structure here and view the existing .md files and folders.

Images go in the "assets/images" folder in your working directory.

You can use the code snippet below in a markdown file named something like anewpost.md. The sample includes some of the metadata Eleventy will use(title, date, draft).

---
title: A new post
date: 2023-06-23
draft: false
---
This is a new post

Don’t forget to modify _includes/layouts/home.njk to remove the yellow metadata update reminder box. Go back to your browser and you will notice that the local web server will update with the changes you’ve made.

Build the site

You can hit Ctrl-C to stop the the local web server. Then let’s build the static version of the site we can upload to IPFS:

npx @11ty/eleventy

It will output to the _site folder of your working diretory. You can view the site by opening the index.html file in a web browser.

Host the files on IPFS using a local node

As you can see, now that the website is static there is no need for a web server to render the content. Everything is already rendered and optimized by the Eleventy static generator.

Now let’s copy the static files to IPFS so we can use that to host the website instead of a server. First download and install IPFS Desktop

Setup IPNS

Let’s edit some of the settings for IPFS Desktop. We will also be using IPNS pointers instead of using just IPFS CIDs. We’ll do this so we don’t need to spend Ethereum gas fees to update our ENS records each time we change the static website content. On IPFS Desktop go under settings and generate a new IPNS Key.

Also adjust the lifetime and republish settings.

Copy your static website folder to IPFS

On IPFS Desktop, click Files, then click Import and select the folder _site from your Eleventy working directory. The content will get added to iPFS and your local node will share it with other peers.

Find the CID of the IPFS content

Click the ... menu and select Inspect. Notate the CID for the IPFS content location as we may use this later with a pinning service for redundancy.

You can view the content through the browser using your own gateway, or a public one.

Publish the IPFS content to IPNS

In IPFS Desktop, under Settings click Publish to IPNS

Then, copy the IPNS location from the Settings page of IPFS Desktop.

You can now open up a browser and visit:

http://k51qzi5uqu5dkfmv1lofqjb4twoyrz95ccnzl8k37h0804d3zarb250zz9p6ef.ipns.localhost:8081/

Replace k51qzi... with your own IPNS hash you copied from IPFS Desktop.

Store the decentralized content hash record for your ENS name

If we didn’t use IPNS, we’d need to update the ENS records each time. This is because when you upload content to IPFS, the hash is generated from the content itself. So for instance if users uploaded the same exact file, then that file’s(or directory) IPFS CID (eg. QmTBa7...) would be exactly the same. Since our _site folder will have different data each time we generate the site, it’s not going to be the same IPFS CID. To solve this we’re going to use an IPNS hash there which will point to the newest IPFS CID which we update using our local node running on IPFS Desktop.

Log into the ENS Manager App and click Edit Profile. Click on Website, then the IPFS button.

Copy in the IPNS location into the content record for your ENS name.

It should be in this format: ipns://k51qzi5.... Approve the transaction with your connected wallet.

Use the .LIMO resolver to view your decentralized website

Once your ENS name’s content record is set, you can use a resolver like .limo to render the site on any browser. Simply append .limo to the end of the ENS name that has a content record set. So for instance this blog can be reached at, showmehow.eth.limo. The .limo resolver uses a gateway to fetch the content hash from the ENS records.

Pin the IPFS CID externally

You can pin the IPFS CID to an external pinning service like Pinata. This provides some redundancy and higher data speeds by utilizing a faster node compared to the locally running node with IPFS Desktop. As visitors access your site and nodes retrieve the IPFS data, the caching of recent content fetches by nodes on the IPFS network enables faster delivery of the data.

An alternative pinning service is Lighthouse.storage. You can upload the same exact _site folder there, and your IPFS CID should match the one on your IPFS Desktop. This is because it is the same exact folder, identical bit by bit. The difference is that the content is not only pinned to your local IPFS nodenow, but also through a third party IPFS service like Lighthouse. Take a look at the IPFS CID in Lighthouse.

Compare that to the IPFS CID you uploaded the same _site folder within IPFS Desktop.

Upload a new version of the static site

To change your website content, delete the _site folder from IPFS Desktop. Then from the command line you will need to rebuild the _site folder by running:

npx @11ty/eleventy

After, import the new _site folder into your Files on IPFS Desktop. You will notice the IPFS CID has changed because the file contents have as well. Don’t forget to publish to IPNS again on IPFS Desktop. This will update the IPNS pointer to your new IPFS CID.

No updating of ENS records is necessary. Using the .limo resolver after your ENS name should soon show the new content. Remember to pin or upload the new _site folder to other nodes like Pinata or Lighthouse. This way your data persistance doesn’t rely on a single IPFS node for content pinning.

Decentralized Website Concepts and Tools

2023-06-11T00:00:00Z

Decentralized websites function by having their content separated from a central server. Instead, the content is stored in a decentralized way on the blockchain. The InterPlanetary File System (IPFS) is commonly used to store decentralized website data. IPFS is a peer-to-peer protocol and facilitates the decentralized storing and sharing of data, ensuring it could be accessible even if the original publisher of the content goes offline. It functions much like peer-to-peer torrent networks, distributing data across numerous nodes, eliminating single-point failures.

How does a decentralized website work on IPFS?

With IPFS, each node (user) in the network is both a client and a server, which contrasts with the traditional client-server model where data is hosted on centralized servers. Each file and all of the blocks within it are given a unique fingerprint called a cryptographic hash. When you look up a file on IPFS, you’re asking the network to find nodes that are storing the content behind that file’s hash. It’s important to note that IPFS removes any data that is unused. However, IPFS hashes can be pinned by nodes so that they are always available. IPFS locations are referenced via a content identifier (CID), which is a unique cryptographic hash assigned to the content that gets posted to the IPFS network.

How can you point a DNS domain(eg .com) to decentralized content on IPFS?

You can use a traditional domain name (.com, .org, etc.), referencing IPFS content using DNSLink text records. This will map your domain name to the IPFS content, using a gateway that is able to resolve the decentralized content and render it in the browser. In traditional web hosting, this is performed by a web server. DNS is the Internet infrastructure also known as the domain names system, which relies on centralized architecture to map domain names to servers. In the world of blockchain, you can use ENS, or the Ethereum Name Service to save a long CID hash to visit a decentralized content location, you could attach that CID to an ENS name. ENS names are human-readable blockchain names that can point to any location you wish including the content hashes using IPFS locations.

One way to visit a decentralized website can be achieved through DNSLink, which would work to point to a normal domain name like a .com, so that a website visitors will see the decentralized content rendered when visiting the .com. In this way the content is stored decentralized, but the domain you use to reach the content would rely on centralized architecture like DNS and the domain name itself, for instance a .com name.

For a guide on DNSLink, see: Host in Parallel DNS and ENS static content from IPFS

Using an ENS name for a decentralized website

But what if you have an ENS name? ENS .eth names are owned on the blockchain, and work via smart contracts. Because Ethereum is the blockchain that ENS is built on top of, you can use an ENS name to point to blockchain content. One way to do this is to visit the ENS Manager App and view the dWeb content record of the name to see where the IPFS content location is. You could then copy the IPFS CID to any IPFS gateway service, which reads content on IPFS, and view the website.

Though it’s great that the IPFS hash can be stored immutably on a record for the ENS name, copying and pasting the hash value into an IPFS gateway isn’t ideal. There are a few browsers that you can type in name.eth and it will visit the decentralized website by automatically reading the IPFS hash. Two popular browsers that perform this are Brave and Opera. Browsers that also have Metamask installed can view .eth ENS name’s website content directly in the browser.

Finally, one of the easiest ways is to simply attach .limo to the end of the ENS name and it will resolve in the browser the website content that is stored on IPFS, that is read from your ENS records. For instance, Vitalik’s blog, the founder of Ethereum is here: vitalik.eth.limo

How can I store the location of decentralized content in the ENS content record?

Storing content on a decentralized website involves uploading the content on networks like IPFS and having a pinning service ensure the content stays up. Popular pinning services are Pinata, Filebase, or your own node of IPFS you can run on your local computer. Content is added to the IPFS network, while pinning services ensure the data remains available by preserving it across multiple nodes. Within ENS, you can also use Swarm, Onion, Skynet, and Arweave locations. You can save the decentralized content record using the ENS Manager App

For help on adding the content hash to your ENS records, see the support docs: Configure the ENS name content hash record

How do you build a simple decentralized website?

Building a decentralized website involves creating frontend code locally and then uploading it to IPFS. The content is then “pinned” to ensure its persistence on the network if using IPFS. You could also use website builders like 1w3, which are tailored for creating decentralized sites. To do that, you would simply log into the project’s dApp with your wallet. 1W3 is great for building decentralized linktr.ee type websites, along with a few other website templates using just your ENS name. The project takes care of uploading and pinning the content to IPFS automatically.

Redirecting an ENS name to an existing domain

Maybe you have a regular .com website for example, and haven’t built a decentralized version of it yet. One thing you can do if you have an ENS name is to just redirect it to your website address. This way if someone goes to mycooltshirts.eth.limo, the content record could point to a redirect file stored on IPFS, that would navigate the user to your existing website. You can visit ENSRedirect to set this up.

How do you build a custom decentralized website?

In order to have a functioning website stored on IPFS, you will need to have a static version available. This means that the website won’t be dynamic in the sense that the website content can change through user interactions. For instance, a user forum won’t make for a good static website since it always changes with new posts and comments. It is possible to run decentralized user forum with the frontend on IPFS, and the dynamic data can be read or updated using the blockchain rather than centralized data servers. This process is out of scope for this article.

One solution to create a static website is to use static site generators like Gatsby, Hugo, Jekyll, or Eleventy. These generators will allow you to develop a website locally, and then it will generate the entire static website for you which you can then upload to IPFS.

Without using a generator, you can also just download a static template and edit the files in the downloaded folder. You can create a static website easily by downloading BootstrapMade Templates. From there, just edit the website files and upload the folder to IPFS.

For a guide on using IPFS desktop to publish static content to IPFS, see: Setting up a customizable decentralized blog with an ENS name and IPFS desktop

Mapping of DNS vs ENS

2023-04-20T00:00:00Z

In the traditional DNS system, the DNS root zone file is managed by the Internet Assigned Numbers Authority (IANA), which is part of the Internet Corporation for Assigned Names and Numbers (ICANN).

IANA is responsible for coordinating the assignment of unique identifiers on the Internet, including domain names to IP addresses mapping. The entire root zone file that IANA oversees can be viewed and downloaded here: https://www.iana.org/domains/root/files

Depending on DNS caching, ie. if the ISP already knows where to find the authoritative nameservers for a website, the DNS query might not need to check against the root zone file. The important thing to note here is that the root zone file is at the highest level of the Domain Name System architecture, and that zone file mapping is maintained by a single entity (IANA).

Blockchain and Immutable Data Storage on the Blockchain

On the contrary, instead of relying on a single organization’s authority to maintain the truth of mapping, the blockchain is a decentralized global database of information whose state is agreed on by the entire blockchain network.

This is possible because the storage of this data is distributed among all of the validator nodes that secure the entire Ethereum Virtual Machine blockchain. The blockchain data is stored in an immutable ledger. This means ones the transactions are added to the blockchain, they cannot be reversed, altered or removed.

Transaction data can be queried by services like Etherscan.io. Below is an example of recent transactions found on Etherscan for wallets that have interacted with the ETH Registrar Controller which is the smart contract responsible for registering ENS names.

Data security for the Ethereum blockchain is afforded by network consensus, where multiple nodes must agree on the state of the data. In addition, access to update blockchain data is cryptographically secured.

This means that only the authorized party with the cryptographic private keys are allowed to update or make changes to the data stored on the blockchain. In other words, only the user with the cryptographic private keys is allowed to make updates to the data stored on the blockchain associated with the wallet address they own.

There are no credentials stored on central databases, SSO(Single sign on), or email logins to change data on the blockchain. Only a wallet can approve a transaction, which only that user should know the private keys for.

The combination of these factors make the blockchain more secure compared to traditional centralized infrastructure, where a single point of failure can lead to data breaches and other security issues.

Adding or Updating Blockchain Data

In order to add or change data on the blockchain, a user needs to interact with the smart contract(s) by cryptographic signing requests using their wallet. Since users own their own private key data, only they can authorize the transaction to be added to the blockchain.

The smart contract is available globally because the blockchain is a global ledger of data that can contain more than data, but code that runs as programs in the form of these smart contracts.

This means that many different dApps can be built to allow users to interact with the blockchain using their own wallets, relying on the user owning their own private keys in order to make those transactions. Private keys should never be shared, or stored in an insecure manner.

To learn about how a front end is used to edit blockchain data, the ENS Manager App is a great example, see: Set an ENS record

Decentralized Apps

A dApp is also known as a Decentralized Application. These applications are built to interact with the blockchain. Because the data storage dApps interact with is the blockchain itself, it is by design transparent, secure, and autonomous, with no central authority controlling the user’s ability to update their own data.

For instance, a user could not be blocked, or worse, have their email address hacked and unauthorized access gained to reconfigure what Ethereum blockchain address their ENS name points to. That can only be accessed through having the private keys of the cryptographic wallet that has permission to update such record.

A way to understand this concept is in the case of NFT(non-fungible token) marketplaces. NFTs are digital items stored on the blockchain. It’s important to understand that digital tokens like NFTs or crypto currency do not physically reside within a crypto wallet.

Instead, the wallet’s address is noted in the public blockchain ledger as being the owner of that NFT. Because the NFT is not inside the wallet itself, but rather the blockchain, there can be many apps or interfaces that are able to interact with the token.

An ERC-721 NFT exists on the Ethereum blockchain and would be able to appear on any market without the need to “add” it to each market. This is because the data (or database) is stored within the global EVM’s blockchain.

Requirements for DNS to ENS Integration

2023-04-20T00:00:00Z

There are only two steps required to prepare a DNS domain for usage within the blockchain leveraging the ENS protocol. These steps are relatively straightforward for most users who may already be familiar with adding DNS records to their legacy domain names.

Two Required Steps for DNS to ENS

Enable DNSSEC for the DNS domain

Create a domain verification record (TXT record) set to an Ethereum wallet address

For detailed instructions see: DNS + ENS Guide - Connect a DNS name to the ENS Protocol

Fees to ENS-enable a DNS Domain

There are no registration fees to enable a DNS domain for use on the blockchain with the ENS protocol. DNS domains that have been ENS-enabled have available to them ENS functionality such as secure & decentralized records, the ability to set multiple cryptocurrency payment addresses, unlimited subname creation for different identities, avatar support, and to assign the name as the Primary web3 username/identity.

To learn more about the differences between ENS-enabled domains names and .eth names, see Imported DNS Compared to ENS Native .eth Name

Overview of DNS to ENS

2023-04-20T00:00:00Z

Traditional DNS domains do not work natively within the blockchain, however it is possible to “supercharge” a DNS domain name using the Ethereum Name Service(ENS) protocol as a bridge.

In this article and others on this site we’ll cover some basics of the Ethereum blockchain, smart contracts, current use cases of DNS within the blockchain, and how traditional domain name owners utilize this functionality today.

If you would like to get started with DNS to ENS integration, you may skip to this set of guides: DNS to ENS Guides

DNS Compatibility with Blockchain

Traditional DNS domain names (e.g. .com, .org, .xyz etc…) are not natively be compatible with the blockchain. This is because the blockchain is built upon decentralized architecture whereas DNS relies upon centralized services and data storage.

Enabling forward-compatibility of domain names to the blockchain has many fascinating and practical use cases. The ENS protocol has been developing its own infrastructure that ensures legacy DNS domain names will forward with today’s modern blockchain using the Ethereum ecosystem.

DNS domain owners can have the added benefit of blockchain functionality, without sacrificing how their domain names currently function on the Internet.

To learn about current DNS to ENS use cases, see: DNS + ENS Use Case Examples

Imported DNS Compared to ENS Native .eth Name

2023-04-20T00:00:00Z

The following is a comparison of native ENS .eth names with DNS names that have been imported to ENS protocol. By utilizing the ENS protocol, it’s possible to extend DNS functionality into the blockchain. There are however some important differences that should be noted.

[DNS to ENS] VS [ENS .eth Names]

Functionality	DNS to ENS	ENS .eth
Expires	No	Yes
Registration fee	No	Yes
Relies on DNS	Yes	No
Create subnames	Yes	Yes
Fuse permissions	No	Yes
Tradeable (NFTs)	No	Yes
Blockhain Record Storage	Yes	Yes
Resolve dWeb content	Yes	Yes
Universal Avatar (PFP)	Yes	Yes
Use as Web3 Identity	Yes	Yes
Point to multiple coins	Yes	Yes

There may be some exceptions with TLDs (.art, .box etc) that more deepy integrate with ENS. The architecture is different than an imported DNS name. For information on importing a DNS name into ENS see the support doc: Claim your DNS name

Expires - DNS names imported into ENS have no expiration date.
Regisration fee - 2LD (e.g. name.eth) names have a yearly registration fee. DNS names claimed within ENS do not have any registration fees.
Relies on DNS - Claiming a DNS name within the ENS protocol relies on a DNSSEC proof of domain ownership and a DNS TXT record to verify the Controlling wallet of the DNS name within ENS and the blockchain. Proof of ownership of the DNS name on ENS could be changed if the DNS provider is changed, or if the DNS domain expires and is registered by another. ENS .eth names do not rely on DNS for their functionality or existence.
Fuse permissions - DNS names within ENS will not be able to use advanced permissions with the NameWrapper Contract. To note, this is technically possible, but because the imported DNS name is not “unruggable”, there’s no way to guarantee users will permissionlessly own their names.
Create subnames - Both ENS .eth names and DNS imported ENS names can create unlimited subnames. There are no registration fees for either.
Tradeable (NFTs) - Only ENS .eth and subnames will have the ability to be traded as trustless (unruggable) NFT (Non-fungible Token).A DNS name imported into ENS would rely on DNS records to prove ownership and cannot be trustlessly issued.
Blockhain Record Storage - DNS names imported to ENS will have their record storage data resolved from the blockchain just as ENS .eth records do.
Resolve dWeb content - DNS names within ENS are able to store a dWeb content hash record, the same record is availble to ENS .eth names.
Universal Avatar (PFP) - DNS to ENS, and ENS .eth names are able to choose an avatar or profile picture that will appear across the Internet.
Use as Web3 Identity - A DNS name imported into ENS can use set a Primary name which allows an Ethereum wallet to display as your ENS name instead of the long alphanumeric string. Any ENS .eth name can also be set as a Primary name, inlcuding subnames of the parent .eth 2LD (e.g. user1.name.eth).
Point to multiple coins - ENS records can point to blockchain addresses outside of Ethereum like Bitcoin, LTC, Polygon, and more. See supported cryptocurrency addresses.

DNS and ENS Further Development

2023-04-20T00:00:00Z

The ENS protocol continues to embrace forward compatibility with DNS to allow for wider web3 and blockchain adoption. Enabling a DNS domain to be used within the ENS protocol has seen considerable development changes since first introduced in 2017.

Current DNS to ENS Process

Currently importing a DNS name for blockchain usage through the ENS protocol requires a significant amount of gas to add the data to the blockchain. Gas is paid in Ether which is Ethereum’s native cryptocurrency token. One primary function of the token is that it is used for paying transaction fees to node validators to compute and add new data to the blockchain. Since the ENS protocol is built for public good usage, there will never be registration fees to use the ENS protocol with DNS domains.

Gasless DNS to ENS Integration

Currently, in order to use a DNS domain within the ENS protocol a DNSSEC proof must be submitted to the DNSSEC Oracle smart contract. The computational requirements are heavy to submit the proof of ownership of the DNS domain which results in users having to pay a large amount of gas to the Ethereum network to make their DNS domain compatible with the blockchain through ENS.

offchain DNS Registrar support will soon be available to DNS domain owners. Instead of submitting DNSSEC proofs to the blockchain, a DNS owner can simply set a TXT record that points to an offchain resolver contract using ENSIP-10 Wildcard Resolution. The result will be that a DNS domain owner will no longer need to pay gas fees to the Ethereum network to enable their DNS domain within the ENS protocol. Instead, the resolver address will be specified within a DNS TXT record containing its location. The result is that DNS domain name owners will save hundreds in transactional gas fees, while still leveraging their web2 domain within the blockchain.

Gasless ENS Records

Once offchain DNS registration permits gasless integration of DNS domains within ENS, record creation will continue to require Ethereum gas fees since the records will be set up on chain. Further implementation work is being done to allow secure offchain record retrieval using CCIP-read. An advanced resolver is being developed that will be able to resolve a DNS to ENS name’s records, entirely by its DNS text records. As a result, setting ENS records for ENS enabled DNS domains will not cost any gas since those records will be able to be resolved entirely through DNS TXT records.

DNS to ENS Import Guide - A guide to enable DNS domains in ENS.
DNS offchain Subname Issuance - Coinbase Wallet (cb.id) - A look at Coinbase integration with ENS
ENS Documentation - DNS Registrar - About the DNS Registrar.
Ethereum Gas - What is gas?
ENSIP-10: Wildcard Resolution - A method to support wildcard resolution of ENS names.
EIP-3668: CCIP Read: Secure offchain data retrieval

showmehow.eth

Podcast Experiment with 1W3.io No-Code Builder Customization Options

No-code buidlers for decentralized websites

Login to 1W3 and add some blocks

Add the image for the first episode / song.

Add your audio file (.mp3)

Add a Paragraph block

Add more Image, Audio, and Paragraph blocks.

Customize with JS and CSS

custom JS

Custom CSS

Preview the site and publish

Future of web templates as NFTs

Related

A guide for issuing POAPs using an IYK badge and an ENS name

Connect your wallet to the IYK site

Login to the IYK Dashboard

Choose the IYK card you want to manage

Create a POAP

Setup your mint links

Pick the number of mint links

Upload your linkx.txt file into IYK

Create a decentralized podcast on IPFS with an ENS name

How does this work?

Working demo

Setting up the podast content

Adding your own episodes, images, and descriptions

Add the audio files (.mp3) for your episodes

Add the episode images

Add the episode descriptions

Edit the main podcast image and description

Setting up an ENS name for your podcast

Edit index.html and add your ENS name to the meta tag

Optionally, use another ENS subname for the podcast subscription feed location

Point your ENS name’s contenthash record to the IPFS location

Optional - Use an IPNS location instead of IPFS

Optional also - Use an IPFS public gateway instead of an ENS name and the .limo resolver

Related

Setting up a customizable decentralized blog with an ENS name and IPFS desktop.

Download the Eleventy base blog example

Make sure npm is installed

Install the Eleventy static site generator and sample blog template

Test what it looks like on a locally running server

Make some content changes

Build the site

Host the files on IPFS using a local node

Setup IPNS

Copy your static website folder to IPFS

Find the CID of the IPFS content

Publish the IPFS content to IPNS

Store the decentralized content hash record for your ENS name

Use the .LIMO resolver to view your decentralized website

Pin the IPFS CID externally

Upload a new version of the static site

Related

Decentralized Website Concepts and Tools

How does a decentralized website work on IPFS?

How can you point a DNS domain(eg .com) to decentralized content on IPFS?

Using an ENS name for a decentralized website

How can I store the location of decentralized content in the ENS content record?

How do you build a simple decentralized website?

Redirecting an ENS name to an existing domain

How do you build a custom decentralized website?

Mapping of DNS vs ENS

Blockchain and Immutable Data Storage on the Blockchain

Adding or Updating Blockchain Data

Decentralized Apps

Related

Requirements for DNS to ENS Integration

Two Required Steps for DNS to ENS

Fees to ENS-enable a DNS Domain

Related

Overview of DNS to ENS

DNS Compatibility with Blockchain

Related

Imported DNS Compared to ENS Native .eth Name

[DNS to ENS] VS [ENS .eth Names]

Related

DNS and ENS Further Development

Current DNS to ENS Process

`custom JS`

`Custom CSS`

Point your ENS name’s `contenthash` record to the IPFS location