DEV Community

Prudence97
Prudence97

Posted on

Hosting your website for free using GitHub or Netlify

πŸ˜‹πŸ˜‹


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

Free


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

↓↓
Step 2: Settings πŸŽ›οΈ
In your selected Repository, click on settings to go to your repository settings page.

Settings

↓↓
Step 3: Pages πŸ“„
On the left sidebar of the repository settings, click on pages to open up GitHub pages.

Pages

↓↓
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

↓↓
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

😊😊You are now a published developer. πŸŽ‰πŸŽ‰

growth

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

↓↓
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

↓↓
Step 3: Authorize Netlifyβš–οΈ
Click on the Authorize Netlify to establish a connection from GitHub.

Authorize

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

Repository

↓↓
Step 5: Configure your settingsπŸ› οΈ
There is not much to do here. You can also deploy after changing the branch.

Configure Settings

↓↓
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

Save site name

Name Site

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

Done


Until Next timeπŸ˜‚

bye


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.

Top comments (6)

Collapse
 
alphaolomi profile image
Alpha Olomi

Nice

Collapse
 
prudence97 profile image
Prudence97

Thank you ☺️

Collapse
 
yongchanghe profile image
Yongchang He

Thank you for sharing this! A nice tutorial! I only use git as code repositories and never thinking of acting it as server!

Collapse
 
prudence97 profile image
Prudence97

You're welcome. I'm glad it helped.

Collapse
 
andreyscott profile image
Andreyscott

Wow that is really amazing

Collapse
 
prudence97 profile image
Prudence97

Thank you Andrew!😊😊