All right.
So now that we've deployed our Web application, you can see how easy it is to host something on the
Internet computer and how we can now make it available to anybody across the world.
Now, what if we wanted to host a static website instead?
Something much smaller, something with a lot less resources.
So instead of paying a hosting company or, you know, getting it through GitHub, we could actually
do it on the Internet computer.
And I want to quickly show you just how easy it is.
In the course resources, you'll be able to download this CSV my site.
And once you've downloaded it, go ahead and unzip the file and you should be able to see an index that
each HTML.
If you double click on it, you should be able to open it.
And this is the very simple Web site that we developed when we first learned how to use CCIS.
In today's lesson, I want to go ahead and show you how we can host this on the Internet computer.
Now, ideally, of course, you would probably want to host your own website rather than my one.
But in case you can't find it, you can go ahead and download this as well.
Once you've gotten hold of that, let's go ahead and take a look at the file structure.
So you can see we've got a folder cozy with our styles, a fabric on.
We've got a couple of images, not too many, and they're all quite small, at least in my case.
And then we've got our index HTML.
So in total, there's probably only a couple hundred kilobytes that makes up our entire website.
And as we mentioned before, the size of your website determines the cost for deploying and hosting
it on the Internet computer.
So for a small static site like this, it won't cost very much at all.
Now, in order to get started, we're going to bundle all of this into a new folder, and we're going
to call that folder our assets.
This is going to be the assets of our website.
And if you take a look at our previous data bank project, you can see that inside the source.
There's also the bank assets which contains the access logo, the indexed items and indexed JS.
So this is equivalent to that folder.
Now in addition, we need to create a new file called export JSON.
So the easiest way to do this is to simply open up our project from our downloads folder inside of code
and then outside this folder of assets.
So inside the main folder, we're going to create a new file which we'll call DFS Export.
Jason.
Now in this Jason file, we're going to describe how our canister looks to the Internet computer.
So we're going to open up a set of curly braces and then we're going to define the canisters.
And this is going to be written in the format of a JSON of the JavaScript object notation, which we
covered a long time ago.
But essentially, we're going to define a canister which is called website, and this website is going
to have a type and a source.
The type is going to be set as assets, and the source is going to be pointing towards where those assets
are.
And because there can be multiple sources, we're going to add it as a array.
So inside here, we're going to add the assets folder, which is right here.
So it's going to be up to find it.
Now, just before we deploy, one of the things to be aware of is once we actually deploy our website,
our static website, the deployment process is going to collapse off all the structure.
So it's going to take out all of these files, the ones that are inside the images folder, the one
that's inside the SEISS folder, and put it all in the same level as our fabric on an index each HTML.
So basically like this.
Now in order for this to actually still work with our index store email because if I open it up right
now.
You can see that it's completely not working.
So what we have to do is to get rid of all references where we reference all folders.
So we've got two folders in this project season images.
So let's change all references in here.
So I'm going to find all the places where I say, Yes, Forward Slash, which is my CSC folder, and
I'm going to delete it.
And then I'm going to search for all the places where I've got my images source set as the images folder.
So I've got five locations and I'm just going to go ahead and delete all of those instances so that
we basically end up with just the image names dot PNG and we change these references so that they are
on a flat structure.
So now that we're done, let's go ahead and hit save and we're ready to go and actually deploy this.
Let's open up a terminal and notice how it's inside the CSC, my site.
And now we're going to go ahead and use that keyword.
Deploy dash dash network.
I see.
And hit enter.
And now it's going to create our canister on the Internet, compute a blockchain and use some of the
cycles in our wallet to be able to do this and create it.
So once it's done, all of that, it's deployed the canisters.
Let's go ahead and take a look at what is the location of our canister.
So get the ID.
So to do that, the command is DF canister dash that network, which is ICI.
And then we're going to say we want the I.D. of a particular canister.
And the canister name is right here.
We've defined this single canister, which is hosting our website.
And in my case, I've just named it website.
And if you type this along with me, then this will be the same for you as well.
So after the ID, we're going to put the name of our canister.
So now let's go ahead and hit enter and we get our canister ID and now if we go back, you can see we
can follow the same format, which is the ID dot raw dot icy zero dot app.
So let's try that here.
So now if we load it up, you can see off Africans right there, our Web sites loaded up and this is
now hosted on the inter computer.
And you can send this URL to anyone and they'll be able to see your personal website hosted live on
the Internet, computer blockchain.
So that's it.
That's how we deploy live to the Internet computer.
Now, if you've managed to successfully deploy your own personal site, be sure to post a link to your
own website down in the comments below.
And we can all take a look at it and admire it now, because deployment costs so much in terms of cycles
and keeping these websites up cost cycles as well.
It means that once your container or your wallet runs out of cycles, then you static website might
go down.
So you have to keep your web site container topped up with cycles for the container to remain accessible
and online in the future.
When we're developing other projects, we're going to try and stay with local deployment.
That way it doesn't cost you any money, but if you want to make it live, you now have all the tools
at hand to be able to deploy it live on the internet.
Computer Blockchain.