Using Google Cloud Storage + Cloudflare to Host a Static Website for just PENNIES PER MONTH!

[@DevOpsDirective]

What is your preferred method for hosting static sites and why?

[@NullLabs]

I really like github pages :) pages.github.com/ but have also hosted them on kubernetes because i'm a sucker.

[@somebinchicken]

I'm a fan of jamstack with netlify though I'm going to give this method a try! Excited to combine it with cloud functions

[@DevOpsDirective]

@@NullLabs Github pages is great! One thing I like about this solution over GH pages is that GH pages doesn't come with any sort of SLA while GCS does

[@DevOpsDirective]

@@somebinchicken Netlify has one of the best onboarding user experiences in the business! It is so quick/simple to set up (including automated deployments). It does start to get a bit expensive if you have a team of more than a few people that need to contribute to the site.

[@zipjet7491]

This video was way way more useful then anything on googles support pages thank you! Ive gone through this tutorial twice on different occasions and each time its resolved my issue! Thank you.

[@sureshkrishnan83]

i am sys admin slowly trying to learn the development side of work and i find your videos are simple and clear and able to follow along. Thanks for taking your time to share your knowledge for rest of the world to benifit . i could hit the like button 100 times if there is option but i can't haha. keep up the good work thanks :)

[@DevOpsDirective]

Thanks @Suresh! It is rewarding for me to hear the videos are helping people learn new skills! ...And as for the like button, hitting it one time is plenty 😁

[@TuomoKankaanpaa]

Very nice! 👌 I have usually bought some ftp space from some service provider and hosted my site there. I will definitely look into this next time I need hosting for a static site.

[@DevOpsDirective]

Awesome, thanks Tuomo! Just a heads up, one additional thing I didnt cover in the video is how to set up both the root domain and "www" subdomain pointing to the same site. I had to create a dummy A record for the "www" subdomain (pointing to 192.0.2.1) and then set up a Cloudflare page forwarding rule from "www.devopsdirective.com/* to "devopsdiretive.com/$1"

[@AdrianCChase]

Hi, thank you very much for this video, this is exactly what I was looking for! I had previously been using a GCP load balancer with a static IP and an A record on cloudflare to configure my static website with a bucket. The load balancer is quite expensive even with no use... this let me remove it and simply use cloudflare directly to the bucket! Thanks again! Quick question out of curiosity, how does the cname record to a bucket with the name of the domain resolve to your static website? Is this how GCP is configured?

[@DevOpsDirective]

On the cloudflare side the CNAME just points to c.storage.googleapis.com and then GCP does the matching of requests to your bucket (presumably based on the hostname specified in the request). I don't have any particular knowledge of how they have things configured internally, but the fact that the bucket name must match the domain (and bucket names are globally unique) makes that a seem like a reasonable approach.

[@sam-zy2dn]

Hello and thanks! The way that you mentioned here is essential if you have a domain. However, if I do not have a domain and you want to serve a static website like React build folder in the buckets how could we do it? So basically we just use the IP of the load balancer somehow but it should only show the index.html and also have the possibility to load static contents (js, css ) links inside the index.html Do you have any tips for it?

[@DevOpsDirective]

I dont know if you can use GCS to host a static site in this way unless it is attached to a domain. You could look at using something like www.netlify.com/ which I think will give you a free test domain...

[@sam-zy2dn]

@@DevOpsDirective thanks! I managed it actually but one problem is that If I enter the only bucket address in URL I get access denied even though, I added index.html ( which is in the root of the bucket) as the main page in the bucket website configuration. Anyone has any idea why the bucket does not routed to index.html if I just go to the bucket URL?

[@carlosquinto1383]

Do you need to add any Rules to CloudFlare to resolve www and http vs https?

[@DevOpsDirective]

Yeah, you can use a page rule to redirect requests to the www subdomain to your root domain. Mine looks like: www.devopsdirective.com/* Forwarding URL (Status Code: 301 - Permanent Redirect, Url: devopsdirective.com/$1) I also use an A record of: A www 192.0.2.1 (See: community.cloudflare.com/t/using-page-rules-to-perform-redirects/55386 ) For HTTP -> HTTPS redirects, there is a setting named "Always Use HTTPS" under SSL/TLS > Edge Certificats

[@jonathanvojtush2757]

Can you make a version with a Cloudflare Origin Certificate? To be more secure and to standard

[@brunovincent1969]

Excellent, is there a way to do this with Wordpress or database driven php sites?

[@DevOpsDirective]

Unfortunately this only works for static sites. For Wordpress or similar you need an actual server. GCP does have a free tier that includes one e2-micro instance. Depending on the application you might be able to run it there :)

[@dalenegarcia3444]

thanks for the video. Do you have a copy of the coding on gsutil commands? :)

[@DevOpsDirective]

I'm glad you liked it! The code can be found in the GitHub repo linked in the description!

[@dalenegarcia3444]

@@DevOpsDirective thank you for the reply. Im not good with using coding commands. Is there another way around it with out having to do the coding? :D

[@noone-rh7pd]

i think you are awesome and you make things sound very simple but i would like to recommend that you get some mic that would make your voice more clear not that we cant hear you from this one but it would help a lot thank you and i hope you reach one billion subs today

[@DevOpsDirective]

Hi @no. one -- thanks for the kind words about the content! Getting clean audio is definitely something I have struggled with -- I find even it more challenging than the DevOps concepts I'm explaining! I was hoping that using the lav mic as I did for this video would help, but it sounds like it still hasn't quite made the cut 🤔 Any particular suggestions? (e.g. is the sound too soft? muffled? too much background noise?) Thanks!

[@noone-rh7pd]

Well it is very clear but with someone with this good experience and ability i thought you might give a little more effort ... The sound is kinda muffled but not that much like i said it is very clear the way i see it you deserve more quality tools for the experience you have and would have helped with that but sadly im not good with these sort of things i just gave my note that would make you a better reference for new people in programming .

[@DevOpsDirective]

@@noone-rh7pd Thanks -- I'll continue to iterate on it! Perhaps once I hit 1000 subs I'll celebrate by investing in some equipment upgrades!

[@noone-rh7pd]

Yea that is a good idea i wish you the best of luck my friend

[@freedom6984]

Hello, is it possible to host an email funnel like this?

[@DevOpsDirective]

Hmm, this only works for a static site. It could have a landing page with an input form that the responses get passed to a server (or serverless function) but wouldn't be able to handle it by itself. Does this answer your question?

[@freedom6984]

@@DevOpsDirective yes, thanks. I believe it's easier to do with a regular hosting then.

[@DevOpsDirective]

Viewer @Ashish Gaikwad created a GitHub gist with the commands from the video, but for some reason, KZbin is blocking the comment he left about it. The Gist can be found here: gist.github.com/ashgkwd/a3c412e4f0c0c38c352683c7f25bce37