Deploy your Website for free Cloudflare Pages

so I saw some tweets on my feed about how amazing cloud flare pages are and I thought maybe people don't know about Cloud flare pages so yeah here's a video about Cloud flare pages so if you don't know what cloud flare pages are it's a fast secure and free way to host your websites or particular Jam sites and it's by the company Cloud flare and I have been hosting few of the projects that you use on cloud flare pages so today I'm going to show you how easy it is to have your website that's built in you know next Astro react or any other cool Frameworks using Cloud Player Pages basically for free and get some features like cicd SSL and preview builds and also free web analytics so if you're new to the channel hi I'm rishab this is rishab in cloud and today we'll be looking at cloudflare pages so just to start here is pages. cloudflare.com and as you can see cloudflare pages is a jamstack platform for front-end developers to collaborate and deploy websites right and you can already see you have integration with Git and gitlab which means it is very easy to set up cicd and I'll show you with one of the projects that I've been working and it tells you about you know building a site is a team sport so you have previews you have unlimited seats for free right which means additional collaborators shouldn't break the bank with Pages you can add them all for free you also have built-in free web analytics which will dive in deeper but you're using Cloud flares Edge you know which is milliseconds from and users so you are up to 115% faster than competing platforms which Cloud flare claims it's incredibly scalable it's always secure so SSL works out of the box right and stay ahead of the curve so it supports the latest web standards which HTTP 3 image compression out of the box and more so you know it's amazing right I have been using it on the fre tier so one build at a time 500 builds per month which I I don't even know how many builds I do per month but I have at least four projects that are using Cloud flare pages but you have unlimited sites unlimited static requests and unlimited bandwidth which I care about and then you can look at Pro in business if you're really interested in but let me show you the project that I have so I've been working on this Astro portfolio template I started this a while ago but I haven't completed it um but I finally uploaded it to get so I have it saved somewhere uh centrally and the good features of Version Control System um if you haven't uh my current portfolio you can either go to re. cloud or reop command.com they both basically are the same site is built with Hugo I love it you know uh it's bare minimum it has my blog which is integrated with hash node but the Astro template that I'm using uh I'll link this in the description of course if someone is interested in building their template in Astro the reason why I'm using Astro is I wanted to explore it so I mentioned one of the goals for 2023 and 4 was nextjs and Astro has also seemed to be you know the one that's picking some traction within the community so I wanted to test it out and this is the basic site here so some info about me I have my links and then posts and projects I am into stoicism so I have a story code for you and then get in touch so so pretty simple this is a project itself uh it's the it's almost same as the template I've just you know added some content of mine and also made some changes to Tailwind uh to better match my C scheme but apart from that not a lot of changes and if we go to my cloud flare account you can see that if you use 7 Days of python it is being hosted on cloud flare Pages if you use the cloud resume API my challenge it is on cloud flare Pages even the devops guide is now hosted on cloud flare Pages just because I like the platform and how fast it is and it's free so if you go to Cloud resume api. this is the site that I'm talking about you know it's a beginner friendly Cloud challenge that you can take it's only available in AWS as of yet but I'm planning to expand it to Azure and gcp but that said this is built with material for Mk docs team so it's basically documentation kind of framework U but Cloud flare supports it so I was able to deploy this and have cicd as a cell all those good features so let's go ahead and do that for our reop dcloud d asro project that I was building so if we go into the workers and pages on the left hand side and I can zoom in a little bit in your Cloud flare account if you go to work workers and Pages click on overview and then click on create application by default it will take you to the workers tab you have to click on pages to deploy you know a website so if I click on connects to git you can choose GitHub or gitlab depending on what you use in my case I use GitHub and then I know my repository is called reub dcloud Das asro so I'm going to click that begin set set up and then you can see it already detected the production branch which is Main and then you have a lot of framework presets so you can see all of the presets that are available with Cloud flare pages so I won't go into all of them but I'll go pick Astro so I'll have a build command and also the output directory based on the framework default settings and then you also have the ability to set root directory if you have a mono repo with you know a backend and also environment variables if you know you have to set up Secrets I don't have any secrets so I'll click on Save and deploy so now you can see that it's building the Astro app and we'll deploy it to Cloud flares Global Network and you can see that all happening live in action here but what's cool is it has cicd built in so anytime I push any changes from my local to G it will do another build with those latest changes and deploy the latest version to Cloud Flare's Network again so that's awesome and you can see our upload has been completed your site was deployed so let's go ahead and visit this URL so it'll take some time for DNS to propagate so we'll wait for that to happen but if I go to GitHub and open my repo we'll see the cicd stuff happening so re- Cloud Astro so you can see that I have two actions now one of them was just a CI check right so it just does a check on the code but I have another action now which is cloud cloud flare pages and and it deployed successfully you can click on details and you can see that the deployment was successful and it also has a preview URL so every time you make a commit you'll have a different preview URL and this comes in handy if you have different branches like staging that you want to push out changes to before you push anything to production so if I click on that now it loads so if we refresh the main one it'll load so my portfolio has been deployed Ed to Cloud flare Pages within what seconds or minutes and it also has you know preview capabilities but you can see that it has SSL installed it is on very fast netk of cloud flare but you also have the ability to add custom domains so if I click on continue to project right you can go under custom domains and you can set up a custom domain so in my case I already have re. Cloud pointed to my previous portfolio that I showed you right this one so once I have completed my Astro project I'll start pointing it to this particular project in Cloud flare the other cool thing is analytics so most of people used Google analytics and I did too but I've been loving Cloud flare web analytics because they're so easy to set up so if you go to you know uh um the devops guide let's go to devops guide you can see that so since it's on cloud flare it was just one button install for analytics and you can see I have for the last 24 hours I have these countries that people are using the devops guite from I have 15 direct few YouTube references or referers Google my own personal website so it's very similar to Google analytics you get all the necessary information but also like core web vitals which I think is Handy and yeah you can also do custom range so for the last 30 days there have been 590 visits which is awesome and I have it enabled for most of my projects that live on cloud flare Pages because it's so easy to set up but yeah that was basically Cloud flare pages in a nutshell I hope you like the video and go ahead and use it for your own projects you know I think it's very handy that it's free it has you know security features it has cicd available and like the sites are pretty fast all over the globe so it you know the CDN or the edge Network that cloud flare has is pretty good but yeah I hope you found the video helpful and I'll see you in the next one peace

Channel: Rishab in Cloud

Views: 6,198

Keywords: cloudflare pages, cloudflare, deploy your website with cloudflare, cloudflare pages tutorial, how to deploy to cloudflare pages, cloudflare setup, setup cloudflare for wordpress, cloudflare pages review, how to setup cloudflare, how to host website on cloudflare for free, cloudflare cdn, how to host website on cloudflare for free (2023), cloudflare workers, deploy react app on cloudflare pages free, cloudflare free, cloudflare pages website, how to setup cloudflare free cdn

Id: k7fUkTQvCzk

Length: 10min 54sec (654 seconds)

Published: Fri Mar 01 2024