Host your website on Cloudflare

In this article, we will see how to host a static website using Cloudflare. While there are various methods to host a website, including using amazon S3, uploading files and providing public access, and configuring it for a custom domain.
And we have some other platforms like netlify, github pages and many more.

Here, we will focus on utilizing Cloudflare’s wide ranging features. Cloudflare is a global network of servers. When you add your application to Cloudflare, it uses this network to sit between requests and the origin server. This position allows us to perform many tasks such as content delivery to edge users, mitigation of malicious attacks on the website, and routing traffic efficiently.

Cloudflare functions not only as a Content Delivery Network (CDN) but also offers robust security measures, accelerated performance, SSL/TLS support, DDoS mitigation, R2 storage, and many other advanced features.

Steps to Perform Hosting on Cloudflare:

• Create an account in cloudflare, cloudflare has different plans based on features we need.
• For our hosting, the free plan is sufficient. It provides free CDN, DDoS protection, up to 3 page rules, Bot fight mode, a Universal SSL certificate, and up to 5 WAF custom rules.
  All these features are more than enough for hosting a website.

cloudflare free plan features

• In addition to the above mentioned features, Cloudflare has also introduced a global object storage with zero egress fees, known as R2.
• After creating the account on Cloudflare, register your custom domain.

Adding a Domain in Cloudflare:

1. After logging into Cloudflare, you’ll see the ‘Websites’ tab on the top left. Click on “Add site”, enter your domain, and when prompted for the plan, choose the free plan.
2. In the next step, add your domain’s Nameservers. You can obtain these from your domain purchase platform or register a new domain directly within Cloudflare.
3. wait for DNS propagation. This can take a few minutes or longer. Once completed, your domain will be active on cloudflare.
4. click on the active domain and configure the ssl certificates. In the left pane, navigate to the ‘SSL/TLS’ tab, enable encryption mode by choosing either ‘Flexible’, ‘Full’, or ‘Full (strict)’ based on your needs.
5. Always use HTTPS: Create a rule under ‘Rules’ -> ‘Redirect Rules’ that redirects all HTTP requests to HTTPS.

Rule that redirects http to https

Now, you are ready with the domain configuration.

Cloudflare R2:

In short brief, cloudflare R2 is a global object storage service similar to amazon S3. It offers 10GB of free storage per month, along with 1,000,000 write operations (Class A operations) and 10,000,000 read operations (Class B operations) per month.
Charges apply only if you exceed the limits.

R2 pricing

To utilize the R2 service, first activate it in your Cloudflare dashboard. Once the R2 service is active, proceed to create a bucket with your preferred name.
Within the R2 dashboard, you’ll find three main sections: Objects, Metrics, and Settings.

• Objects: Here, you can drag and drop your files to upload them to R2 from your machine.
• Metrics: This section provides a summary of the storage and operations of your bucket.
• Settings: This section allows you to enable public access, connect the bucket to your custom domains, set lifecycle rules for objects, and more.
  Now upload your website files to your bucket.

uploaded website files in R2

Then, click on ‘Settings’, navigate to ‘Public Access’, and click on ‘Connect Domain’.

Add your domain name that you previously configured in the Cloudflare website settings, it may take a couple of minutes to establish the connection. If it takes longer than expected, you can click on ‘Retry Connection’.
Once connected, the status will display as ‘Active’.

connect domain to R2 bucket

That’s it! Your bucket is now publicly accessible, but it won’t be accessible from your custom domain’s root path.

Currently, public buckets do not let you list the bucket contents at the root of your (sub) domain.

For example, you can access files using the URL: https://krupakar.cloud/index.html. Although, it's not ideal to access it in this manner.
To make the access more user-friendly, we can utilize the 'Page Rules' feature. This feature allows your domain to automatically route to the index.html page.

To set this up:

1. Select your website in the Cloudflare dashboard.
2. On the left pane, click on the ‘Rules’ tab and select ‘Page Rules’.
3. Create a new page rule. Enter your domain in the ‘URL’ field.
4. In the ‘Pick a Setting’ section, choose ‘Forwarding URL’ and redirect it to the destination URL.
5. After selecting ‘Forwarding URL’, choose your desired status code (e.g., 301 — Permanent Redirect).
   For example, when you enter krupakar.cloud, it should automatically redirect to krupakar.cloud/index.html.

That’s it! Now, when you visit your domain(eg: krupakar.cloud ), you’ll be able to access your website seamlessly.

I hope you found this helpful. Your feedback and suggestions are always welcome!

thank you!!!