Host your static sites for free on Github

You might have created a personal portfolio or a web app which you want to host online and might want to show off to your friends but never could because you don't have it online?

Well, all your worries now come to an end as we'll be learning how to host your static portfolio or any static website for free without spending a penny or by sharing your credit card details (in case of AWS).

All you need is to be familiar with the git command line and Github and you are good to go.

Github Pages

Github is home to over 100 million repositories and 40 million developers working together to host and review code, manage projects, and build software together.

It is a code hosting platform for version control and collaborations where developers can work together on projects from anywhere.

You can learn about Git commands from Ananya's notes on Git from here.

Now, let's start with the hosting part.

Let's create a new repo: go to github.com/new
For Repository Name, enter username.github.io where username is your actual username.
Make sure your repository is public.
Do not check "Initialize this repository with a README", we don't need it now.
Click "Create repository".

You can also learn about Creating repository from here Creating a new repository - GitHub Docs

I assume you had created a new directory with an Html file, a CSS file and a JS file in it. Both CSS and JS are optional but you must have at least one index.html file in it.

If you don't have one, copy the below code and paste it in your index.html file inside a new directory.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Js Intro!</title>
  </head>
  <body>
    <h1>Hi, welcome to my site!</h1>
  </body>
</html>

Now, open a terminal and navigate to the current directory where your index.html file is located.

Now we need to initialize a new Git repository in the current working directory.

$ git init
# This will initialize a new git repo in the current directory.

Now, we need to add the files in our new local repository. This stages them for the first commit.

$ git add .

Now we need to commit the files that you've staged in your local repository.

$ git commit -m "First commit"

At the top of your GitHub repository's Quick Setup page, copy the remote repository URL. It will look something like this.

https://github.com/username/username.github.io.git

Now, in the Command prompt, add the URL which you copied, for the remote repository where your local repository will be pushed.

$ git remote add origin remote_repository_URL
# remote_url: https://github.com/username/username.github.io.git
# please check for the username in the URL before proceding

This will set the new remote URL for your local repository.

Now, we are ready to push our code to Github.

$ git push origin master

It might take up to 5-10 minutes and after that, you’ll be able to see your newly created page at http://username.github.io/

If you make updates, be sure to push to the master branch!

If you want to link a custom domain name, here is a link to an in-depth guide on linking a custom domain name with Github.

Using a custom domain for GitHub pages

Well, this was all for today's post and if you found it helpful, please leave a like & comment below if you have any doubts.

Thanks for your time and I'll meet you in my next post. Take care and happy coding🙂!

Host your static sites for free on Github

Comments (1)

More from this blog

React Context API for handling global state

Streamlining React Component Development with a Custom CLI

An introduction to digital ocean functions

Handle file uploads in Node JS with Formidable

Log your Node Js error in a log file like a PRO!

Github Pages

Command Palette

Comments (1)

More from this blog

Github Pages