OSS Website Hosting and Monitoring. So in addition to the image processing features we previously discussed, OSS can also be used to host a static website. You can upload CSS, HTML, and JavaScript files to your OSS bucket, and then turn on the static hosting capability. This is a great way to build a very, very low cost, scalable, serverless site. This will scale to handle almost any load. And because it's entirely serverless, you're really only paying for network bandwidth and storage space used. So this can be an incredibly cheap and efficient way to run your website.

So in the Settings, you can find a section called Static Pages in the Settings for each bucket. Here you set a default 404 page and a default homepage. These need to be files that are located in the bucket. And whenever a user visits your bucket, one of these pages will be displayed. If the page they requested is not found, they'll get sent to the default 404 page. If they visit the default homepage, that's what will be displayed. And additionally, you can bind a custom domain name. So we'll test that out a little bit later.

We'll create a new bucket, upload some files into the bucket, and then try binding a domain name to that bucket. And typically it's a good idea to bind a domain name. It makes your site look much more professional. If you're just using the bucket endpoint, it doesn't look too good. You can also monitor your site. Again, you can monitor key metrics for your buckets via our free monitoring tool, CloudMonitor. And you can also get interesting and valuable information from the logs. So if you've turned on logging for your bucket and you're collecting logs, you can get valuable information about how many requests you're receiving in near real time.

Down at the bottom of the slide here, you can see a few examples of the types of metrics that are available to you. So you can see Network Error Account, Network Throughput, Storage Space Used and more. So let's take a look at all this in the console. Let's actually continue to use the bucket we set up earlier for the image processing demo. So we're going to add some HTML files into this bucket. Let's upload those now. So just as I did before, I'll upload the files by clicking on the Upload button, and then I'll fetch them from my Downloads folder, which is where I saved them. Let's go back to Downloads.

Here's my index.html and my notfound.html. And then we'll upload both of those. There we go. They're now part of our bucket. I can clear the Upload Tasks list. And now I need to set up my bucket for web hosting. So I need to go to Basic Settings, and you'll see all of the settings for the bucket are here under basic settings. I want to go to Static Pages. And I'll click Configure to set up a default homepage and also a default 'not found' page. And I will click Save. And you'll notice there's also an option, let me click on Configure to show that again, there's an option here to put your homepage into a subfolder if you want. I've chosen not to do that because both of these folder, excuse me, both of these files are in the root. They're at the top level in the bucket. They don't have any kind of directory prefix in the object name. So I can just put those names in directly, and now the bucket is ready.

So let's see what happens if I try to visit this URL. I think you'll be surprised by what will happen. So let's take a look. So if I go visit this item. If I go visit index.HTML, the page doesn't display. Did you see what happened? Let me do that again. So what actually happened is the HTML document got downloaded. If you want to display the page directly in the browser, you actually have to bind a domain name to your bucket. So let's take a look at how to do that. And the domain name doesn't have to belong to your Alibaba Cloud Account. It could be with a different domain name registrar. But for convenience, I'll show you how to do this from Alibaba's domain name and DNS service. So first thing I need to do is open up a new tab, and go over to the domains part of the console. Let's take a look at that.

Let's see what domains we have available to use here. So I've got two. I've got functiontime.xyz, which I use for testing our function compute service, and chinasite.xyz, which is just a generic domain for doing all kinds of demos. So I'm going to go ahead and take this and use it to go ahead and create a static site. So let's do that now. So I need to go into the OSS management console. And again, we'll go to Basic Settings. And actually from here, there should be a place where I can go ahead and bind that to my bucket. Excuse me, not in here. It's actually under Custom Domain Names. So if I go under Transmission, there's Domain Names here. From here, I can bind a custom domain name. So let's do that.

I'll click on Bind Custom Domain, and I will choose chinasite.xyz. Now because this is under my Alibaba Cloud account, I can click check this radio button here to set up the CNAME records that point to my bucket endpoint automatically. So I'll do that. I'll set up a CNAME record automatically here. Let's do that. Click Submit. If I want to check that that has been successfully configured, I can go over to the DNS console. Let's close this tab. We don't need that anymore. So I go over to DNS and I'll check the records that are configured for chinasite.xyz. And I can see there's a CNAME record that's pointing at my bucket endpoint there. 

Let's configure another one for www as well, so that we can have that point to our bucket. So I'll click Add Record. I'll make another CNAME record for www that points at our bucket endpoint, and I'll click Confirm. So now that that's done, I shouldn't be able to go to chinasite.xyz. And sure enough, I get cute bunnies and cute kitties. And you'll notice, I've actually linked, in the index.html file, I've actually set up two image tags that point to the images that are in the same OSS bucket. So those two images, that bunny and that kitten that I put into my bucket earlier, I can to those directly from within the index.html file that I've just added to my bucket. So you can put a full static site up here.

If you put CSS and JavaScript and image files into your bucket along with your HTML code, you can reference those. So that's what I've done. I've actually referenced these images inside my HTML. In fact, let's go View Source here, and sure enough, you can see this is the actual source for the page. And I've just got a relative tag here that points to bunny.jpg, which is the bunny file from earlier. And if I wanted, I could change this HTML to actually also apply a query-string to this URL, to process the image, that's also possible. So I can combine static web hosting with other features like image processing. And that's all for the static site demo.