I’m over the moon about this. Last night I minted a website on Cardano. Well, technically, I only needed to add the link to the main article, Blockchain For Noobs, in the FT metadata. It’s an HTML document I wrote, illustrated, and coded myself.
And what makes it a website instead of a web page is that it’s linked to another HTML document — Other Work — in the same IPFS folder.
I didn’t know if this was going to work and tried not to get too excited prematurely. And I failed miserably. I’ve always loved the web as a medium for expression. And for the last three or four weeks, I’ve been working on a way to create HTML-based NFTs and FTs so that I can present more complex forms of content than just an image, with mobile-first design flexibility.
There were a few constraints to work within. I made mistakes and had some minting errors. But after a few attempts and some guidance from Peter, the developer behind Cardano Tools and [EURO] Pool, I was able to mint my first HTML document. (Thank you, Peter!)
what the token is
It’s a 2k-word explainer article called Blockchain for Noobs that I wrote a few months ago to teach myself about the technology. And to send with my cover letter when applying for freelance jobs, because I wanted to write in the space.
This article started me off on a path that led to making NFTs and producing more work than I have in a long time. It’s the reason I’m a proud member of the Cardano community and have met the amazing people I know today. I used it to get a few writing gigs, too. But the best thing it did was get me here where I have tools and resources to do things with my work I didn’t imagine were possible before.
It’s never been published until now.
I minted this as a fungible token in a quantity of 10 million and sent 5 million to the Alexandria Project library. It’s there for the influx of new users to help them understand the underlying technology and some basics about how to use it safely.
how do you turn an HTML document into a fungible or non-fungible token on Cardano?
I’ll be writing a longer tutorial for this, but here’s the Ockham’s Razor version for you if you just need a good spot to jump off.
1. Create an HTML document
Many programs can translate a document into HTML for you, but they usually generate unnecessary code that slows the page down. I used HTML, CSS, and the W3.CSS framework to make sure the code contained only what was necessary.
2. Upload folder containing all the files necessary for the page to display properly to the IPFS (Interplanetary File System).
Each file will receive a unique content identifier (CID) that is used by both its IPFS:// and HTTPS:// addresses. You’ll need the CID of the HTML file that will serve as the main page to use in the NFT metadata when you mint.
3. Go to Cardano Tools to mint either a non-fungible token (NFT) or a fungible token (FT).
If you haven’t already created a policy, do it now, right here. If you have, just make sure the policy you want to use is selected. Add all the fields you want, but don’t worry too much about what you put in them until you get to the step when you’ll be editing the metadata.
When you’ve added all the fields you want to use, click on “Advanced” to get the metadata. A window will open with data about your token in JSON format. Copy it.
4. Use Pool.pm’s metadata test page to edit your metadata
The Pool.pm metadata tester is an invaluable tool for editing your token metadata. Just paste your metadata into the box on the left side of the screen. The right pane will give you a preview of how Pool.pm will display the token. (If it goes blank and the logo keeps spinning, you broke something.)
Here’s the worst infographic in the world showing what all that stuff is:
Look at line 10, under “files.” The link in “src” is the spot where you want to put the IPFS link to your HTML document. Make sure it’s an IPFS URL and not an HTTPS one. It should written as:
ipfs://CID/filename.html
Note: Keep your filenames as short as humanly possible. The 64-character line limit applies to URLs, too.
5. Copy and paste edited metadata
Copy the metadata you just finished editing and go back to Cardano Tools. If you’ve dismissed the metadata window under “Advanced,” open it again.
Delete the old metadata inside, replace it with the new version, and click “Apply.”
Now, just complete the minting operation as normal. And if there are no errors, you should have an HTML-based NFT.
what kind of HTML NFTs can we make?
Don’t know yet. I’ll let you know after I’ve tested a few more formats. But I have a growing list of use cases I’m building templates for. And going forward, I’ll be using Bootstrap 5 instead of W3.CSS.
I know I said Bootstrap was too big for this because of the jQuery library, but version 5 uses vanilla (plain) JavaScript instead. So I get to add interactivity and it should still load quickly on mobile devices.
I’ve tried to learn JavaScript twice, and it kicked my ass. That’s why I became a content writer instead of a web developer. But content writing led me to blockchain and NFTs. And I thought as long as I stuck to content writing and making NFTs, I’d never have to learn the dreaded JavaScript.
But now, to make the NFTs I want to make, I need to learn JavaScript.
Round three.