Uploading source code of the website on a github repository is recommended. The cloudflare will connect to the repository to automatically build and deploy the website. Each time you commit any changes to the code such as add new item, change font style and themes etc. The cloudflare will automatically detect the change and will rebuild the website with a newer version.

What is Github

Github is a version control system that keep track of each change to the code. Each new change stacks over the previous change in the form of commits in a way the the latest change is on the top of the stack which is called the HEAD of commit.

Step 1 - Create Github Repository

signup for github.com and create a new repository. Make sure to mark repository as private.

You will also see an option “Initialize this repository with:”

Mark Add README file checkbox since we want to create a repository with some content so it can automatically create branch and make this repo ready to use

Step 2 - Download Github Desktop

You need to upload the source code of the website to the repository. You can upload source code using github cli or github desktop or online code editors such as vscode.dev . The recommended method for easily working with github is to use Github desktop. Github desktop is easier to track the changes and commit new changes from your local environment to the remote repositry. Download Github Desktop here https://desktop.github.com/ and open the application. At first the application will require you to give the access to the github account where the repository is created in the first step. After giving the access, you should be able to see the list of repositories created in your account including the one created in step 1. Select that one. Clone that repository by clicking on the clone button. Now you will have that repository cloned in your local environment.

Step 3 - Upload Source code

After cloning the repository with just one file README.md. The repository will be stored in your local environment. You can navigate to the directory were the repositories is stored as local repository.

When you are on the homepage of your Github Desktop, you will see the list of local cloned repositories and when you click on any one it will show you the current status of your Git Repository such as Current Branch, Fetch Origin Status, Changes, History etc. At first you will see a text on the right section “No Local Changes” Means the repository is updated with the github.com. Now we need to upload the source code in this empty repository. You will find a few buttons such as “Open in Visual Studio Code” or any other editor etc, “Show in Explorer”, “View on github”

Click on Show in Explorer. It will open the folder where the repository is stored locally. At first you will have one file README.md and one hidden folder with name .git. Never rename or delete this folder because it contains the information of your git stuff. Now simply move all the source code you have for the website inside this folder. Note that the files and folder should be exactly stored in this local repository as you get from the zip file such as package.json, astro.config.js and all other sibling files and folders should be on the root.

Step 4 - Commit The Changes

Now come back to the Github Desktop. You will see current status of your github repository against the remote repository created on github.com. You will see a lot of + which means these files are newly added files to the repository. Now we need to push these new files to the remote repository. For this we need to perform an action called commit. This commit will create a new version of your source code with. You can always go back to previous version anytime you want. Now let’s give this commit some information so we can identify what we have done in this commit.