How to Host a Website for Free Using GitHub Pages

Web hosting plans come in a variety of options and price points. There are more expensive plans that have the capacity for hosting the biggest websites in the world, but what if you just need a simple hosting solution for a simple website?

For a static website or small web apps, there are free hosting plans that can get you up and running online in a moment. They require a bit more setup than a paid host, but it’s a worthy trade-off for free.

GitHub Pages is one such option, and in this article we’ll show you how to host a simple website using GitHub Pages for free.

What Is GitHub Pages?

Note: To host on GitHub Pages, you will need to have access to the entirety of your website code. Typically, this option works best when you are coding your website from scratch.

GitHub Pages is a service created by GitHub that allows you to publish a website or web application by storing it in a free GitHub repository.

You can host one full website and unlimited “project sites” which can be thought of as “pages” on a website. Website code is stored in a designated GitHub repository, which GitHub will then publish to be viewed on any computer or tablet.

The process is quite simple, but there is a little bit to cover. Let’s jump into how to accomplish this.

GitHub Basics

GitHub is a popular version control service for computer programmers that uses Git to store and control code. Code is stored in repositories, which are just containers on a cloud server that let you access your code from all of your computers.

You can create new repositories using GitHub’s website or through the command line when you have Git installed. Repositories are given names, can be public or private, and can store code in any language. Once you create your repository, with Git you can pull your code from the server to make changes then upload back to GitHub.

Git is easy to install on PC and Mac computers by going to the Git website and following the installation steps. There’s a lot to Git, but you can learn the basics of Git and use it very quickly.

GitHub is already a household name in programming, and GitHub Pages becomes very useful when you already know how to use it.

Setting Up Your Website on GitHub Pages

The process of hosting a website using GitHub Pages can be simplified into three steps:

1. Create a GitHub account
2. Create a new repository with a few rules
3. Edit your code and upload to GitHub to take your website live

   Let’s go over a little more detail on how to get your static website published live on GitHub Pages. You’re going to need some HTML knowledge, so now is a good time to brush up on some HTML basics.

   Creating Your GitHub Account

   You should have Git installed at this time, if not head back up to GitHub basics and make sure you have it fully installed. You will need Git to control your code through GitHub. Head to GitHub’s website to sign up.

   You will need to choose a username and sign up with your email address and a password. The username will be important to get your website up and running. Once you sign up, log in to the homepage to start your website.

   Creating Your GitHub Repository

   From the GitHub home page, you will see a “repositories” section on the far left. Here will be a list of all your repositories, as well a “New” button which will allow you to create a new repository.

   Click on “New” and you will be taken to a new screen to enter the repository information. First, you will need to enter the repository name. The repository name must be as follows, where [USERNAME] is your desired username:

   [USERNAME].github.io

   For example, if your username is Jake, then your repository name will be Jake.github.io. This is a very important step. It is the way that GitHub Pages identifies the repository as a live website versus a blank container you want to code in.

   Once you enter the username, you can enter an optional description to add some detail to your repository (i.e. “My sports website”).

   Choose either “public” or “private” to control whether other users can modify your repository. Public means anyone can modify, private means only you can modify.

   Lastly, you can create a README file for your repository, which is just meant to hold documentation for projects. It’s totally optional.

   Now that you’ve got this filled in click “Create repository” to finish!

   Editing and Uploading Your Website

   Now that you have your repository live on GitHub, head to your command line terminal. Navigate to the location you would like to store your project, and run the following command, making sure to replace [USERNAME] with your actual username:

   git clone https://github.com/[USERNAME]/[USERNAME].github.io

   The “clone” function of git just makes a copy of your repository on your computer so that you can edit the code. Any changes you make to this code can be saved to the main repository through the command line.

   Now that the repository is stored in a folder, navigate into that folder using either the terminal or just clicking on the folder on your machine. Create an index.html file inside of this folder. This HTML file will house your code.

   Open the HTML file in your text editor and add a <div> line, typing in “Hello”. This is simply a line to display text and make sure the website is working.

   Head back to the folder that is storing your code using the terminal. Now you can save your changes into your repository by running this git code

   git add --all
   
   git commit -m "Save changes"
   
   git push -u origin master
   

   This might be confusing if you’ve never used Git before, but it’s very simple. git add –all adds all changes you made into a queue to be saved. git commit prepares the changes, with the optional -m flag that adds a description for what changed in this commit. (“Save changes” is an example. You could right anything.) Lastly, git push finalizes the changes and loads the new code in your repository.

   Viewing Your GitHub Pages Website

   There’s been a lot here, but now you’re ready to see the final result. Load up your favorite web browser and navigate to https://[USERNAME].github.io where, again, [USERNAME] is replaced by your repository name.

   You will see your website published live! It can be view in any browser on any computer, tablet, or phone. It’s a fully functioning website.

   More Options for Free Web Hosting

   Now that you know how to create a website hosted for free on GitHub Pages you can build just about any type of static website you want. It’s a great option for developers and individuals who just need a small solution.

   Need something more powerful than GitHub Pages? Check out these awesome free web hosting services.

   Read the full article: How to Host a Website for Free Using GitHub Pages

   
   
   from MakeUseOf https://ift.tt/2oMXe7N
   via IFTTT