Get Top Lighthouse Scores By Hosting Your Static Site With Cloudflare 
Tags: cloud, tutorial, jam
Published: 2021-01-02 17:55:14

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! 🏎

![Page Speed Scores All 100](https://dev-to-uploads.s3.amazonaws.com/i/fxwgg68h2zy5l44w81ho.png)

## 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). <br><br>

* A Cloudflare project. You can sign in or register [here](https://www.cloudflare.com/). 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.<br><br>

* A Cloudflare API token. Visit [this link](https://dash.cloudflare.com/profile/api-tokens) 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 API Key Generation](https://dev-to-uploads.s3.amazonaws.com/i/1qj3uksi0mdiq56mfyjr.png)
<br><br>

* Cloudflare's CLI tool (which they called Wrangler 🤠)
  ```bash
  npm i @cloudflare/wrangler -g
  ```
  This command will use npm to install the Wrangler CLI     globally. Once installed, run 

  ```bash
  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.

```bash
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

```toml
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.

![Cloudflare Dashboard Showing "Account ID" and "Zone ID"](https://dev-to-uploads.s3.amazonaws.com/i/td9qpk0zla211vsdt8xb.png)

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`.

![Cloudflare DNS Dashboard Showing A New "A Record"](https://dev-to-uploads.s3.amazonaws.com/i/jw44wjj3j7tdmoobg1v1.png)

## Deploying 🚀

**Good news: this is the easy part!** If you have followed all the previous steps correctly, you can simply run

```bash
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](https://github.com/cloudflare/wrangler-action).

## 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](https://blog.cloudflare.com/scaling-the-cloudflare-global/) in 2019

![Cloudflare Edge Locations](https://dev-to-uploads.s3.amazonaws.com/i/2udkj1yyghcwi3p4n5pf.png)

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](https://developers.cloudflare.com/workers) with specific examples and tutorials.

This kind of delivery is a core of the Jamstack. Read more about the Jamstack [here](https://jamstack.org).

Visit [engineeredleader.com](https://engineeredleader.com/articles/aws/host-your-static-site-on-cloudflare) for the original article and to subscribe to the newsletter for more articles like this!