setting up zeit with cloudflare

Bradley Kingsley
Published a year ago.
7 minute read
logo of undefined

If anyone was to ask me what my favorite static file hosting site is, Zeit takes the cake, hands down. If you'd posed the same question to me a few months ago, I'd gladly have preached the beauty that is Netlify, but after they introduced the new 300 build minutes a month plan with the Free plan, I was far less than ecstatic. After poking my nose around for a bit, I rediscovered Zeit, having shunned it before out of sheer blind love for the sophistication Netlify had introduced to my life.

Since I discovered Zeit, it was time to slowly move everything over from Netlify. The Zeit platform is pretty nifty. Almost everything is relatively straightforward, except... dealing with DNS changes.

Zeit is a terminal-first piece of software. Everything from managing your websites to buying a domain name can be done using their simple-to-use now command. The only problem is, I'm not much of a terminal guy myself.

After struggling for a while with adding aliases and whatnot, I decided to do the same thing I did with my Netlify infrastructure while I still had it - use Cloudflare for DNS services and Zeit for hosting. As it turns out, it wasn't as straightforward as I'd hoped. After a bit of tinkering, I managed to get everything to work and decided to create this guide to help souls that may be as lost as me on what to do.

In this project, I'll be setting up one of my other domains: The Itchy Writer. It is currently hosted in Github Pages, but it comes with too many restrictions. For a site that's still in development like mine, 10 builds per hour are nothing but a constant anxiety train I'd rather not deal with.

Setting Up Zeit

First things first, we need to set up our Zeit project.

Assuming you've already connected your Github/Gitlab account, head over to Zeit > Domainsand click on 'Add'.

This should bring up a dialog that lets you select a project you want to connect from git to your Zeit account.

zeit dashboard

After clicking 'continue', a new dialog that prompts you to add a domain name should come up

zeit dashboard 1

Add your domain name and proceed to the next step. You will be met with a page that looks something like this:

zeit dashboard 3

Notice that this site already relies on Cloudflare nameservers, but changing yours should be pretty straightforward.

We'll be using Cloudflare as the DNS resolver, so we don't need to change over to Zeit's nameservers.

Click on the 'ANAME' tab

zeit dashboard 4

then copy the values under 'Host' and 'Value' sections.

Setting Up Cloudflare

Under the 'DNS' section of your Cloudflare dash, create a new TXT record and paste the details in their respective boxes, like so and hit 'save'.

zeit dashboard 5

After about two minutes, your Zeit dashboard should reflect the change.

Create a new CNAME record in your Cloudflare dashboard like so:

zeit dashboard 6

Here, the most important thing to remember is to turn off Cloudflare's DNS proxy initially. Hit 'Save' when you're done to proceed to the next step.

Zeit should be fine with this.

zeit dashboard 7

Setting up SSL

If you try to load your website now, you'll get a nasty 404 error because we've not yet assigned the domain to a production build. But before that, we need to make sure our site is set up to always serve over HTTPS. We'll do just that.

Back in your Cloudflare dashboard, click on the SSL/TLS tab and either turn the encryption to 'Full' or 'Full/Strict'

cloudflare dash 1

Under the same tab, click on 'Origin Server', then 'Create Certificate'. A popup like this should come up:

cloudflare dash 2

Unless you want to change some settings, the defaults should just be fine. Click on 'Next' to continue.

The next popup will present you with two fields - the 'Origin Certificate' and 'Private Key.' You should copy the private key into a file and store it securely because Cloudflare doesn't store them on their servers. You will need both details shortly.

Still on your Cloudflare dashboard, head over to the 'Page Rules' tab and click on 'Create Page Rule.'

Paste the following into the dialog box that pops up *<yourdomain.com>/.well-known/acme-challenge/*(Replace 'yourdomain.com' with your domain name, of course).

Click on 'Add a Setting' and select 'SSL' 'Off' then 'Save and Deploy.'

cloudflare dash 3

Click on 'Save and Deploy.'

Hop back onto your Zeit dashboard and under the 'Domains' section of your project, click on 'edit' then 'Advanced Settings'

zeit dashboard 8

On the next page, click on 'Upload' and a new dialog should come up.

Paste the value from the 'Origin Certificate' field, including the -----, BEGIN PRIVATE KEY----- and -----END PRIVATE KEY-----parts into the first dialog box and click on 'Continue'

zeit dashboard 9

In the next dialog box, paste your Origin Certificate. This should include the -----BEGIN CERTIFICATE----- and -----END CERTIFICATE----- text.

zeit dashboard 10

And in the final dialog box, paste your Origin Certificate again. This should also include the -----BEGIN CERTIFICATE----- and -----END CERTIFICATE----- text.

zeit dashboard 11

When you're done, click on 'Upload'.

All the hard work is done. All that's left is to assign our project to a deploy and we will be good to go.

Back on your Zeit dash, select your project, and, under 'Recent Deployments', click on the three dots close to the most recent deployment (or any other deployment if you want to jump back to an old deploy) and click on 'Assign Domain'

zeit dashboard 12

Then just enter your domain name and, voila.

zeit dashboard 13

Visiting your domain name should now resolve your website.

Finishing up

Now, all that's left to do is to turn on Cloudflare's DNS proxy if you like. If you do, Zeit will throw you an error saying 'ANAME is not configured' but you can safely ignore this.

If you want to add a 'www' subdomain, hop back onto your Cloudflare dashboard and add a new CNAME entry with the Proxy status turned off: cloudflare dns off

cloudflare dash 4 1

Back on your Zeit dashboard, under your 'Domain Settings' enter your domain and click on 'Add'

zeit dashboard 14

For this subdomain to work over HTTPS, you have to enable the Cloudflare Proxy, otherwise, you'll run into a certificate error. i.e.

cloudflare dash 5

Again, Zeit might throw an error:

zeit dashboard 15

But you can safely ignore it at this point.

Copyright © 2020 The Kenyan Dev