How to build a Weather Converter with HTML, CSS and Vanilla JavaScript (Part 4-Deployment)
Tags: javascript, webdev, beginners, tutorial
Published: 2021-11-13 22:18:45

In the last part of this tutorial, we will deploy our project to GitHub pages. 

## How to create a GitHub repository

Go to https://github.com/ and Sign in to your account. If you don't have an account, then you can create a free one.
![github signin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j86equjy7kvhyjqnnwf2.png)
![github sign in page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mq3vfxbcl9z075x0i6d.png)
  
Once you are signed in, go to the upper right hand corner and click on `New Repository`.
![new repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2csibihk2xjy6pv4k4dr.png)
 
Create a short name for the repository.
![add name for repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r6tkn1abj0z45o7rlke.png)
 
Then you can add an optional description. 
![optional description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yfgenvjvp9suimr942k.png)
 
Make sure your repository is set to public.
![public repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30t90chm1a1cgbbync94.png)
 
Then click on the green `Create Repository` button.
![green repo button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3ls93tidk3kxvarxrss.png)
 
You should see this page in your GitHub.
![how to setup local repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hl1b3lr16dmpjcz4kkvo.png)
 
## How to add a local project to your GitHub repository 
Go back to Visual Studio Code, and open up your terminal.
![open terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kwj1yywlelmztbk2d8h.png)

 
In the terminal, double check to make sure you are in the project folder.
![project folder terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eza8cev7v83kfmp99vxc.png)

Git should come installed on Linux and Mac computers. For Windows, please follow these [instructions](https://www.computerhope.com/issues/ch001927.htm#install) on how to install Git.

 
In the terminal, we will first add a `README.md` file using the `touch` command. This file describes what the project is to other users.

```
touch README.md
```
You should see our new file show up in the `Explorer` tab.
![new readme file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ud9xx98wz1ruvkdxkko3.png)

Open up the `README.md` file, and add a short sentence describing your project.

![weather message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9lkna380lwhmphapr0x.png)
 
The `.md` stands for Markdown which is a language you can use to format your text. If you want to learn more about Markdown, then please visit the [documentation](https://www.markdownguide.org/cheat-sheet/). 

If you want to learn more about how to create a good README, then please read through this [article](https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/). 
 
In the terminal, add a `.gitignore` file using the `touch` command. This file tells the computer to ignore certain files when pushing to GitHub.

```
touch .gitignore
```
![adding gitignore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxzc22ybery33emn40eb.png)
 
Open up the `.gitignore` file in VS Code and add the DS_Store to it.
```
**/.DS_Store
```
A DS_Store file was created when we created the project folder but it doesn't need to be added to GitHub.

Go back to the terminal, and initialize a new Git repository.
```
git init
```
Then we need to add all of our files using the `add` command.
```
git add .
```
Then we need to add a message for adding all of these files using the `-m` flag for our git commit.

```
git commit -m "adding project files"
```
You should see all of the files we want to add in the terminal.

![all committed files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhtjxdfdnp3w0tarahhv.png)
 
Then we need to create a `main` branch for our repository.
```
git branch -M main
```
Then we need to add our local project to the repository we just created on GitHub.
Copy the command you find here on the newly created repository page instructions which will have your GitHub username and project name.

![project url](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lz6hel28p9jmppe9r294.png)

You can also find your git project url by clicking on the green `Code` button and copying the url.
![green code button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48cxwmt1hb4suvkzj0eh.png)
 
 
In your terminal, paste that command you just copied and hit enter.
```
git remote add origin https://github.com/jdwilkin4/Weather-Converter-Project.git
```
Lastly, run this command in your terminal and hit enter.
```
git push -u origin main
```
You should see this message in the terminal.
![success message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khyt0etwfc4ayhm0p2np.png)
 
Go back to your GitHub profile and refresh the browser to see all of the project files. 
![github repo pic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnox75tctjh72pu1hfna.png)
 

That is how to create a new repository in GitHub using Git. Now, whenever you make changes to a project, Git will track those changes and you can push them to your repository on GitHub.

## Deploy our project to GitHub pages
The final stage is to deploy our project using GitHub Pages. [GitHub Pages](https://pages.github.com/) is a free way to create static websites for your GitHub projects.

In the project repository on GitHub, click on the settings tab.
![github settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqj8u5irqklo3va5n254.png)
 
On the left hand side, click on the `Pages` option.
![pages option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/310e0m3s0npr08znsoms.png)
 
Under `Source`, make sure to choose the `main` branch.
![source](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xygm8z1kw0eqoguqndqc.png)
 
Then click on the `Save` button.
![click on the save button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1y0j81kupi7k8l4tvd9.png)

You should see a message which includes the url for your new project.
![project url](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jf4n1eqj5ynq80j6h5b.png)
 
Click on the project URL, and see your new project live.
![live project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cjxtpsiizth2x6pyufj.png)
 
That is how you deploy a project using GitHub Pages.

If you are interested on learning how to add a custom domain, then read through the [GitHub documentation](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site).

Thank you for making it through the entire 4 part series on How to build a Weather Converter with HTML, CSS and Vanilla JavaScript. :smile:

You can view all of the source files for the final project in my [GitHub repo](https://github.com/jdwilkin4/Weather-Converter-Project). 
[Final project](https://jdwilkin4.github.io/Weather-Converter-Project/)