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."

Screenshot of GitHub's "Quick Setup" Repository menu.

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

Screenshot of the interface used to drag files into a GitHub repository.
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.
Screenshot of a user correctly selecting the files and folders within the root folder to upload to GitHub Repository menu.
DO: Upload the content included within the root folder.
Screenshot of a user incorrectly selecting entire root folder to upload to GitHub Repository menu.
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.

Screenshot of the Commit Changes menu on GitHub.
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.

Screenshot of the GitHub repository navigation menu.
First, go to the settings tab of your repository.
Screenshot showing that the site has been verified as published.
Then, ensure that your site has been published on GitHub Pages.

Subscribe to Rick Wysocki

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.