3 ms·

What’s the best and easiest way to host and share these artifacts? GitHub html?

simonw 2y ago
Easiest is to use the "publish artifact" button, but that wraps them in a giant blob of obtuse React code which means they load slowly and view source is pretty much useless, e.g. https://claude.site/artifacts/46897436-e06e-4ccc-b8f4-3df90c47f9bc https://claude.site/artifacts/46897436-e06e-4ccc-b8f4-3df90c... Second easiest is to take the code and paste it in a Gist - like this: https://gist.github.com/simonw/14a2c3ef508839f26377707dbf5dd329 https://gist.github.com/simonw/14a2c3ef508839f26377707dbf5dd... And then take the Gist ID and add it to this URL: https://gistpreview.github.io/?14a2c3ef508839f26377707dbf5dd329 https://gistpreview.github.io/?14a2c3ef508839f26377707dbf5dd... That gives you a URL you can load in your browser. My preferred route is to host the generated HTML directly myself. I mainly use that via GitHub Pages - I can drop an extract-urls.html file into https://github.com/simonw/tools https://github.com/simonw/tools and about 20 seconds later it becomes available at https://tools.simonwillison.net/extract-urls https://tools.simonwillison.net/extract-urls Those last two options only work for Artifacts that didn't use React (that's why I use "no react" in most of my artifact prompts). If you DID use React you can turn that into a standalone HTML and JavaScript app that you can deploy using https://github.com/claudio-silva/claude-artifact-runner https://github.com/claudio-silva/claude-artifact-runner - I wrote some notes on using that here: https://simonwillison.net/2024/Oct/23/claude-artifact-runner/ https://simonwillison.net/2024/Oct/23/claude-artifact-runner...
- bilsbie 2y ago
  I had no idea gistpreview existed! That’s really easy. I guess you can’t host static files like images though? Do you do anything special to make the tools directory work like that?
  - simonw 2y ago
    I have some note on that here: - https://til.simonwillison.net/github/custom-subdomain-github-pages https://til.simonwillison.net/github/custom-subdomain-github... - https://til.simonwillison.net/github/github-pages https://til.simonwillison.net/github/github-pages

Easiest is to use the "publish artifact" button, but that wraps them in a giant blob of obtuse React code which means they load slowly and view source is pretty much useless, e.g. https://claude.site/artifacts/46897436-e06e-4ccc-b8f4-3df90c47f9bc https://claude.site/artifacts/46897436-e06e-4ccc-b8f4-3df90c... Second easiest is to take the code and paste it in a Gist - like this: https://gist.github.com/simonw/14a2c3ef508839f26377707dbf5dd329 https://gist.github.com/simonw/14a2c3ef508839f26377707dbf5dd... And then take the Gist ID and add it to this URL: https://gistpreview.github.io/?14a2c3ef508839f26377707dbf5dd329 https://gistpreview.github.io/?14a2c3ef508839f26377707dbf5dd... That gives you a URL you can load in your browser. My preferred route is to host the generated HTML directly myself. I mainly use that via GitHub Pages - I can drop an extract-urls.html file into https://github.com/simonw/tools https://github.com/simonw/tools and about 20 seconds later it becomes available at https://tools.simonwillison.net/extract-urls https://tools.simonwillison.net/extract-urls Those last two options only work for Artifacts that didn't use React (that's why I use "no react" in most of my artifact prompts). If you DID use React you can turn that into a standalone HTML and JavaScript app that you can deploy using https://github.com/claudio-silva/claude-artifact-runner https://github.com/claudio-silva/claude-artifact-runner - I wrote some notes on using that here: https://simonwillison.net/2024/Oct/23/claude-artifact-runner/ https://simonwillison.net/2024/Oct/23/claude-artifact-runner...

bilsbie 2y ago
I had no idea gistpreview existed! That’s really easy. I guess you can’t host static files like images though? Do you do anything special to make the tools directory work like that?
- simonw 2y ago
  I have some note on that here: - https://til.simonwillison.net/github/custom-subdomain-github-pages https://til.simonwillison.net/github/custom-subdomain-github... - https://til.simonwillison.net/github/github-pages https://til.simonwillison.net/github/github-pages