Just in case anyone doesn't already know, you can do that with a data uri as well:<p>data:text/html,<h1>My%20small%20website</h1><p>Look,%20it's%20real!</p><p>You can use a data uri generator to base64-encode it, if you want.<p>Advantages of smolsite:<p>- Zip might let you fit a bit more than a data uri<p>- Some JS APIs would work on a smolsite url, but wouldn't work in a data uri
On the subject of weird stuff on a URL, here is a prime dog: <a href="https://geonnave.github.io/primg/#179769313486231590772930519078902473361797697894230657273429661642538456588077306078196596037783249291026990862829670919205888565609581869739105202524725614169647793002230079727461396703734603105685474079081886809070115786113168328330817484522518138348888081075292599304124949646601273927687076353436639295493" rel="nofollow noreferrer">https://geonnave.github.io/primg/#17976931348623159077293051...</a>
My response in a URL:<p><a href="https://wgx.github.io/anypage/?eyJoMSI6IkhlbGxvIEhOISIsImgyIjoiUmU6IFNtb2xzaXRlIiwiYm9keSI6Ikl04oCZcyB2ZXJ5IGNvb2whIFppcHBpbmcgdGhlIGNvbnRlbnQgaXMgYSBzbWFydCBtb3ZlIEkgbmV2ZXIgdGhvdWdodCBvZiB3aXRoIEFueXBhZ2UgYSBmZXcgeWVhcnMgYmFjay4gS3Vkb3MhIDopIiwiZm9vdGVyIjoiKEFueXBhZ2UgZG9lcyBoYXZlIGEgUVIgZ2VuZXJhdG9yIHRobykifQ==" rel="nofollow noreferrer">https://wgx.github.io/anypage/?eyJoMSI6IkhlbGxvIEhOISIsImgyI...</a>
Nice, reminds me of nopaste [0], which is a pastebin that stores the text in the url compressed with lzma and encoded with base64.<p>[0] <a href="https://nopaste.boris.sh/" rel="nofollow noreferrer">https://nopaste.boris.sh/</a>
That will send the content to the server for unpacking. A slightly more convoluted option might be to put the zip in the anchor part instead and have the response serve code to unpack it from there client side. Though now the server can't scan for damaging content being sent via it, even if it wanted to, as the anchor part does not get sent to the server.
I had an idea once to implement Borges's Library of Babel just like this: all the text is in the URL. With more sophisticated encoding, you can optimize English words. Then hook it up to a "search system" so you can search for your own name, clips of text, etc.<p>Eventually you'd hit the URL size limit, of course, but maybe we add a layer on top for curators to bundle sets of URLs together to produce larger texts. Maybe add some LLM magic to generate the bundles.<p>You'd end up with a library that has, not just every book ever written, but every book that could ever be written.<p>[Just kidding, of course: I know this is like saying that Notepad already has every book in existence--you just have to type them in.]
Reminded me of a site from the creator of Advent of Code to share solutions of the puzzles (or any plaintext for that matter).<p><a href="https://github.com/topaz/paste">https://github.com/topaz/paste</a>
Nice!<p>I remember seeing this for the first time on HN with urlpages, inspired me to build my own version of these<p><a href="https://js-labs.js.org/" rel="nofollow noreferrer">https://js-labs.js.org/</a>
excellent!<p>and my website _is_ already in a zip hehe <a href="https://redbean.dev" rel="nofollow noreferrer">https://redbean.dev</a>
Cool little project! I did a similar thing recently, I wrote a pastebin that puts the file contents in the URL with brotli. [0]<p>It works quite well, but I'll need to update the syntax highlighting soon as at least Gleam is out of date (boy that language moves fast), and sometimes brotli-wasm throws a memory allocation error for some reason. I guess that's one cool thing that WASM brought to the table, memory handling issues.<p>[0] <a href="https://nicd.gitlab.io/t/" rel="nofollow noreferrer">https://nicd.gitlab.io/t/</a>
you could save yourself from serving all the websites (and server costs) with just one character!
pass the base64 in the hash field by simply prepending # to it. also it seems the URL length limits do not include the hash, so maybe notsosmolsite.zip? ;)
This reminds me of this project: <a href="http://ephemeralp2p.durazo.us/2bbbf21959178ef2f935e90fc60e5b6e368d27514fe305ca7dcecc32c0134838" rel="nofollow noreferrer">http://ephemeralp2p.durazo.us/2bbbf21959178ef2f935e90fc60e5b...</a><p>Myself and two other people have literally kept this page alive for many years - the github repo says 2017.
Take it to the next level, maybe switch from server side zip to browser native gzip?<p>1. You could achieve this on a static server, like GitHub pages<p>2. You could make the page editable and auto generate new URLs as the page gets edited.<p>See:<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Compression...</a>
I did something like this last year (maybe two years ago by now? time flies), but with LZString instead of gzip[0]. The original idea was actually someone else's on Mastodon (who knows, maybe it was OP? I think it was Ramsey Nassr though), but it was just B64 at first - I added the compression.<p>Then someone tried fitting King Lear in there (which worked).<p>Then it turned out that <i>until that day but not for very long after that</i> URLs were not counted for character limits in mastodon toots.<p>That froze quite a few Mastodon clients who were unlucky enough to open that toot for a day or two until that got fixed. Not sure why, I'm guessing (accidentally) quadratic algorithms that weren't counting on urls that were multiple kilobytes in length.<p>[0] <a href="https://blindedcyclops.neocities.org/onlinething/writer" rel="nofollow noreferrer">https://blindedcyclops.neocities.org/onlinething/writer</a>
Imaginably this can be done with Brotli too.<p>I like embedding external resources such as bitmap images in SVG in CSS in HTML so that a document is truly portable and can be sent by email or messenger services. So I don't need a URL. The whole document has to be shared, not just a link to it.<p>I also found the favicon can be encoded in this way.<p>I don't do scripts, but a lot of fun can be had with HTML when you start doing unusual things with it. For CSS I also use my own units, just for fun. So no pixels, ems or points, but something else... CSS variables make this possible. I like to use full semantic elements and have minimal classes, styling the elements. This should confuse the front end developer more used to the 'painting by numbers' approach of typical website frontend work.
Very cool! I have a similar project that uses DNS instead of a path parameter <a href="https://serv.from.zone" rel="nofollow noreferrer">https://serv.from.zone</a> but smolsite is much simpler.
I like how it requires sending all the data up to the server, where I guess it gets discarded, returns a static HTML page that converts that same data on the client into a web page.<p>Has the advantages of being centralized (site can be shut down, nuking all URLS) and decentralized (requires tech skills to set up, site cannot be updated without changing URL, etc.). Adding tinyurl to this as suggested in another comment takes it to the next level!
I wonder what happens about the liability for content on these URL-websites. Is the liability now on the one who shares the URL, or on those who serves it?
I see this a lot. Some unsolicited advice: you don't need cat for this kind of command:<p><pre><code> echo "https://smolsite.zip/`cat somesite.zip | base64 --wrap 0`"
</code></pre>
can become<p><pre><code> echo "https://smolsite.zip/`base64 --wrap 0 < somesite.zip`"
</code></pre>
- Really awesome project nonetheless!
Also having fun on this subject <a href="https://goog.space/" rel="nofollow noreferrer">https://goog.space/</a>, trying to add webRTC and yjs, also archive.is for storing a link (and minification). Fun to see so many people are trying things out with URLs, client side web apps, encoding/decoding data
Some images are base64 in URLs in Google image search results for their thumbnails. Does anyone have any idea why?<p>Search "Pepsi can" and some when you right click > copy image address will result in "data:image/jpeg;base64,/.../" instead of the website's image. Presumably to limit server cost / make the browser render? It's not for all sites, so perhaps more common sites (Walmart for example) it gives the correct image URL.<p>Pepsi can image from:<p>[1] <a href="https://crescentmarket.shop/" rel="nofollow noreferrer">https://crescentmarket.shop/</a> data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2...//9k=<p>[2] But when you click through: <a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwXbLGVeQByPHWaFrMHeAcd0XYA5gLHMzHFlZRHXpqqRoSXTRx8bouJBoHiFGxRTpz6VQ&usqp=CAU" rel="nofollow noreferrer">https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwXbLG...</a><p>[3] Paperpunchplus.com shows the correct image URL
<a href="https://www.paperpunchplus.com/https://cdn3.evostore.io/productimages/vow_premium/l/brt00145.jpg" rel="nofollow noreferrer">https://www.paperpunchplus.com/https://cdn3.evostore.io/prod...</a>
I still have control over the domain I bought a few years ago to implement something similar.<p>What ultimately stopped me is that on a site of this type you can't really include links to other sites made the same way, because your URL length is going to balloon.
Absolutely useless fun tech demos are the best kind of demos<p><a href="https://github.com/lpereira/lwan">https://github.com/lpereira/lwan</a> - presume this is the web server library you're referring to? Very cool.
Coolest application of those data URL ever. It's amazing how simple this idea is yet I have NEVER considered trying it out. I am not surprised this idea has already been done before, but it's still somehow never crossed my imagination.
I can't do it right now, but think of this: we can then create a site that, upon some input, creates a zip file and links to itself, in a possible infinite loop of self generating web sites!
cool. alas, i've got all .zip domains blocked because the vast majority of them are used by malware people trying to trick someone into "downloading a zip file"<p>(this was <i>so</i> predictable)
This is a fun hack, nice one.<p>Thinking of reasons to <i>not</i> do this though, it's effectively impossible to content moderate, at least not without building a database of all the content you don't want to host.
Nice! I did something similar a few years back too!<p>I called it the Twitter CDN™ [1]<p>Here's Pong and The Epic of Gilgamesh, in a Tweet: <a href="https://twitter.com/rafalpast/status/1316836397903474688" rel="nofollow noreferrer">https://twitter.com/rafalpast/status/1316836397903474688</a><p>Here's the editor: <a href="https://laconic.sonnet.io/editor.html" rel="nofollow noreferrer">https://laconic.sonnet.io/editor.html</a><p>And here's the article explaining how it works: <a href="https://laconic-mu.vercel.app/index.html?c=eJylWOuS27YV%2Fu%2BnwDL1WJuK1GXvWknO2nHrbePaE6%2Fr9NcGJCEREUkwACitnPE79AU6fcU%2BQr8DXkTtpZ1OPZkNRQAH53zn9h1OD75%2F%2F%2Frmbx%2FesMRm6fzZtPofY9NE8Jge8JgJy1mUcG2EnXmlXfjnHht0FxNrC1%2F8Wsr1zPvJ%2F3Tlv1ZZwa0MU%2BGxSOVW5Dh5%2FWYm4qXYnbXSpmJ%2BnRXKGNrLTCILMx1U7zvyc56JmbeWYlMobTsiNzK2ySwWaxkJ3%2F3oM5lLK3nqm4inYjbaXRdyI5jleklm3IYpz1e7RWO3zZ2Mfct%2Bq58YC9Wdb%2BQXmS8neNax0D5eXdbrX5%2FVDwRc%2F1lzJN52JBQ8jt3x4WX7bgELSKyYsNF5cbdbSGUu%2FETIZWKxFBzvLvrPskdaZDspGayUOW5kvLSq%2B%2F6ugmnCjofuxL5GC57JdDthVxoI9tlbka6FlRHvM8Nz4xuh5eKB6Qu5LLXoKGXFnfV5KpfQIIKfhL5vRX3ErJedY7Vio%2BHw%2BaMaj4d7NjYgdS1sdQpTFa1%2BLZUVe6507kvFAsfGxR0zKpUx08uQ94Z9Vv8XjA4v7%2BNbn3kM5Hrpvm83tXanw%2BF944NQdLVC9CNgFbBayDsRP7Z7whcAsXOmToAJ8%2F71z7%2F%2Fw9vdHUtTpBwedADs3vNcZry6JQTChgkkgy9zYGKTB%2BjxJpL5ZC2hnYj37k6VnrBvRDzsGPffzf5uJbYLjUw2UGEnbvi88wOxoxFoC6WzSfWYcit%2B6g07LvnaPl2c7J9VBY%2BkhfGjx3Zb9fjmjglPXe8jJtebR3ToOskPS2tV3o03Hq2WWpV5PGGbBDBe3gvFbhQ%2BwPMpnHflBLF60g3Ivdox7q7s%2BSZU6aNRVhsw4ZGVa%2FHQ4%2FdN6Fh3T8lK6nTQFtXpoOknUypgdc1NRvObRBrGNWoMyj8eE2Uo2gDjzUZaBD1OjubP6v3j%2BVu1eYlX4%2BZV0ZTsm0QwZIREVamTg6kFsyS%2B4EsnG9VrDdkLrbJGOjbAgmVSC5nyXXXRYjHzqLGZyWCADiNSVQgdZOqLTFMeKL0ciNz%2F9HEQq8gMPotw8Pbm5sPgFTcyMrdqcet%2Bfs8tv%2F3047XxWsnzGO%2F8Ukt0uua%2BecCuLVsIkUJNxQzFpioBh9Cij8J3xzJF9bJ%2B36dgDgUrtIikEUENdw1GFxSYLU3%2BwjKNciAsM5EUeQSZlkS%2FMCxH%2FiOaWC42jIeqtKxVL2CvSttn18%2Ba6FoJOsZkLDgeuGVywbaqZFrwKAGyDm0qF3sY9xnA09vqGmyvxRkUQdIB7qKS4E5wnM6XKakn8y2aDqDeUoG0QWWLc%2BUvpbG77DS1PNLs048%2FwN4c4PCcia0IeZr6Cw2T4xTikjLDe8pubp%2FE7ENK%2BDqVwUe4hl3IqxWLYCVug46osVZLJAuWIlVsq0DbxV3P8pVoteKA0BVjMCiZHxzu7m2D%2BjNhGUG1a7QAoJq3QDC7EcLWEb%2Bv51VeQ%2Bq6LXGbuE%2BaRKoEUeu37mpD%2B15I28o7AeAfaL7gacGNRcZyW5rB6Gh0en50MTo%2FG52fXpyOj4%2BHnQD%2B6%2FX1NYgUGJttbH9TyIie%2FyjTJZX4pBvbT0H9p4%2BARiR8jZjW9CjMpFG3LqZRyo2Zebvq5KE2RKmMVjNvoYWgM71Db94q95rWqsBCGIDqAUvaSNIb2YNK1PzJEFD58gDkxyUI%2Fz8APD26OLsYHh2fHZ%2Ben3eUJIiaUtf19g15O2jV5E9qOAWBinhBDR38GUmBkF2LyCrNlpoXCUoQ2yi9Yu%2F%2FjKBalsKYyXTQOdSRAyK202z68i5LIUob7Jp5o2DooaxGijrOzPt08wdw%2F5ed7WBwne6Js7mpEAJAm80m2By5SjkeDocD7PU6myvu7qG1dt9W7WvmHe29Jer%2FSt3NPPQ8IogoiZ147Gzc5%2FHVvyDloUj3mj%2F9o55IpBIdOELKoOVd7u342hU7eCB3igEn2TsQz7x3o%2BPg7ISNrk6C8TFzf4as0pnVvzsvh%2Bw0GJ%2B8xurIncLDRfXXjIb%2BGdbwyx%2BNsUgCT5j7UwusLvri7amwQMGceahZ3ddzBBB03VOeikaTXA4ejwHd8dhjW7jkzJtTYh0cjBjxS0xk2N7xOrmyDaFBN4b2Cxu6NcvKKHmiuN08Wdyom4%2FPh27qBB1Bo05lhtOxEq5lMV4U6AzIcKrNhvU2wt2BcotSzWMrcCkKfacKH6InxK5WYaSQWZmxVORLm1DV4tQ5oCDaA3IpJrnUdIiG1FnONtyw41Utr1WLeiQq7%2BlxmyQwkDqFgZ50F414LNyysiChR0fP%2B9Tfr53%2BUsTNtEKkgVU%2BweSska6S7lZQboGp2xlQt0C0NLUxDOQAy8YSLQgFtYmcHQUnDW%2BHqSer0FVnSA3YZwlLSSGO3KYmiuoQNwjAJ2%2FgEGkShqjyT1gv50iHWpYwlmYHcdivGvwSS%2B7%2BiAfs7GRI5Hjo5Jngfgy0Dn2%2Fa0wG%2FZ651kV9NlgGcGju%2F4DpJPdHHWhRINIUp%2BCHHWuYGB77Bdda2Qk6RmmD4MGlu9mvjdFiF7w3gBJl3fEpChd4jhggRQtFZqK0pX69rCKgV7dR2K1ygoDj0jzaJT4QjiVH0c1gjRNBxR2%2BUqwaPwn0QgmUGkn3ul6EAEkJV6B60KZRU%2BQHXf3bVAIVQ8fIcYiYzCbZ3qPBn0WKgX234%2FpFBk010WCcpHjgyBVrkXYhEgnzh4iDRzrLla0cVCjwqDaypiKbfxOLFK7XcNztmqelmA7wlkQ3JtAmoyKJ0Z8y%2FDYVXOfkZ7cTOiFkALVl2daI1LHzfEU5UxFPjKJQr5HmvgUFdEaVaQx%2BiqsZhg1Ehm0yGVlESNYcJFFhuHVBgVMi%2F0Vtd1Qzo4qzraxKkV7MDTmYuwURxrVK16QHaeVL%2Bh7lqF0OngfOZqHGFQ3gTXIR0oQvwkUt7AYcEdctMXyBDTzVsd%2FxLQi71VtH2ZSrhcQzXMygJuZEzC37WGZAmKKSCFVFZas66WpfLYwGBYpEyHDxWYDPOP0JM1ZN9WTmk9o4xomYRmLpBnd3%2BuX%2FxHa8%2BQ3CjmWCuMr9y0ykZdF2DYcmaygbm7HeIZvNO02ZyCQqM1ZG3WkXQydCtkefgfzDvR5eSdQ48A7dLcA8EKvs8sGGEBswogHX3AYViX%2BTCvrV82K59g67R8LA9cS%2FED%2BbMaKd3v6yowFY%2Brn66vO73zTs%2BBZjFQzLA0dpvhZ3l%2FBwQat7zXlva8VzOut0bPf1wX287DXix%2Bz3mPXHXw9%2F7mrTWkUjdUC5kMevAVfcCx%2F7VHHZDOWtX1Bq3DCOSuI%2B%2B%2F4bR8Q8yA%3D%3D" rel="nofollow noreferrer">https://laconic-mu.vercel.app/index.html?c=eJylWOuS27YV%2Fu%...</a><p>[1] all thanks to the fact that Twitter applies a different char limit to URLs. We wouldn't want to lose those delicious tracking params, would we?
Yeah, I had exactly that, but in my opinion better, with fullscreen mode on <a href="https://flems.io" rel="nofollow noreferrer">https://flems.io</a>. Right up until hackers found it was a great place to host their phishing sites...
We host the full <a href="https://RTCode.io" rel="nofollow noreferrer">https://RTCode.io</a> playground state in the hash, deploy it to <a href="https://RTEdge.net" rel="nofollow noreferrer">https://RTEdge.net</a> and serve the output at / and the playground at /?<p>- <<a href="https://RTEdge.net/" rel="nofollow noreferrer">https://RTEdge.net/</a>> output<p>- <<a href="https://RTEdge.net/?" rel="nofollow noreferrer">https://RTEdge.net/?</a>> playground<p>For more information: <a href="https://efn.kr" rel="nofollow noreferrer">https://efn.kr</a>
If the author decides to use the URL hash instead, he can avoid users sending that zip to his server<p>i.e.<p><pre><code> https://smolsite.zip/#UEsDBB...</code></pre>
Alternatively, when formatted "properly", you can also simply host your zip file. See <a href="https://gildas-lormeau.github.io/" rel="nofollow noreferrer">https://gildas-lormeau.github.io/</a> for example.