{"id":4427,"date":"2022-10-20T17:00:41","date_gmt":"2022-10-20T21:00:41","guid":{"rendered":"https:\/\/cindypotvin.com\/?p=4427"},"modified":"2022-10-20T17:11:11","modified_gmt":"2022-10-20T21:11:11","slug":"hosting-a-static-website-for-free-in-15-minutes-with-cloudflare-workers-sites","status":"publish","type":"post","link":"https:\/\/cindypotvin.com\/hosting-a-static-website-for-free-in-15-minutes-with-cloudflare-workers-sites\/","title":{"rendered":"Hosting a static website for free in 15 minutes with Cloudflare Workers Sites"},"content":{"rendered":"<p>I&#8217;ve had an old school PHP hosting for ages, and I&#8217;m currently moving all the sites I&#8217;m hosting there to newer and more effective technologies. <\/p>\n\n\n\n<p>I have a few static sites included in the mix: I&#8217;ve been writing pure HTML + CSS for so long that it&#8217;s still my favorite solution if I want to spin up a quick landing page for a project.<\/p>\n\n\n\n<p>The best solution for me ended up being Cloudflare&#8217;s Worker Sites. The setup is simpler than using a static page generator, and once it&#8217;s done a new version can be deployed in an instant with a single command. The server is quick, and it&#8217;s free (up to a decent bit of traffic)! <\/p>\n\n\n\n<p>Cloudflare also has a Pages product that takes the static result of a build from a git repository from a site built with tools such as React, but I have not tested it, and my use case is simple enough right now that it&#8217;s not worth setting up a git repo for each site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Site to deploy<\/h2>\n\n\n\n<p>I decided to start the move with one of my newest project: <a href=\"http:\/\/manibas.com\">http:\/\/manibas.com<\/a>, a site to sell my hand cranked socks. For a quick rundown of the landing page :<\/p>\n\n\n\n<ul><li>HTML\/CSS all the way, except one little bit of JavaScript to display the site in English or French depending on the language of the browser, and for a button to switch manually. <\/li><li>Pure CSS without a framework or library. I used <a href=\"https:\/\/coolors.co\">https:\/\/coolors.co<\/a> to help me pick colors and <a href=\"https:\/\/fontjoy.com\/\">https:\/\/fontjoy.com\/<\/a> to pick fonts.<\/li><li>Payment is handled by a Stripe Payment button. I have a US\/Canada and an International button since the shipping price is too different. I&#8217;ll handle the rest, such as sizing and color by email when I have orders.<\/li><li>No contact form, people can reach out on Instagram if they have more questions or comments.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>You&#8217;ll need the LTS version of NodeJS to install the required tool, a free Cloudflare account and a domain name to point to the site that&#8217;s already going through Cloudflare.<\/p>\n\n\n\n<p>You also need an <code>index.html<\/code> file ready to deploy (ideally with a few other assets like images).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting up the project<\/h2>\n\n\n\n<p>To deploy the site, you need to install Wrangler, the command line tool to work with Cloudflare Workers. In any folder, run <code>npm install<\/code> to install the tool globally:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npm install -g wrangler<\/code><\/pre>\n\n\n\n<p>After having installed Wrangler, initialize the project from the folder you want to use, which will create a <code>package.json<\/code> and the required boilerplate:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npx wrangler init -y<\/code><\/pre>\n\n\n\n<p>There is a small bit missing, since you&#8217;ll most likely have more than just a <code>index.html<\/code> file and will need to route to other static assets such as images, fonts or an external CSS file. Install the package that handles routing to static assets inside Cloudflare Workers:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npm install --save-dev @cloudflare\/kv-asset-handler<\/code><\/pre>\n\n\n\n<p>Also, replace the content of the generated <code>src\/index.ts<\/code> with the following code snippet from the Cloudflare documentation to handle the routing (<a href=\"https:\/\/developers.cloudflare.com\/workers\/platform\/sites\/start-from-existing\">https:\/\/developers.cloudflare.com\/workers\/platform\/sites\/start-from-existing<\/a>):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">import { getAssetFromKV } from \"@cloudflare\/kv-asset-handler\";\n\naddEventListener(\"fetch\", (event) => {\n  event.respondWith(handleEvent(event));\n});\n\nasync function handleEvent(event) {\n  try {\n    \/\/ Add logic to decide whether to serve an asset or run your original Worker code\n    return await getAssetFromKV(event);\n  } catch (e) {\n    let pathname = new URL(event.request.url).pathname;\n    return new Response(`\"${pathname}\" not found`, {\n      status: 404,\n      statusText: \"not found\",\n    });\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>Finally, specify the root URL to use and the folder containing the files that needs to be published in the <code>wrangler.toml<\/code> file that was created by Wrangler.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">route = \"https:\/\/manibas.com\/*\"<br>[site]<br>bucket = \".\/public\"<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Deploying the static page<\/h2>\n\n\n\n<p>To deploy, move all the content that needs to be published under the <code>public<\/code> folder that was specified in the <code>wrangler.toml<\/code>, including an <code>index.html<\/code> file as the root file.<\/p>\n\n\n\n<p>Your site is now ready to deploy! Run that last command in the folder of the project, and Wrangler will upload your static files and push it live using domain name your specified.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npx wrangler publish<\/code><\/pre>\n\n\n\n<p>If it&#8217;s your first time running Wrangler to connect to Cloudflare, it will also ask you to authenticate to your account and to enable Workers if they are not active yet, but it will remember your identity for a while. You just need to run that command again if you want to deploy a new version of the site.<\/p>\n\n<!--themify_builder_content-->\n<div id=\"themify_builder_content-4427\" data-postid=\"4427\" class=\"themify_builder_content themify_builder_content-4427 themify_builder tf_clear\">\n    <\/div>\n<!--\/themify_builder_content--><iframe loading=\"lazy\" src=\"https:\/\/newsletter.cindypotvin.com\/embed\" width=\"100%\" height=\"320\" frameborder=\"0\" scrolling=\"no\"><\/iframe>","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve had an old school PHP hosting for ages, and I&#8217;m currently moving all the sites I&#8217;m hosting there to newer and more effective technologies. I have a few static sites included in the mix: I&#8217;ve been writing pure HTML + CSS for so long that it&#8217;s still my favorite solution if I want to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4442,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[9,44],"jetpack_featured_media_url":"https:\/\/cindypotvin.com\/wp-content\/uploads\/2022\/10\/2022-10-20_17-03-37.png","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"builder_content":"","_links":{"self":[{"href":"https:\/\/cindypotvin.com\/wp-json\/wp\/v2\/posts\/4427"}],"collection":[{"href":"https:\/\/cindypotvin.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cindypotvin.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cindypotvin.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cindypotvin.com\/wp-json\/wp\/v2\/comments?post=4427"}],"version-history":[{"count":9,"href":"https:\/\/cindypotvin.com\/wp-json\/wp\/v2\/posts\/4427\/revisions"}],"predecessor-version":[{"id":4444,"href":"https:\/\/cindypotvin.com\/wp-json\/wp\/v2\/posts\/4427\/revisions\/4444"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cindypotvin.com\/wp-json\/wp\/v2\/media\/4442"}],"wp:attachment":[{"href":"https:\/\/cindypotvin.com\/wp-json\/wp\/v2\/media?parent=4427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cindypotvin.com\/wp-json\/wp\/v2\/categories?post=4427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cindypotvin.com\/wp-json\/wp\/v2\/tags?post=4427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}