screenshot of an image gallery built by chiarascuro in HTML and CSS, using the W3.CSS framework

[publishing 3.0] trying to mint a website as an NFT on Cardano

I haven’t posted for a little while because I’ve gone down a creative rabbit hole trying to do something hard and have forgotten about the physical world. The one where I have to eat and talk to people and stuff.

So my brain is flickering with various types of code and what I’m trying to do hinges on a tenuous relationship between IPFS protocol and HTTPS-oriented browsers that don’t recognize it or know how to handle it properly yet. When there’s full browser support for this, it will all be easier.

I’m trying to mint a website as an NFT on Cardano. Not just one page. A small site – two pages with images and internal/external links. I was looking for a way to build a better album, originally. The PDF ones are nice until you try to look at them on your phone. And Noodz, in his genius, said I should write them in HTML.

you can mint an HTML file as an NFT

The Refresh project on Cardano utilizes HTML and JavaScript to render the NFT image. The JavaScript contains parameters and instructions for the browser to draw the image and to redraw it every time the page is refreshed.

Brilliant.

I’m not trying to do anything like that. For one thing, I’m no good at JavaScript.

My interest in this medium comes from imagining what it can do to revolutionize publishing. As an NFT creator, you can self-publish anything you want. 

The vast majority of NFTs are images. That’s what people are used to seeing in the marketplaces and on social media, so that’s what they think NFTs are. But they don’t have to be just images. They don’t have to contain images at all.

My NFT collection is modest, but I happen to have a few things that are different from the rest. Some are firsts on Cardano:

These are special because they represent pioneering work by people who are taking risks and exploring what can be done with this tech. 

Many people are just in the space to make fast cash, but some of us want to build something meaningful. We want to communicate thoughts and ideas, learn from and teach others, and explore a space that vibes with our world philosophy better than the “real” world does.

Not to mention take more control over our lives.

NFTs can be so much more than pictures

If you want to tell a story, it’s hard to do that through imagery alone. It can be done, but what about those of us who like words, too? The HTML medium is for us.

Everything that’s beautiful, colorful, customizable, and functional about well-designed web pages can apply to an NFT. And if you make an NFT this way, you have:

  • Permanent, decentralized file storage
  • Secure, permissionless transactions
  • An immutable way to prove authorship without having to file for copyright protection

Without:

  • Recurring domain name registration and web-hosting fees
  • Pages of ridiculously-worded Terms of service agreements
  • Censorship
  • People telling you no
  • Being mined for personal information that is turned into a product

There are people out there whose sole reason for having a website is so they can share their work with friends and family, prospective clients or employers, collectors, whatever. Many of them are not that interested in maintaining a website or a blog.

Besides, that’s just one more account, and don’t we have accounts already? That’s a lot of companies collecting our data.

you can own your space on Web 3 without being commoditized

Now there’s tech we can use to blaze a new trail. Cryptocurrency. The Interplanetary File System. Smart contracts. 

Decentralization is the driving ethos. The rest are tools used by developers and creators to pave the way for greater self-reliance for everyone.

As a freelance writer, for example, you used to have to cold pitch your ideas to existing publications and hope an editor would like something and pay you decently (they probably wouldn’t). Then came freelancing websites like eLance (now Upwork) and Guru.

But Upwork is still a gatekeeper that makes all the rules. The freelancers and clients are dependent on them to use the site. They can terminate your account if they want to, when they want to. They don’t have to justify it, warn you, or give you a reason.

We’re making a better way to do this. That’s why I want to do it.

Web 3 is a DIYer’s dream

I’d rather sell my articles and short stories as NFTs. That way I get to present the content in my own brand colors and create my own featured images. I have an author bio with my photo and links to my other work instead of ghost-writing it for some company blog. I can feature other creators and projects, too.

I can create branded educational content to be mass-distributed as fungible tokens. I can edit them myself, write the code, mint, market, connect, collaborate, help the community onboard new crypto users and NFT collectors. All in my own way.

But I’ve been having to learn some stuff first.

screenshot of "atmosfear destroyed: 04 variants" HTML album (by chiarascuro) next to a text editor displaying a document with HTML code

Been a while since I did anything with web design other than dragging and dropping.  So to make things as easy on myself as possible, I’m learning a new CSS framework. I’ve already got some experience with Bootstrap. But Bootstrap relies on jQuery and JavaScript libraries, which may not be ideal to load into an NFT.

Instead, I went with W3.CSS, created by the W3C (World Wide Web Consortium).

Spent a couple weeks doing tutorials and tinkering with example code. Started building something immediately. Made a whole bunch of mistakes and have iterated and iterated to fix them.

screenshot of image gallery next to text editor displaying HTML code

screenshot of image gallery built by chiarascuro using the W3.CSS framework

Created some templates for different layouts that look good on small devices. Knocked the rust off my CSS skills so I can override default settings and design how I want.

Built an album/portfolio page for some work I created recently. It had a slideshow, an image gallery, a section of full-size images only for large screen sizes. And I dropped in extra sections at the end for a special thanks, author bio, other work, a footer, etc.

Minted the HTML file as an NFT by drag-and-drop and opened it in my browser.

The images wouldn’t load. The CSS rules weren’t being applied. I showed it to Noodz, who knows more about minting than I do, and he pointed me to a workshop he co-created and minted as an FT.

Watched the video, took some notes, learned what I did wrong, and went back to it applying the correct procedure. Uploaded the folder to IPFS, went back to Cardano Tools to try again. Changed a bit of code in the FT metadata, and opened the link again.

screenshot of NFT metadata written by chiarascuro

The link to the CSS library worked this time, but only a couple of images would load. I double-checked all the IPFS files to make sure they uploaded properly, refreshed the page a bunch of times. Each time I refreshed, one more image would load. Even had to right-click on some and choose to load them from the context menu.

So it seems to take a really long time and/or a lot of effort from the user to see all the images this way. And I don’t know if it’s because browsers don’t like IPFS protocol or if there’s something different I could be doing with the page structure, the images, or the metadata. Maybe it’s the network protocol.

I thought maybe a few files didn’t upload completely to IPFS, so I deleted the folder and uploaded them again. Tried to load the page again. Same problem.

Kind of a bummer. I have big plans for this format but not enough knowledge about basic things. Like whether or not it will work.

But I really want to do this. 

screenshot of article next to code editor displaying an HTML file

I made a different type of document with fewer images. An article layout this time, with a featured image, long-form written content with reference links, an author bio section at the bottom with a photo and a blurb and more links, and a footer.

The author bio section links to a second HTML file that I built with just one section of code from the first page. An “Other Work” section with three image boxes with descriptive paragraphs describing my other projects. There’s a footer and link going back to the article page so that both documents in the folder link to each other as well as a bunch of external web sites and pages.

And it works.

It’s a long-form article, so I added an HTML bookmark “contents” section for people who don’t necessarily need to read the whole thing.

Here’s the featured image.

cover image for "Blockchain for Noobs" by chiarascuro

Here are a couple of bullet lists that I took the bullets out of. May use a numbered list instead because it kind of looks wonky like this.

screenshot of article section with lists - an example HTML page that can be minted as an NFT

And here is the bottom of the “resources” part, followed by my author bio that links to the second HTML document.

author bio section of HTML article NFT by chiarascuro

This is the “other work” page it links to and from.

screenshot of web page with three image boxes describing the other work by the artist

I only had to put a link to the article file in the FT metadata. In Pool.pm’s metadata test page, the links work. The CSS rules are fetched and some of them are applied. They all apply and the pages load correctly when I open them in their own browser tab.

And the images load. I did have to refresh each page once or twice, but they load a lot easier now that there are fewer of them. No right-clicking necessary. And it looks fantastic on mobile. 

I want to mint it as an FT with a quantity of 69,000,000 and send a few million to the Alexandria Project library. So I started the mint again and rewrote metadata.

But there’s now an error when I try to mint. Something about the way the IPFS folders are handled. One of the devs will be able to investigate the issue on Monday when he gets back from vacation. So I’m going to spend some time drawing for a couple days and maybe build some more templates.

Maybe try it on Tezos and see how things work there.

Just letting my skin heal.

Leave a Reply