How to use GitHub to host your website

Posted July 18, 2019 web hosting simple website pages github

Learn how you can use GitHub pages to launch a simple website without going through the dull process of setting up another hosting package.


GitHub pages are great for people who want to launch a basic website but don’t want to have to go through the time-consuming and in most cases, dull process of setting up yet another hosting package! They allow us to store our website's images, stylesheets, html pages including javascript files. Using our terminal, without a file transfer program like SFTP, we can easily add the website files to a new branch, otherwise you can just setup a new repo for your site. There are only a few steps needed so let’s get started.



1. Create Your GitHub Repository

To create your project on GitHub, you'll need to create a repository for it to live in. A Git repository is a virtual storage of your project (think dropbox for web hosting). It makes it possible for you to save versions of your code, which you can access when required. With GitHub, you can create a number of projects in public or private (paid) repositories.

Let's call our repository myrepo, you can change that to anything you want.

If you're familiar with git version control, you'll know that for each new repository, you'll have to initialize it with the git init command.


Now open up terminal on Mac or Linux (command prompt on Windows) and make sure that you have a copy of the website files on your computer you want uploaded to GitHub. With your local files ready, move into the project folder using the cd command.

cd mywebsitefiles



2. Create an Orphan Branch

Now you'll have to create a new orphan branch. Let's call it myorphan within your repo that will contain all of your website files.

git checkout --orphan myorphan

OPTIONAL: If you do want want certain files in your current master branch to be in your orphan branch, you can delete them with the following command:

git rm -rf .


3. Add Your Files and Save

Now that your repo has been properly setup it’s time to add all of the HTML, CSS and JavaScript files that make up your website. Once you have added these to your repo you need to commit the changes. To do this you can use the following command.

git commit -a -m "Adding pages"

This command basically adds the file and saves with a message.



4. Push Your Changes to Your Repository

Now that you have added the files to the branch you want and made the necessary commit, the next step would be to push the new myorphan branch up to GitHub. You do this using the git push command.

git push origin myorphan

Once you have done that, you our website should now be available at http://yourusername.github.io/yourrepository/.



5. Use a Custom Domain (OPTIONAL)

Best part of hosting with GitHub pages is, you get to use your own domain name with your GitHub-hosted repository.

Using a custom domain will not only make it easier for your potential visitors to know its your site for sure, it also creates your own internet authority.

To add custom domain, you will need to create a new file in your GitHub repository called CNAME that contains your domain name.

Your CNAME file should look like the following:

plantoost.com


Once you have done that, the last thing you will need to do is update the DNS records for your domain name through your domain registrar.

In your domain registrar's control panel, you'll have to create either an A record or CNAME.

To determine which one to create, you'll have to look at your domain type. If you want to use a root domain like plantoost.com, you will need to configure a new A record that points to GitHub pages's IP address:

192.30.252.153 or 192.30.252.154

As for subdomains, like blog.plantoost.com, you'll want to create a CNAME record that points to your GitHub user subdomain (yourusername.github.io). When you're done with that, DNS will be automatically adjusted if the servers IP address changes on GitHub.

Note: It may take a little while for your DNS changes to take effect. This is usually no more than a few hours.



Welcome! I am an author and personal development expert based in Los Angeles.

I work every day to encourage positive growth and I look to challenge your current work environment and find opportunities to improve....