DEV Community

Pranav Pandey
Pranav Pandey

Posted on

Host Static Websites for Free

#beginners #hosting #git #webdev

Header

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.
  • Git to push your website on GitHub. You can install git from here depending on your platform (Linux, Mac or Windows).
  • A good code editor to build or edit the website. You can download VS Code, Atom or Notepad++ 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, Namecheap, or anything else. 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.

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 for blogging or convert your WordPress blog into a static website by using this generator.

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 which is completely a static website built with Polymer 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. 
    <head>
      <title>My website</title>
    </head>
    <body>
      <h1>My website, Coming Soon!</h1>
    </body>
Enter fullscreen mode Exit fullscreen mode

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.
  • Create a new repository 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. 
    git add -A
Enter fullscreen mode Exit fullscreen mode
  • Now, type a commit message and commit. 
    git commit -m "Initial commit"
Enter fullscreen mode Exit fullscreen mode

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.

    // Configure name
    git config --global user.name "Your Name"

    // Configure email
    git config --global user.email "email@example.com"
Enter fullscreen mode Exit fullscreen mode

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.

    // Add origin
    git remote add origin https://github.com/username/username.github.io.git
Enter fullscreen mode Exit fullscreen mode

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.

    git push origin master
Enter fullscreen mode Exit fullscreen mode

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. 
    git add -A
    git commit -m "Add CNAME"
    git push origin master
Enter fullscreen mode Exit fullscreen mode

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. 
    // 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
Enter fullscreen mode Exit fullscreen mode
  • 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 which I will discuss later. We can also partially secure our website by using Cloudflare 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!

Top comments (0)

Read next

edgaras profile image

Configuring Reverb in Laravel 11 with Apache

Edgaras -

keploy profile image

Introduction: What Are Test Strategies?

keploy -

mayankchawdhari profile image

CID-FUNNY-LOGIN

Mayank Chawdhari -

mayankchawdhari profile image

Funny-Captcha Web

Mayank Chawdhari -