All right. 1
So now that we've deployed our web application, you can see how easy it is to host something on the 2
Internet computer and how we can now make it available to anybody across the world. 3
Now, what if we wanted to host a static website instead? 4
Something much smaller, something with a lot less resources. 5
So instead of paying a hosting company or, you know, getting it through GitHub, we could actually 6
do it on the Internet computer. 7
And I want to quickly show you just how easy it is. 8
In the course resources, you'll be able to download this CSS - My Site. 9
And once you've downloaded it, go ahead and unzip the file and you should be able to see an index. 10
html. 11
If you double click on it, you should be able to open it. 12
And this is the very simple website that we developed when we first learned how to use CSS. 13
In today's lesson, I want to go ahead and show you how we can host this on the Internet computer. 14
Now, ideally, of course, you would probably want to host your own website rather than my own. 15
But in case you can't find it, you can go ahead and download this as well. 16
Once you've gotten hold of that, let's go ahead and take a look at the file structure. 17
So you can see we've got a folder called CSS with our styles, a favicon. 18
We've got a couple of images, not too many, and they're all quite small, at least in my case. 19
And then we've got our index.html. 20
So in total, there's probably only a couple hundred kilobytes that makes up our entire website. 21
And as we mentioned before, the size of your website determines the cost for deploying and hosting 22
it on the Internet computer. 23
So for a small static site like this, it won't cost very much at all. 24
Now, in order to get started, we're going to bundle all of this into a new folder, and we're going 25
to call that folder our assets. 26
This is going to be the assets of our website. 27
And if you take a look at our previous dbank project, you can see that inside the source, 28
there's also the dbank_assets which contains the CSS logo, the index.html and index.js. 29
So this is equivalent to that folder. 30
Now in addition, we need to create a new file called dfx.json. 31
So the easiest way to do this is to simply open up our project from our downloads folder inside VSCode 32
and then outside this folder of assets, 33
so inside the main folder, we're going to create a new file which we'll call dfx/ 34
json. 35
j-s-o-n. 36
Now in this JSON file, we're going to describe how our canister looks to the Internet computer. 37
So we're going to open up a set of curly braces and then we're going to define the canisters. 38
And this is going to be written in the format of a JSON or the JavaScript object notation, which we 39
covered a long time ago. 40
But essentially, we're going to define a canister which is called website, and this website is going 41
to have a type and a source. 42
The type is going to be set as assets, and the source is going to be pointing towards where those assets 43
are. 44
And because there can be multiple sources, we're going to add it as a array. 45
So inside here, we're going to add the assets folder, which is right here 46
so it's going to be up to find it. 47
Now, just before we deploy, one of the things to be aware of is once we actually deploy our website, 48
our static website, the deployment process is going to collapse off all the structure. 49
So it's going to take out all of these files, the ones that are inside the images folder, the one 50
that's inside the CSS folder, and put it all in the same level as our favicon and index.html. 51
So basically like this. 52
Now in order for this to actually still work with our index.html because if I open it up right 53
now, 54
you can see that it's completely not working. 55
So what we have to do is to get rid of our references where we reference our folders. 56
So we've got two folders in this project: css and images. 57
So let's change our references in here. 58
So I'm going to find all the places where I say css/, which is my CSS folder, and 59
I'm going to delete it. 60
And then I'm going to search for all the places where I've got my images source set as the images folder. 61
So I've got five locations and I'm just going to go ahead and delete all of those instances so that 62
we basically end up with just the image names .png and we change these references so that they are 63
on a flat structure. 64
So now that we're done, let's go ahead and hit save and we're ready to go and actually deploy this. 65
Let's open up a terminal and notice how it's inside the CSS - My Site. 66
And now we're going to go ahead and use that keyword 67
dfx deploy --network 68
ic 69
and hit enter. 70
And now it's going to create our canister on the Internet, computer blockchain and use some of the 71
cycles in our wallet to be able to do this and create it. 72
So once it's done all of that, it's deployed the canisters, 73
let's go ahead and take a look at what is the location of our canister, 74
so get the ID. 75
So to do that, the command is dfx canister --network, which is ic. 76
And then we're going to say we want the id of a particular canister. 77
And the canister name is right here. 78
We've defined this single canister, which is hosting our website. 79
And in my case, I've just named it website. 80
And if you type this along with me, then this will be the same for you as well. 81
So after the ID, we're going to put the name of our canister. 82
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 83
can follow the same format, which is the ID .raw.ic0.app. 84
So let's try that here. 85
So now if we load it up, you can see our favicons right there, our website's loaded up and this is 86
now hosted on the internet computer. 87
And you can send this URL to anyone and they'll be able to see your personal website hosted live on 88
the Internet computer blockchain. 89
So that's it. 90
That's how we deploy live to the Internet computer. 91
Now, if you've managed to successfully deploy your own personal site, be sure to post a link to your 92
own website down in the comments below 93
and we can all take a look at it and admire it. Now, because deployment costs so much in terms of cycles 94
and keeping these websites up cost cycles as well, 95
it means that once your container or your wallet runs out of cycles, then you static website might 96
go down. 97
So you have to keep your web site container topped up with cycles for the container to remain accessible 98
and online. In the future 99
when we're developing other projects, we're going to try and stay with local deployment. 100
That way it doesn't cost you any money, but if you want to make it live, you now have all the tools 101
at hand to be able to deploy it live on the internet 102
computer blockchain.