###### tags: `Deplopyment` `Tutorials` `Tips and Tricks`

# Deployment for General HTML/CSS/JS Based Sites
So you've built a website and you can run it locally, you have it saved on a git service, now what?

:::success
SHOW IT OFF!!!
:::

Lets get your new project up on the world wide web with a clickable link so that you can share it with anyone and everyone. I will present you with 5 ways to deploy your project however the last is tricky

## #1 Github Pages:
1. This can be used for many front end based projects.
2. They should not require the instalation of any packages.
3. You do not need a personal domain to use this option

#### Step 1 - The repo
Make sure the repo is on github and your base html file is called index.html. Make sure you are in the repo before starting the next steps
#### Step 2 - Settings
While on github click the settings tab
* 

Scroll to close to the bottom till you see GitHub Pages
* 

Click on the down arrow that currently should say none and chose the branch you wish to deploy. Typically you will use main as that is where everything should end up.
* 

Once you click the proper branch you in most cases you will leave the next dropdown alone with root and simply click save. At first you will see that your site will be published at above the source but after this you will see at is shows in the above picture that it is published and the link. That link as seen here is live and ready to be shared.

#### Finding and shareing your link
Can't rember what that link was? You can always go back to settings and see it like in the picture above or on your main landing page for the repo you can also do the following:
1. Find the Environments section on the right
* 
* You should see github-pages like in this img
2. Click that link for github-pages and you should now see the following:
* 
* Neat thing about this is you can see each time you pushed your code to github after you started the deployment it will automatically redeploy and you can see what it looked like at each deployment. The top view deployment button will ALWAYS be the latest content.

You can also edit the about section in the following image and add that link as well so it is always right there for you. It will then show up like this:
* 

## #2 Netlify

## #3 Vercel

## #4 Heroku

## #5 Personal Hosting