Uploading a Website to GitHub Pages

GitHub is a platform for programmers and Web designers to save and share their code and markup, but one of its most useful features is letting users host websites on their servers for free. Using its GitHub Pages service, users can upload HTML and CSS files (among others) and host them as functional websites on the Web.

Step 1: Create GitHub Account

Go to GitHub and set up an account. After clicking the "Sign Up" button in the upper-right hand corner. Fill out the information as you'd like, but make sure to select the free version.

Step 2: Create a Repository for Your Site

Next, you'll need to create a repository for your website's files. In the upper-right hand corner of the interface, select the plus-sign icon and click "New Repository."

💡

Important: When you set up the repository in the following page, your repository must be named username.github.io, where you replace "username" with the actual username you indicated while creating your account. You don't need to change any other settings besides naming the repository on this page.

Step 3: Upload Your Files

Once you've set-up your repository, GitHub will take you to its respective repository manager interface. In the blue-background section with the header "Quick setup -- if you've done this kind of thing before," click the link for "uploading an existing file."

Then, drag the files and folders comprising your website into the following page.

Drag your files / folders into the interface.

💡

Important: Make sure to drag all the files and folders inside of the root folder, not the folder itself. See these screenshots for the difference.

DO: Upload the content included within the root folder.

DON'T: Upload the root folder itself.

Step 5: Commit Your File Upload

You'll need to "Commit" the changes you've made to your GitHub repository. Go the the "Commit Changes" menu at the bottom of the page. Each time you commit changes to a repository on GitHub, you can explain the changes with comments. Feel free to add / edit those, and then click the green "Commit Changes" button.

The Commit Changes menu.

Step 6: View Your Site

Wait a few minutes. Once the files are finished being processed, anyone will be able to access them on the Web using the domain username.github.io. Again, replace "username" with the actual username you indicated while creating your account. It may take a few minutes for the GitHub servers to update, but it shouldn't take long.

Step 7 (Optional): Verify GitHub Pages

If you find yourself waiting for longer than ten minutes without your site being able to load, return to your repository in your GitHub account. Navigate to the Settings tab in the Navigation bar at the top, then the Pages menu, under the "Code and Automation" header, in the column on the left (see screenshots.) You should see a green box that reads " Your site is published at username.github.io." If you see something else, you may be having a problem requiring more research.

First, go to the settings tab of your repository.

Then, ensure that your site has been published on GitHub Pages.