We all know it's vital for your site to load as quickly as possible, both for user experience and search engine rankings. Lighthouse tells us: "Walmart found that for every 1 second improvement in page load time, conversions increased by 2%" showing page load optimization is potentially worth millions of dollars.
In this post, I'll show you how we can leverage Cloudflare's global network of edge locations to deliver your static site in under 0.3 seconds 🔥 The best part is: it's extremely straightforward to set up!
In less than 15 minutes, you will have lighthouse scores that look a lot like these! 🏎
What you need to get started 🏃🏻♀️
We will need a few things to get started:
A static site to host. I use a Nuxt (VueJS) site, but any site will work as long as it does not require server-side rendering (we can add this, it's just a bit more complex).
A Cloudflare project. You can sign in or register here. After signing up, you should be prompted to add a site by entering a domain name you own. The setup wizard will then guide you through setting up your site.
A Cloudflare API token. Visit this link and click "Create Token". Click "Use Template" next to "Edit Cloudflare Workers" to use a template that gives your API token the needed permissions. Then under "Account Resources" and "Zone Resources" select to include all. Finally, click through the continue buttons at the bottom until you are given your API token, copy this and store it somewhere safe for the next step!
Cloudflare's CLI tool (which they called Wrangler 🤠)
npm i @cloudflare/wrangler -g
This command will use npm to install the Wrangler CLI globally. Once installed, run
wrangler config
And, when prompted, enter the API token we generated in the previous step!
Building 🔨
We initialize our Cloudflare project by running the following command in our project directory.
wrangler init --site my-site-name
This will create a wrangler.toml in your project, which stores all the configuration for our deployment. It should look similar to this
name = "my-site-name"
type = "webpack"
account_id = ""
workers_dev = true
route = ""
zone_id = ""
[site]
bucket = ""
entry-point = "workers-site"
We need to enter the account_id, route, zone_id, and bucket.
For the account_id and zone_id you can simply copy them from your Cloudflare overview page.
For route we want to append /* to our domain name, for example, example.com/*. This will tell Cloudflare that we want every route on this domain to use our hosted static site.
Lastly, for the bucket field we want to provide the directory that contains our static assets generated by our build command. This is the directory where our raw HTML, CS, and JS are stored. For me, this is ./dist but yours will most likely be different (./public and ./build are also popular).
The final step is a little bit of a quirk - we need to tell Cloudflare to resolve traffic visiting our domain to Cloudflare workers (where we are hosting our static site). We do this by adding an A record that points to a random IP, I recommend 192.2.0.1.
Deploying 🚀
Good news: this is the easy part! If you have followed all the previous steps correctly, you can simply run
wrangler publish
To deploy your site to the world!
Automating this with CI 🤖
Now we have set everything up it is trivial to automate in our pipeline. Simply install the Cloudflare CLI like we did in this article and set your API key to an environment variable called CF_API_TOKEN.
Cloudflare also has integrations available with popular pipeline solutions which makes it even simpler! I use their integration with Github Actions available here.
How does this work? ⚙️
Cloudflare can deliver your content at lightning-fast speeds because the content is being served from an edge node, close to your user.
Traditionally, a website might be served from a central server or servers. However, this comes with some overheads, namely
- The cost of servers
- Managing and scaling servers
- Users further from the server will take longer to download your site and so will have a worse experience
Here is a map of Cloudflare's edge locations, as of their blog in 2019
As you can see, the vast majority of your site visitors will be close to an edge location and be able to fetch your site lightning fast. Additionally, all server management overhead is abstracted away, allowing you to focus on what differentiates your offering. 💯
Additional Resources 📚
Cloudflare has excellent documentation with specific examples and tutorials.
This kind of delivery is a core of the Jamstack. Read more about the Jamstack here.
Visit engineeredleader.com for the original article and to subscribe to the newsletter for more articles like this!
Top comments (0)