How To Create a Website on Cloudflare

25 March 2026

Description

Steps

1. create a domain name 
2. connect content using github

   
   You can put your content on github (for example, create a repo called www.yoursite.com) and then connect cloudflare to the github repository. Then everytime you push content, cloudflare runs a worker to publish the content. You can control automatic builds, use branches and preview links before publishing, etc.

   Warning: if you deploy using github you cannot switch to Direct Upload later.

   Note: before beginning, I recommend you name your github repo www.yoursite.com to match the domain

   Note: you can generate preview URLS for other branches without affecting your production deployment.

   Note: If you do not want to trigger deployments when you push to github, include [skip ci] in the commit message (see Other Things To Do).

   
   

   1. on the cloudflare main dashboard click on the blue +Add button
   2. from the drop-down menu pick Pages
   3. select import an existing Git repository
   4. on this page, down at the bottom in small grey font, click on the link:
      "If your repository is not shown, configure repository access for the Cloudflare Pages app on GitHub."
   5. this opens a new tab and asks for your github six digit auth code from the auth app on your phone
   6. scroll down to "Repository Access" and click "Only select repositories" and select the repo
   7. close the tab and go back to the cloudflare tab and refresh. You should see a box with repo now
   8. click on the repo box and then the Begin Setup button
   9. set the root directory (advanced) and set to /public. Then click "Save and Deploy"
      this creates a site at https://www-yoursite-com.pages.dev/
   10. click on "add a custom domain" box (on the success page)
       (this is the same as dashboard → compute → Workers & Pages and then selecting the Custom domains tab along the top)
   11. click on add a custom domain and enter it as www.yoursite.com (full name, not just the APEX)
   12. wait a few minutes for the site to activate

   You will need to do some more things such as redirecting the bare APEX name to www, setting up an error.html page, etc. Click on Other Things To Do
3. other ways to connect content to Cloudflare:
• use drag and drop

  Direct Upload (Drag And Drop)

  Direct Upload enables you to upload your content to CloudFlare Pages and deploy them to the Cloudflare global network. You should choose Direct Upload over git integration if you want to integrate your own build platform or upload from your local computer.

  Warning: if you choose Direct Upload, you cannot switch to Git integration later. You will have to create a new project with Git integration to use automatic deployments. I am not sure what this entails.

  Note: alternatively, You can use cloudflare's wrangler   to do direct-upload from your computer.

  
  

  1. On cloudflare's dashboard page, on the left side bar, click on: Compute → Workers & Pages
  2. Click on the blue Create application button
  3. Click on the link Looking to Deploy Pages? Get started
  4. Click on Drag and drop your files Get started button
  5. enter yoursitename (e.g. www-yoursite-com) for the project name (it will be served on .pages.dev)
  6. drag and drop your content

  
  To link <project_name>.pages.dev to your custom domain name add following DNS records:
  

  Type	Name	Content	Proxy status	TTL
  A	WWW	192.0.2.1	proxied	Auto
  CNAME	yoursite.com	project_name.pages.dev	proxied	Auto

• use cloudflare workers

  Using Cloudflare Workers

  Note: cloudflare workers also support Git integrations to automatically build and deploy Workers from your connected Git repository. learn more in workers builds  

  1. in git check-in a wrangler configuration file: wrangler.jsonc

                     {
                     "name": "www-yoursite-come",
                     "compatibility_date": "2026-01-31",
                     "assets": {
                     "directory": "./public"
                     }
                     }

  2. dashboard → Compute&AI → Create application → Pages → Connect to Git
  3. pick your cloudflare user, select repo want access
  4. enter github user and use mobile phone auth code (or login) to verify
  5. then pick github againa dn select a repository
  6. add a custom domain to the worker/page under:
     compute & AI → Workers & pages → www-yoursite-con settings tab
     domaind & routes +Add
     www.yoursite.com
     

  References

  learn more in workers builds  
  
• connect to AWS  
4. set up additional configuration

   Other Things To Do

   Now that you have connected your custom domain to cloudflare's pages mechanism, there are several things to do to finish up (such as setting up error pages, redirecting apex to www, toggling builds, etc).

   Always Use HTTPS

   always use https  
   go to managing the specific domain
   select SSL/TLS on the right sidebar, then configure. It should be on
   on the sidebar → edge certificates, turn on always use HTTPS
   turn on Always Use HTTPS
   

   How to redirect http to https

   in the left sidebar pick rules → overview
   add template rule redirect from HTTP to HTTPS
   use the defaults and deploy
   

   How to redirect apex/root to www

   for example: https://yoursite.com to https://www.yoursite.com
   cloudflare go to yoursite.com
   pick DNS records on left and add DNS record:
   A @ 192.0.2.1 proxied
   in the left sidebar pick rules → overview
   add template rule to redirect from root to www
   use the defaults:
   incoming match: wildcard pattern
   request URL https://yoursite.com/*
   Then redirect to target URL: https://www.yoursite.com/${1}
   check the preserve query string
   

   Aliasing one domain name to another

   create two records on the from url:
   A @ 192.0.2.1 Proxied
   A www 192.0.2.1 Proxied
   create rule
   go to rules → overview in the left column
   use template for redirect to a different domain
   all incoming requests
   change to static, leave the code 301
   put in https://www.your-domain.com
   

   Setting Up Error Redirection

   When an error occurs on your site, a generic 404 page will appear. If you create an error.html page in the root (public/error.html) you can customize the page (just remember to use absolute references since who knows where you are on the site the person is when they 404).
   
   Since github also has a Pages system, but uses a 404.html page in the repo's root (not public/error.html), I do the following:

   1. on github I create a 404.html page that redirects to public/error.html
   2. I create a public/error.html page that has full paths (no relative links)

   
   

   www.yoursite.com/404.html:
   <meta http-equiv="refresh" content="0; url=https://<userid>.github.io/www.yoursite.com/public/error.html"/> 

   
   
   

       github www.yoursite.com repo directory structure:
         README.md
         404.html
         public/
           error.html
           error.css
           index.html
           index.css

   
   
   If I don't want a custom error page for every repo, I point it to an error page for my general github:

   www.yoursite.com/404.html:
   <meta http-equiv="refresh" content="0; url=https://<userid>.github.io/404.html" />

   
   
   You can snag a template for this on github at templateWebApp  
   

   Disable Automatic Builds on Branches

   Sometimes you don't want every push to the remote github repo to generate a build for the production deployment.
   
   You can skip a cloudflare build by adding a prefix to the commit message: commit -m [skip ci] ...
   
   You can also turn off automatic builds:

   1. Compute&AI → workers & pages → go to your pages project
   2. go to Build → edit branch control → turn off automatic branch deployments
   3. or change Preview Branch ot None (Disable automatic branch deployments)

   Remove Cloudflare access to the Github Repo

   To Remove cloudflare access to github repo go to the applications page on github https://developers.cloudflare.com/pages/configuration/git-integration/github-integration/ To Remove cloudflare access to github repo go to the applications page on github (see this   for more information).