How to host your website online, for free!

You’ve probably spent a lot of time and effort into making a beautiful website. Now, you want to show it to your friends.

To be able to do that, you need your website to be hosted on a server, so that anybody in the world can find it with a url.

While most companies use large scale, paid services for their hosting, our needs are quite simple and can be achieved for free!

There are many free hosting services, and in this post, we’ll go over some of the most popular services,

• GitHub Pages
• Netlify

But before all that, let’s get our project ready.

Note: This is a guide to host static web pages, that are made up of just HTML, CSS, and JS files. The procedure is different if you are trying to host a website made with other frameworks such as Angular or React.

Basic Setup:

For the sake of this tutorial, let’s set up a simple project.

As you can see, the project has a basic structure, with HTML, CSS and JS files. Of course, you might have something more elaborate than this, but that’s fine.

Note: All the folders, files, images and other requirements of your website should be under one main folder.

And this is the output of our project.

Now, let’s get started with GitHub Pages.

1. GitHub Pages

If you have been coding for a while, it’s very likely that you’ll have a free GitHub account. Even if you don’t, it’s quite easy to set up.

Start by visiting github.com.

Type your email address and click sign up.

Enter the rest of the details and create your account.

After this, you’ll be asked a few questions. you may choose to answer or skip.

And then you’ll be asked to verify your email address.

Once you do that, you’ll have the option to create a repository. Click that.

You’ll now get this screen.

The name of the repository can be anything, but in our case, the name of the repository will be a part of the website’s url. So my url is going to be

https://iceberg-commet.github.io/hosting/

And yours will be

https://<github username>.github.io/<repo name>/

Once you create your repository, you’ll be asked to add files. Choose to upload an existing file.

You can drag and drop your files here.

And then commit the changes.

This is the code section of your repository. From here, click settings. In settings, scroll down till you find GitHub Pages.

By default, the source for GitHub Pages is none. Let’s change it to the main branch of our Repository.

And click save. You should be taken back to the top of the settings page.

Now scroll back down to GitHub Pages.

And you’ll see a link that’s something like

https://<github username>.github.io/<repo name>/

My website is at https://iceberg-commet.github.io/hosting/.

Click the link to visit your website, hosted on github pages!

You can now send this url to ANYONE and they can see the website too!

2. Netlify

While GitHub Pages is quite good and serves our purpose well, the only problem is that we don’t have much control over the url.

It’s always going to be

https://<github username>.github.io/<repo name>/

And the only thing we can control in the url, is the name of the repository.

In such a case, we need to go for a more mainstream hosting service.

One such service is Netlify, which makes hosting very easy, and is free!

To get started, visit netlify.com, and click sign up.

You’ll have a few options on the sign up page.

You can either make an account with your email, or you can create a Netlify account using your GitHub account!

Note: Using your GitHub account enables you to link repositories to your sites on Netlify. This means that you can deploy your code straight from GitHub!

But for the sake of this tutorial, I’m going to make a netlify account using my email, to cater to most people.

You can also link your GitHub after making an account with just email, so that;s not going to be an issue.

On the sign up page, enter your email and password.

Verify your account.

Once you verify your email, you’ll be asked to fill some details.

Once you fill those out, you’ll be taken to your Netlify Dashboard.

Like i said earlier, we can still set up a new site from git, even though we used email to sign up!

Now, if you scroll down, you’ll see an area where you can drag and drop your project folder to create a site without git.

Note: Make sure you drop the entire project folder as one and not the contents directly.

Once you drop your project folder here, your site will be set up and deployed for you.

And it’s done! You can visit your site by clicking the default url they’ve made for you.

But with netlify, you can use custom domains!

On the Netlify Site Overview page, click on Domain Settings.

Here, you can either use a custom domain, or a custom subdomain.

While using a custom domain means you need to purchase the domain name, a custom subdomain is free, provided it’s unique, and no one else is using the subdomain.

Let’s change our subdomain to hosting-demo.

Click Options -> Edit Site Name, and enter the site name you’d like.

And your url should’ve changed to:

your-site-name.netlify.app.

My url is hosting-demo.netlify.app.

You can now send your url to anyone and they can view your website!

If you have any doubts or questions, put them in the comments! And if you’ve taken away anything useful from this post, please take a moment to follow us and share this post.