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
Andrey

Wow that is really amazing

Collapse
 
prudence97 profile image
Prudence97

Thank you Andrew!๐Ÿ˜Š๐Ÿ˜Š

12 APIs That You Will Love

Free and easy to use APIs for your next project, learning a new technology, or building a new feature.