Hosting Static sites like Quartz on Cloudflare Pages

#cloudflare #namecheap #custom-domain #dns-transfer #cloudflare-pages #Hosting #Quartz-4 #Static-Site

Cloudflare workers and pages

Assuming you have your website built and ready to host/deploy in a repo.

  1. Access your cloudflare account.
  2. Go to cloudflare workers and start a project by pointing it to your own repo (you should only authorize it for one repo)
  3. Set your build command. Quartz example below:
    1. Production branch: v4
    2. Framework preset: None
    3. Build command: npx quartz build if you want to also grab the timestamps from git use git fetch --unshallow && npx quartz build
    4. Build output directory: public
  4. Save and Delply

With this you have your project up and running on cloudflare pages.

Setting up your custom domain

  1. Under your project click on: Custom domains -> Set up a custom domain
  2. type your domain in the box and click: continue -> begin DNS transfer
  3. type your domain again
  4. choose the plan tier (can be free)
  5. after cloudflare pulls your dns records, it will ask you to go to your domain name registrar (the entity you rent your dromain from) to change their "dns server" to the ones they give you
    1. If you're using namecheap you'll find it under "Domain" NOT "Advanced DNS"
    2. Find "Nameservers" and click the dropdown list to choose "Custom DNS"
    3. Add the two dns servers that cloudflare gives you and save it.
  6. click check nameservers and wait for an email from cloudflare telling you the transfer was complete
  7. click continue
  8. click Activate domain
  9. you can add an A record to your domain with the name www and the value being a random ip address, have that proxied through cloudflare and you're good to go.
  10. OPTIONAL: If the www doesn't work:
    1. Go to your dashboard (main page of your account)
    2. click on Bulk Redirects
    3. Give your list a name and give a description
    4. Click "manually add URL redirects"
    5. type your domain address with a www. preceeding it
    6. type your domain address without it as the target URL
    7. click Next -> Next
    8. It's going to ask you to add a rule for that, name it whatever you want (eg. www to root)
    9. Choose the domain or project this rule will apply to (in this case choose that worker project hosting your site)
    10. Click "Save and Deploy"

Enabling DNSSEC

  1. Once you've setup your domain with cloudflare you can go to your domain settings, on the left side you'll find DNS -> settings
  2. Click on Enable DNSSEC, and it will give you a list of values to input into your registrar (if you didn't rent your domain from cloudflare)
    1. In namecheap if you're using that one you can go to your domain
    2. Advanced DNS tab
    3. under DNSSEC enable it and add a row, fill the values of that row with the values cloudflare gives you for dnssec.

References: