Hosting your website for free using GitHub or Netlify
Tags: github, netlify, opensource, prudyopensourceseries
Published: 2022-05-04 17:24:38



😋😋

---


On today's coding series, we are talking about Hosting your website for **free.** 

![Free](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5y916oq9i0xegn4cey53.gif)

---
Hosting your website is something a developer would love to do and after procrastinating for a while I did a little research to find a way to deploy or host some of my websites.

While they're other free hosting platforms;

1. Heroku.com
2. Vercel.com
3. Glitch.com
4. Surge.sh
5. Fly.io
6. Firebase

😶I only had time to check  GitHub and Netlify,and i'll check the others out soon.
🙃
---

## Publishing on GitHub

While GitHub acts as a platform for collaboration, and managing source codes, it also provides the opportunity for developers to publish their codes for free. 😋

↓↓
**Step 1: Repositories**
Visit your repositories and select the repository to be published.

![Repositories](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcxsmqf9flo08jxuyyoy.jpg)

↓↓
**Step 2: Settings 🎛️**
In your selected Repository, click on settings to go to your repository settings page.


![Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzy01f2obprcyje66fov.jpg)

↓↓
**Step 3: Pages 📄**
On the left sidebar of the repository settings, click on pages to open up GitHub pages.


![Pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfow4tz2n93fjbvxcy0e.jpg)

↓↓
**Step 4: Branch Selection 🌿**
Still in the GitHub pages, click the drop-down menu on the source section and select a branch. save it afterwards.


![Branch Selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxz1ye6qnkix6vnfxy7d.jpg)

↓↓
**Step 5: The Link🔗**
Your website is published when you save, and in a few seconds you'll see a link to your newly published website. 

![Link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14hgwjymwodzas57xhat.jpg)

😊😊You are now a published developer. 🎉🎉

![growth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/naax8ocbzz73rlxpnq70.jpg)

Next is Netlify

---

## Publishing on Netlify

Publishing on Netlify gives the developer the opportunity to bind multiple domain names and keep the original repository private.

↓↓
**Step 1: Add New Site➕**

If your Netlify account is linked to your Git account, you would get the **import from GitHub** button, when logged in.

You could also deploy **manually** using a simple drag and drop or browse to upload method.

![New Site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv1p5qqxyf5hr9bbf7qo.jpg)

↓↓
**Step 2: Connect to Git provider🖥️**

When we click on the **import from Git** button, it simply wants access to your source codes in order to deploy it. You should have your codes on either GitHub, Gitlabs or Bitbucket to achieve this.

![Connect to Git provider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5x6xdoh1uwqw0altjmw.jpg)

↓↓
**Step 3: Authorize Netlify⚖️**
Click on the **Authorize Netlify** to establish a connection from GitHub.

![Authorize](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atuz6i1q6bf753axaipq.jpg)

↓↓
**Step 4: Select Repository🤳**
Once a connection is established, you can select the repository you want to publish.

![Repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kckln9an4q3f1sq3r33l.jpg)

↓↓
**Step 5: Configure your settings🛠️**
There is not much to do here. You can also deploy after changing the branch.

![Configure Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ih36790v6xxodnuz7svc.jpg)

↓↓
**Step 6: Publish Site📢**
After deploying your site. Netlify takes it up and creates your site in no time.

You can take a step further to change the site name using **site settings**

![Site Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07rw0fsvbpakbk3mp1gb.jpg)

**Save site name**

![Name Site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whxyq4g18gun58a2de28.jpg)

You can copy your site link and show the world how published you are🌝

![Done](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpmathe2ywb3ptjosylu.jpg)

---

**Until Next time😂**

![bye](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8k6den7fguoy9ma6vpe.gif)

---
**P.S:** I am thinking of writing an article comparing Netlify and GitHub.
I think it'll be nice to know the Pros and Cons of each.
Also, if you find something I missed in the article or would like to share anything helpful, please comment. I would love to know what you think about it.