2. Setting up your git repository
Tags: tutorial, webdev, publish, customdomain
Published: 2022-05-24 03:20:25

If you haven't already, you can read the article on how to buy a custom domain [here](https://dev.to/awalakaushik/1-purchasing-a-custom-domain-from-a-provider-google-domains-godaddy-etc-325i).

For those who have completed the previous step of purchasing your custom domain, let us see how to set up our git repository before moving on to the next step of configuring the GitHub pages to use our custom domain for hosting.

## For starters
As Wikipedia says,
> GitHub, Inc. is a provider of Internet hosting for software development and version control using Git. It offers the distributed version control and source code management (SCM) functionality of Git, plus its own features.

whereas, 

> Git is a software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.

Because this series is about hosting the website on your custom domain using GitHub pages, this article only refers to GitHub repositories.

## Adding code to an empty GitHub repository and pushing it there

To host your website code on GitHub, follow the steps below.

1. Create an empty git repository on GitHub
![GitHub Create Repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sz1rv2cm2fyz7khrf41o.png)

2. After creating the empty repository, you should see the following instructions.
![GitHub empty repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eutqjsrf909qvtn0bxf2.png)
 
3. Then, using the instructions provided above, develop an app of your choice and push the code to the empty GitHub repository. I'm building my website with [Vue JS](https://vuejs.org/). Vue JS will thus be used in the examples. The difference is simply in the deployment process, and you can use any framework/library to construct your website, such as [Angular](https://angular.io/), [React](https://reactjs.org/), [Svelte](https://svelte.dev/), etc. Follow the steps [here](https://vuejs.org/guide/quick-start.html) to get a project started with Vue JS.

4. Make sure the project name matches the repository name you created in Step 2.
![Project Name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/788iz91hvbuqvr0crxpq.png)

5. Change to the newly established Vue project directory. You can now execute the git commands as directed in Step 2.

**Note: If a local git repo is not initialized as part of the project's initialization, use the following command to do so.

```bash
$ git init
``` 
Set git config with the following commands to commit and push your changes.
```bash
$ git config --global user.name "username"
$ git config --global user.email "user@email.com"
```

6. After that, run the commands below to push your project code to the empty repository you created in Step 2.
```bash
$ git add .
$ git commit -m "<your-commit-message>"
$ git branch -M main
$ git remote add origin https://github.com/<github-username>/<repository-name>.git
$ git push -u origin main
```

You should be able to see your website project code in your GitHub repository after completing the steps above.
![GitHub repository after pushing code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wvj8s0lr2fs3rkh6ylj.png)

Okay, that was a lot of information! This article has finally come to an end. Please read the next part of this series [here](https://dev.to/awalakaushik/3-configuring-github-pages-to-deploy-your-website-29ic).