Host Static Websites for Free
Tags: beginners, hosting, git, webdev
Published: 2019-04-04 17:57:39

---
title: Host Static Websites for Free
published: true
description: Host static websites for free on GitHub 
tags: Beginners, Hosting, Git, WebDev
---

![Header](https://thepracticaldev.s3.amazonaws.com/i/85rl3w77hejgk7t2qxrz.png)

Having our own website can be beneficial to get a better opportunity or to make us standout and shout in this over crowded market, but there are very few people who want to spend money to make one and keep it running. If I say __there is no need to pay extra money__ to make your personal website or portfolio with full control then, what would you say? Please read below to know more and how you can make it happen.

## Prerequisites
- A `GitHub account` to host your website. You can register for a GitHub account [here](https://github.com).
- `Git` to push your website on GitHub. You can install git from [here](https://git-scm.com/download) depending on your platform (Linux, Mac or Windows).
- A good `code editor` to build or edit the website. You can download [VS Code](https://code.visualstudio.com), [Atom](https://atom.io) or [Notepad++](https://notepad-plus-plus.org) depending on your platform.
- A `static website` which we are going to host. This is optional and you can develop or update the website later.

### Custom domain
A `domain` which you want to connect with the website. This step is optional and only required if you want to use your own personalised domain. You can buy a domain name on [GoDaddy](https://godaddy.com), [Namecheap](https://www.namecheap.com), or [anything else](https://www.google.com/#q=buy+domain+name). Please don't buy their hosting service as we are going to host the website for free on GitHub.

## Background
Above, I have discussed about `git` which is a version control system used to maintain code or source code. Here, we are going to use some of its commands but it is a very useful and powerful tool making the developers life easier in every software industry. If you want to learn more about git, you can take a very well written and free course at [Udacity](https://in.udacity.com/course/how-to-use-git-and-github--ud775).

Here, I have written `static website`, what does it really mean? Static websites are simple `HTML` pages which cannot perform server side operations. So, you cannot host your `PHP blog, Node.js or web app` with this method, you can use [Jekyll](https://jekyllrb.com) for blogging or convert your WordPress blog into a static website by using this [generator](https://wordpress.org/plugins/simply-static).

So, there are some limitations but I think we can live with that as still we can do enough amount of work with static websites. Still not sure? Please check out [my personal website](https://pranavpandey.com) which is completely a static website built with [Polymer](https://pranavpandey.com) and can be hosted by using this technique.

## Prepare the website
First of all, we need to `initialize the website` structure which we can put on our GitHub account. For this, you can use any static website with an `index.html` page in its root directory.

If you have not created the website yet then, just follow the steps below to create a website for testing, you can update it with the actual website later.

- Create a new folder or directory, say `website`.
- Create an `index.html` file inside this folder.
- Place the below code in it and save.

```html
    <head>
      <title>My website</title>
    </head>
    <body>
      <h1>My website, Coming Soon!</h1>
    </body>
```

## Create a repository
We have successfully created our website, now we need to `place or push` this collection of codes called as `source code` on GitHub. For this, we first need to `create a repository or repo` with our registered account.

- Login with your [GitHub account](https://github.com/login).
- Create a [new repository](https://github.com/new) with the name `username.github.io`. Here, `username` is your GitHub account user name.
- Now, we have successfully created a repo, it is just a place on a server which will store our website to serve it globally.

## Push the website
Now, we are going to push our website on GitHub. For this, we first need to `commit the code` locally. Please follow the steps below to make your first commit.

- Open a terminal or command prompt in the website folder.
- Add all the files in the staging area by running the below command.

```shell
    git add -A
```

- Now, type a commit message and commit.

```shell
    git commit -m "Initial commit"
```

> If you are running git for the first time then, you need to `setup your git username and email` to do your first commit. It can be done by using the below commands.

```shell
    // Configure name
    git config --global user.name "Your Name"
    
    // Configure email
    git config --global user.email "email@example.com"
```

We have successfully committed our website code. Now, we will add origin so that we can push this code to our GitHub repo. To add origin, go to your GitHub repo page and click on `Clone or download` button. It will show a url something like `https://github.com/username/username.github.io.git`. Copy this url and run the below command in your website directory to add the origin.

```shell
    // Add origin
    git remote add origin https://github.com/username/username.github.io.git
```

Now, we have added origin and ready to push the code on server. Run the below command to `push the code` in the master branch of the origin.

```shell
    git push origin master
```

It will push our local code to the GitHub repo which you can check by visiting the repo page in the browser. It will show all your committed files.

## See it running
Now, we are done and you can check your website running at the following link:

`https://username.github.io`

Did you like it? It is the easiest and fastest method to make a website live for free! Now, a question arises, what if I want to use my own domain called as `custom domain`? The answer is pretty simple, it is also possible with GitHub and you don't need to pay any extra money. Sounds great? Let's try to integrate your custom domain to give it a more personalised feel.

## Connect with a custom domain
To connect our website with a custom domain we need to do modify our `website files and DNS configurations`.

- First, go to your website folder and create a new file `CNAME`. Please make sure that don't give it any extension.
- Now, edit this file and paste your domain in it and save.

`yourdomain.xyz`

- Again, commit the code and push it to the GitHub.

```shell
    git add -A
    git commit -m "Add CNAME"
    git push origin master
```

Now, we have modified our website so that it can point to our custom domain. Similarly, we need to modify the DNS configuration so that it can point to the GitHub server. For this we need to `add A records and CNAME` in the DNS configuration.

- Login with your domain registrar account (GoDaddy, NameCheap, etc.).
- Select your domain and go to the DNS management or configuration.
- Delete any previous A records and add these two A records. You can read more on this [here](https://help.github.com/en/articles/setting-up-an-apex-domain).

```
    // 1st A record
    type: A 
    name: @ 
    IPv4: 185.199.108.153
    Automatic TTL

    // 2nd A record
    type: A 
    name: @ 
    IPv4: 185.199.109.153
    Automatic TTL

    // 3rd A record
    type: A 
    name: @ 
    IPv4: 185.199.110.153
    Automatic TTL

    // 4th A record
    type: A 
    name: @ 
    IPv4: 185.199.111.153
    Automatic TTL
```

- Save and done.
- Here, we are just pointing our domain to the GitHub servers by using their IP addresses.

Now, check the website at your custom domain. It should work or wait for 2–3 minutes.

## Conclusion
Great! We have successfully hosted our website on GitHub without any extra cost. Please keep in mind that this is not the only way, there are several other possibilities like [Firebase Hosting](https://firebase.google.com/docs/hosting) which I will discuss later. We can also partially secure our website by using [Cloudflare](https://www.cloudflare.com) free SSL. Please ask questions or share your feedback in the comments section to make it better.

> This is not the end, keep exploring to find out the better possibilities and stay tuned to know more about such tactics of web!