From Localhost to Live: Easy Deployment With Github Pages or Netlify
Tags: deployment, webdev, netlify, githubpages
Published: 2024-02-01 15:01:42


Hi Dev's,

If you've been following my first post, we've set up Git and GitHub, pushing our project successfully. Congratulations! If you missed our initial guide on these tools, you can catch up [here](https://dev.to/fevenseyfu/a-beginners-guide-to-git-github-49a3). 

But now you want to show off your new acquired skills and share with family and friends.However you are not sure how to do that since not everyone can setup your project locally.

I've got you covered; let's deploy your project and get you a live link so you can show off your new skills to family and friends.

we will use 2 options to deploy your site for free,

1. Github Pages
2. Netlify

Let's get started,

## 1.Deploy with Github pages

step 1: head to your project repository and navigate to the 
![Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skgkrfgn0qhkwwh3vhzi.png)

step 2: From the left side bar scroll to pages 
![Screenshot of sidebar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcg1zkppjo940qy91s24.png)
step 3: deploy from a branch - select the branch you want to deploy
![Select to deploy from a branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtqdzpxakc76aaldfcvj.png)

step 4: enforce https to make your site is secure
Congratulations! your site is up and running!

![Link to deployed site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnhcfp0f44mhgjq0023o.png)

## 2.Deploy with Netlify

Step 1: If you  don't have an account you need to  visit [Netlify](https://www.netlify.com/) and sign up

> I recommend signing up with your github account to easily deploy from your repository

![screenshot of Signup link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7l7w4gpevpixlcntadwd.png)

Step 2: Navigate to add new site

![Screenshot to Deploy from repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjna0q1qkkup72dosun3.png)

step 3: authorize Netlify to have access to Github
step 4: select the repository you want to deploy if you can't see scroll down to add repo 

![Screenshot of Link to add repo to deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x04qc11vg2zo43we3nza.png)

![Screenshot to show how to Select the repo to deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lr78zftuqdyhru33i8p1.png)

> if you want to deploy from a different branch from the default
![screenshot of link to change branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohcstw5yyjw3fglye91a.png)

step 5: For static site you don't need to configure so scroll down and  click on deploy site name

step 6: it will deploy and generate a funny looking link for you that nobody can remember so let's change that:
- click onsite configuration and change site name
![how to change site name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wop4uppvqjy492tsqdrz.png)
- remove the existing and change to a name you prefer

![link to change site name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jo4hkssbdfdd0nlg12aq.png)

> Note: the netlify.app remains unless you have a custom domain name this will do.

Step 7: now you can go to the site and check if it works fine

## Conclusion

Congratulations! You've successfully deployed your site using either GitHub Pages or Netlify. Remember, if you encounter issues with images or icons , ensure that the file paths are adjusted appropriately, such as using '../' to navigate to the correct directories. Now that your site is live, share it with the world and continue your coding journey!

Happy coding!