{"id":334164,"date":"2021-03-02T16:30:25","date_gmt":"2021-03-03T00:30:25","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=334164"},"modified":"2022-11-03T11:47:34","modified_gmt":"2022-11-03T18:47:34","slug":"203-a-first-look-at-cloudflare-pages","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/203-a-first-look-at-cloudflare-pages\/","title":{"rendered":"#203: A First Look at Cloudflare Pages"},"content":{"rendered":"\n

Cloudflare Pages<\/a> is Jamstack hosting, meaning it’s a static file host that runs your builds and lets you do dynamic things<\/a> with JavaScript and services. You might normally think of Cloudflare as something you put in front of your site’s hosting, but this is<\/em> your site’s hosting. Extreme speed is what you’ll get right out of the gate here.<\/p>\n\n\n\n

In this video, Chris is joined by Cloudflare’s Kristian Freeman<\/a> to play with the product and see how it works. We spin up a Nuxt.js<\/a> site locally, push it to a GitHub repo, and have Cloudflare Pages pick it up from there and deploy it. Cloudflare Pages knew exactly how to run that build and it worked great. It even builds pull requests against that repo and generates preview URLs.<\/p>\n\n\n\n\n\n\n\n

Then we took an existing Eleventy site<\/a> I already have in a repo, and followed the steps to deploy it on Cloudflare Pages, which also worked perfectly. It’s a nice touch of Cloudflare Pages that it helps you update the DNS to set up the hosting correctly.<\/p>\n\n\n\n

Why pick Cloudflare Pages? They are offering quite a few “unlimited” features: Unlimited sites, unlimited requests, unlimited bandwidth, and as Kristian and I talked about in the video, unlimited and free team member seats. The only thing you pay for is the number of builds (like if you push more than 500 times a month, then you bump up to the next tier for 5,000 builds a month, which is only $20). <\/p>\n\n\n\n

We talk about a few other things in the video, like how powerful and useful Cloudflare Workers<\/a> are and managing permissions with Cloudflare Access<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Cloudflare Pages is Jamstack hosting, meaning it’s a static file host that runs your builds and lets you do dynamic things with JavaScript and services. You might normally think of Cloudflare as something you put in front of your site’s hosting, but this is your site’s hosting. Extreme speed is what you’ll get right out […]<\/p>\n","protected":false},"author":3,"featured_media":334069,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[634,18898,1401],"acf":[],"jetpack-related-posts":[{"id":298178,"url":"https:\/\/css-tricks.com\/video-screencasts\/177-local-wordpress-development-to-production-workflow\/","url_meta":{"origin":334164,"position":0},"title":"#177: Local WordPress Development to Production Workflow","date":"November 4, 2019","format":false,"excerpt":"This is the basics of how I work locally with a WordPress site, and then getting it to production. Flywheel is a sponsor of CSS-Tricks, and I'm glad they are because they make great products. Flywheel is at the heart of this workflow. First, Local by Flywheel is a tremendously\u2026","rel":"","context":"In \"buddy\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/Social_1080x1080-red-pennant.png?fit=1080%2C1080&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":306715,"url":"https:\/\/css-tricks.com\/video-screencasts\/183-art-directing-images-the-picture-element-and-image-cdns\/","url_meta":{"origin":334164,"position":1},"title":"#183: Art Directing Images, the Picture Element, and Image CDNs","date":"April 21, 2020","format":false,"excerpt":"It's a bonafide phenomenon! I'm talking about the idea of image hosting services that allow you to manipulate the URL to the image in order to transform it. In other words, if you need multiple copies of an image in order to do justice for the responsive images syntax, you\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":324800,"url":"https:\/\/css-tricks.com\/video-screencasts\/197-a-look-at-stackbit-and-stackbit-studio\/","url_meta":{"origin":334164,"position":2},"title":"#197: A Look at Stackbit and Stackbit Studio","date":"November 2, 2020","format":false,"excerpt":"The Stackbit app helps you kick out a new Jamstack site very quickly. Pick a theme, a static site generator, and a CMS and it'll get a repo going for you on the double. Stackbit has gotten much more powerful that that though, because now it also has a visual\u2026","rel":"","context":"In \"headless cms\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/thumb-stackbit.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":320969,"url":"https:\/\/css-tricks.com\/video-screencasts\/193-scully-the-ssg-for-angular\/","url_meta":{"origin":334164,"position":3},"title":"#193: Scully: the SSG for Angular","date":"September 23, 2020","format":false,"excerpt":"Tara Z. Manicsic\u00a0joined me for this video, setting up the very basics of Scully, which is a Static Site Generator for Angular \u2014 nay, the SSG for Angular, as Tara pointed out to me. I don't know much Angular at all. In fact, I didn't have the Angular CLI installed\u2026","rel":"","context":"In \"angular\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/scully-video-thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":19744,"url":"https:\/\/css-tricks.com\/video-screencasts\/117-lets-attempt-to-do-a-pull-request\/","url_meta":{"origin":334164,"position":4},"title":"#117: Let’s Attempt To Do a “Pull Request”","date":"January 5, 2013","format":false,"excerpt":"I've never in my life submitted a \"Pull Request\" on GitHub. I wanted to give it a shot, so this video is capturing the moment of me attempting to figure it out. Fair warning, this isn't a succinct, quick tutorial. This is me thinking to myself and struggling through it\u2026","rel":"","context":"With 18 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":345672,"url":"https:\/\/css-tricks.com\/video-screencasts\/209-a-netflix-clone-with-datastax-astra-and-netlify\/","url_meta":{"origin":334164,"position":5},"title":"#209: A Netflix Clone with DataStax Astra and Netlify","date":"August 6, 2021","format":false,"excerpt":"I paired up with David Jones-Gilardi of DataStax to go through one of the workshops they have put together (with Ania Kub\u00f3w, who has a video you should watch as well) that does a good job of showcasing how nicely DataStax Astra pairs up with the Jamstack approach. Here's the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/netflix-thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/334164"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=334164"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/334164\/revisions"}],"predecessor-version":[{"id":375057,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/334164\/revisions\/375057"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/334069"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=334164"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=334164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}