Building a Website On ICP

“What is the recommended approach for creating a static website on the Internet Computer Protocol (ICP)? I’m particularly interested in hosting a simple static site using an asset canister. Any insights, tips, or best practices would be greatly appreciated!”

1 Like

I’m obviously biased, but you can give Juno a try.

You can quickly start a static website using one of Juno’s templates, which will spin up a website using the Astro framework:

npm create juno@latest

In my opinion, there aren’t really that many particular best practices different from those that apply to building static websites on Web2. Maybe the only thing I can think of - if you are an advance developer that cares about those things - is ensuring builds are reproducible. This approach helps efficiently consume cycles when the website changes are uploaded to the smart contract and also speeds up deployment. However, to some extent, that’s also valid for Web2, so really, it’s much the same I would say spontaneously.

8 Likes

The absolute easiest way to build a site and host on ICP for non-developers, is easyicp.site which not only breaks down the steps to “for dummies” level, the local environment preparation tools along with copy and paste codes will really make sure noobs don’t get stuck. Give it a shot, if anything is looking to put up static/web2 stuff without having to jump through too many hoops.

1 Like

Thanks for posting https://easyicp.site/. I didn’t know about it yet.

For the initial step of buying a canister we have created a Telegram bot: @icp_hosting_bot

With it you can buy a canister with USDT or other crypto for exactly $1. It comes pre-configured with an asset canister that hosts a welcome page and has permissions set to you. You can manage multiple canisters and top them up with more cycles all through the bot. You can even delete the canisters and get a cycle refund.

The bot “co-controls” the canister initially but that is intentional and you can remove the bot as a controller at any time with dfx. The intention is that newbies, during the initial experimental phase, don’t need to deal with NNS, II login, obtaining ICP, converting ICP to cycles and can’t lose access to their canisters. When they have learned and are hosting something serious then they remove the bot’s access.

Maybe you can link to the bot on your website as an alternative to the NNS route for buying a canister. We also tried to make it as cheap as possible ($1) to start. 2 TC is quite a lot to ask.

Regarding

Just How Affordable is Hosting on the Internet Computer?
[…] you can serve millions of page loads before you use up 1 Trillion cycles

on ICP Hosting Cost Estimator. Page loads are query calls and are therefore free for the hosting canister, aren’t they? I mean until there will be query charging at some point in the future but there isn’t yet. There should only be upload and storage costs for now.

Hey thanks for the suggestion. That is definitely another way to make it easier for the newbies. I’ll take a look at the bot later today.

So after reading the official page on usage/cost and digging into other resources like this one, I had ai build me a calculator and it seemed pretty close to what this page described as well where someone spent $82 for 150million query calls @ 2mb payload. (icp.guide/costs-on-the-internet-computer)

My main intent was to show that it is night and day in cost compared to paying for traditional hosting. Hopefully the estimator makes that point. :slight_smile:

The easiest way, IMO, especially for what you’re describing is to use https://carrd.co/
Choose a template, then make changes to it. Then export the site, which lets you download the files as a zip file. Extract the zip and use https://juno.build to deploy it.

You can also use Webflow, which alot of people use to build websites, then download the generated files as well: https://webflow.com/

You can use AI generators as well to get more customized results:
https://v0.dev

There aren’t a whole lot of step by step instructions for absolute beginners, so I would recommend just trying out those options and posting and ask questions where you get stuck and people can answer your questions, and more guides can be created.

1 Like

We should create documentation to Juno’s website on generating files with Carrd, Webflow, etc., and then provide follow-up instructions for deployment.

If you’re interested in helping with this, @codecustard or anyone else, I can offer a tiny bounty to sponsor the effort. Drop me a PM if you’re interested.

2 Likes

ngl as Juno user, hosting two static websites for myself, I couldn’t agree more.
It’s easier to use and the docs are perfect.
LFG🫡

1 Like