|
| 1 | +--- |
| 2 | +{} |
| 3 | +--- |
| 4 | + |
| 5 | +import { Details } from "~/components" |
| 6 | + |
| 7 | +Once you have selected a Git repository, select **Install & Authorize** and **Begin setup**. You can then customize your deployment in **Set up builds and deployments**. |
| 8 | + |
| 9 | +Your **project name** will be used to generate your project's hostname. By default, this matches your Git project name. |
| 10 | + |
| 11 | +**Production branch** indicates the branch that Cloudflare Pages should use to deploy the production version of your site. For most projects, this is the `main` or `master` branch. All other branches that are not your production branch will be used for [preview deployments](/pages/configuration/preview-deployments/). |
| 12 | + |
| 13 | +:::note |
| 14 | + |
| 15 | + |
| 16 | +You must have pushed at least one branch to your GitHub or GitLab project in order to select a **Production branch** from the dropdown menu. |
| 17 | + |
| 18 | + |
| 19 | +::: |
| 20 | + |
| 21 | + |
| 22 | + |
| 23 | +### Configure your build settings |
| 24 | + |
| 25 | +Depending on the framework, tool, or project you are deploying to Cloudflare Pages, you will need to specify the site's **build command** and **build output directory** to tell Cloudflare Pages how to deploy your site. The content of this directory is uploaded to Cloudflare Pages as your website's content. |
| 26 | + |
| 27 | +:::caution[No framework required] |
| 28 | + |
| 29 | + |
| 30 | +You do not need a framework to deploy with Cloudflare Pages. You can continue with the Get started guide without choosing a framework, and refer to [Deploy your site](/pages/framework-guides/deploy-anything/) for more information on deploying your site without a framework. |
| 31 | + |
| 32 | + |
| 33 | +::: |
| 34 | + |
| 35 | +The dashboard provides a number of framework-specific presets. These presets provide the default build command and build output directory values for the selected framework. If you are unsure what the correct values are for this section, refer to [Build configuration](/pages/configuration/build-configuration/). If you do not need a build step, leave the **Build command** field blank. |
| 36 | + |
| 37 | + |
| 38 | + |
| 39 | +Cloudflare Pages begins by working from your repository's root directory. The entire build pipeline, including the installation steps, will begin from this location. If you would like to change this, specify a new root directory location through the **Root directory (advanced)** > **Path** field. |
| 40 | + |
| 41 | + |
| 42 | + |
| 43 | + |
| 44 | +<Details header="Understanding your build configuration"> |
| 45 | + |
| 46 | +The build command is provided by your framework. For example, the Gatsby framework uses `gatsby build` as its build command. When you are working without a framework, leave the **Build command** field blank. |
| 47 | + |
| 48 | +The build output directory is generated from the build command. Each [framework](/pages/configuration/build-configuration/#framework-presets) has its own naming convention, for example, the build output directory is named `/public` for many frameworks. |
| 49 | + |
| 50 | +The root directory is where your site's content lives. If not specified, Cloudflare assumes that your linked Git repository is the root directory. The root directory needs to be specified in cases like monorepos, where there may be multiple projects in one repository. |
| 51 | + |
| 52 | +Refer to [Build configuration](/pages/configuration/build-configuration/) for more information. |
| 53 | + |
| 54 | + |
| 55 | +</Details> |
| 56 | + |
| 57 | +### Environment variables |
| 58 | + |
| 59 | +Environment variables are a common way of providing configuration to your build workflow. While setting up your project, you can specify a number of key-value pairs as environment variables. These can be further customized once your project has finished building for the first time. |
| 60 | + |
| 61 | +Refer to the [Hexo framework guide](/pages/framework-guides/deploy-a-hexo-site/#using-a-specific-nodejs-version) for more information on how to set up a Node.js version environment variable. |
| 62 | + |
| 63 | +After you have chosen your *Framework preset* or left this field blank if you are working without a framework, configured **Root directory (advanced)**, and customized your **Environment variables (optional)**, you are ready to deploy. |
| 64 | + |
| 65 | +## Your first deploy |
| 66 | + |
| 67 | +After you have finished setting your build configuration, select **Save and Deploy**. Your project build logs will output as Cloudflare Pages installs your project dependencies, builds the project, and deploys it to Cloudflare's global network. |
| 68 | + |
| 69 | + |
| 70 | + |
| 71 | +When your project has finished deploying, you will receive a unique URL to view your deployed site. |
| 72 | + |
| 73 | +:::caution[DNS errors] |
| 74 | + |
| 75 | + |
| 76 | +If you encounter a DNS error after visiting your site after your first deploy, this might be because the DNS has not had time to propagate. To solve the error, wait for the DNS to propagate, or try another device or network to resolve the error. |
| 77 | + |
| 78 | + |
| 79 | +::: |
0 commit comments