How to Get Your Site Online For Free With Github Pages

| Get awesome (and free) stuff here


“I've been doing Codecademy and other tutorials for some time now. But how do I get my site online?

This is a question I have been asked multiple times these past few months.

I know how tough “getting a site online” can be for beginners. Especially for those who just finished a basic HTML/CSS course and are dying to get their work online.

That's why I created a quick step-by-step guide showing how to get your site online using Github Pages.

How to get your site on Github Pages

Step-by-step guide for getting your site on Github pages.

Don't worry. I'll never, ever spam you! Powered by ConvertKit

Why You Should Use Github Pages

Like anything, there are many ways to get your HTML, CSS and JS files online.

However, I think Github Pages is one of the best ways to do so.

  • Github is important for any aspiring developer/designer to learn and use
  • Developers and programmers of all kinds use Github
  • Plus, setting up a site on Github Pages is free  

This walk-through was created with complete beginners in mind, including those who have never used Github.

I will show how to take your static website files, already on your computer, and put them online as a website.

Required Tools to Get Your Site on Github Pages

To get started, this is what you'll need:

  • Computer/laptop: I will be using my Macbook Pro
  • Text editor: I use Sublime Text 2, but there are other options
  • Basic HTML and CSS know-how: the demo files I will be using are very simple
  • Github account: which I'll show you how to make if you don't already use Github—it's like creating any other account online
  • Command line: AKA CLI, AKA Terminal, AKA Console. Or willingness to use it in a very easy way :)

To go along with this tutorial, I created a video to follow.

The video starts from the absolute beginning. It is perfect to watch if you are especially new to HTML and CSS.

8 Steps To Getting Your Site Live on Github Pages

First, here is the link with more information about Github Pages and setting one up: https://pages.github.com/

Step 1: Sign up for / Log In to GitHub Account 

Do this at Github.com.

Creating a Github account is like signing up for Facebook or Twitter. You'll give your name, username, email address, and set a password.

If you already have an account, then log in.

Step 2: Understand The Difference Between User Sites and Project Sites 

When it comes to making a Github Page, there are two options: a project site or a user/organization site.

The difference is this: you have unlimited project sites, but only one user site. My user site is laurencebradford.github.io. Because laurencebradford is my username.

An example project site would be: laurencebradford.github.io/wp-quiz/

Here, wp-quiz is tied to the wp-quiz repository.

github pages explained

If your head is spinning: don't worry.

Basically a repository is like a (complex) folder with a bunch of files. Different people can even edit the files within a repository at the same time. And you can create as many repositories as you'd like on Github, each with a corresponding Github page.

On the other hand, you're only allowed one user site. So if your username is chunkymonkey—your Github user site will be chunkymonkey.github.io. 

For this run-through I will be setting up a user site. Meaning the steps I follow are a bit different than those for a project site.

When deciding which to create, consider your goals. And remember you only have one user site. (But you can always change the contents of the site you setup now, if you follow along, in the future.)

Step 3: Create a New Repository 

In your Github dashboard, click “new repository” as shown below.

new repo

Then, and this is very important, make sure the repository name is your username.github.io. As pictured below.

repo-name-user

Of course, make sure to input your username—not mine. So, if your username is chunkymonkey—it'd be chunkymonkey.github.io

Feel free to add a description or not. (Basically, it's just a description of your repository.) And, unless you want to pay monthly, the repository must be “public“.

I'm not initializing with a README. So if you're following along—don't either.

Finally, click the green “create repository” button.

Step 4: New Repository Page Explanation  

Immediately after clicking the”create repository” button, you will see a page that looks like this.

page after create

This page is explaining how to get your files (your HTML and CSS) into the repository. (Again, think about it like a folder attached to your Github account.)

You are basically putting the files that are on your local computer into a folder on Github using git.

Now, if you're brand new, all of this may look scary. But fear not.

The directions above are showing how to get files on your computer onto Github using your terminal. AKA the command line. (If you're on a Mac, click here to see how to open your terminal.)

Don't worry about learning the command line right now if you're just starting out. However, I highly recommend getting comfortable in it. And sooner is better than later.

As you'll notice in the official direction set, there are a few ways to get your files onto Github. Meaning you don't have to use the CLI.

But, in my opinion, using the terminal is the fastest and easiest way. Plus, it's good practice. Because using the terminal is an important part of being a developer.

So that's what I'll be doing. And because I am on a Mac, I will be following instructions for the Mac terminal.

Note to Windows users:

The terminal is different from that on a Mac. I am not familiar with the Windows terminal, meaning I am not 100% certain the following steps will work if you are on a Windows machine. But, according to what I've seen online and the official Github documentation, I *think* it should work. At the bottom of this article I have additional resources for Windows users.

Step 5: Have Your Site Folder Easy to Access

Have your folder with your website contents ready to go. (It can be named anything.)

I have mine saved on the desktop of my computer.

folder on desktop

The contents of my folder are very simple. Just an index.html file and a main.css.

folder contents

IMPORTANT: In order for your website to work on Github pages, it is very important that your primary HTML file be named index.html. So, if you have it saved as something else, rename it to index.html. If you have other pages—like an about.html—that's fine. As long as the main is named index.html.

Step 6: Open Your Terminal and go to Project Location

Open your terminal. (AKA the command line.)

Go to the folder where the project is stored on your computer.

(Pro tip: in a new terminal window, type “cd” and then simply drag your folder into the terminal. Press enter.)

If you are having trouble opening your command line on your Mac computer, or getting to the folder location, please turn to the video I created.

Step 7: Git Init and Push to Github

These are the steps I followed once getting into the appropriate folder, where my website files are located.

  1. git init — initializes git in your folder on your computer
  2. git add . — adds all the files in the folder, the period is important
  3. git commit -m "first commit" — committing to Github with a message of “first commit”
  4. git remote add origin https://github.com/laurencebradford/laurencebradford.github.io.git — this command is only done when adding a new repository to your folder. So this is only done this first time, not when making edits in future.
  5. git push -u origin master — pushes changes to your Github repository, in the “master” branch.

As always, there are multiple ways to do one thing.

Nonetheless, after you push your changes, refresh your page, please. (The last we were on in step four.)

Step 8: Make Sure It Worked

After refreshing the page, something like this should appear.

repo now

As you will see, the contents of your project folder will be there. For me, only index.html and main.css.

Now, head over to the url username.github.io. (Where username = your Github username.)

This is what my site looks like. (Exactly how it looked locally on my computer.)

my-live-site

And, that's it folks. You officially have a site online.

How to get your site on Github Pages

Step-by-step guide for getting your site on Github pages.

Don't worry. I'll never, ever spam you! Powered by ConvertKit

…What About Making Changes in the Future?

With Github Pages, it's easy to make changes to your site.

Simply,

  1. Edit the files locally on your computer, in your favorite text editor
  2. git add the files on your terminal, those you want to stage to be committed
  3. git commit your changes with a message
  4. And git push to your master branch

I made another video (separate from the first) that shows how to make changes to your website files and then bring them onto your live Github Page.

Click here to watch the video.

…What About a Custom Domain Name?

You can attach a custom domain name (yourdomain.com) to your Github page. It is possible to do this for both project sites and user sites.

Here are directions from Github on how to set this up. Of course, you must buy a domain name first. (My favorite place to buy domain names is name.com.)

If you're struggling with this, tell me in the comment section or via email at laurence@learntocodewith.me.

I can easily make an additional walk-through video or tutorial explaining how to use Github pages with a real domain name.

What are my Other Options?

Don't want to use Github Pages? Got it.

Here are a few other ways to get your site (namely HTML, CSS and JS files) online.

1. Amazon Web Services (AWS) S3

Here's a tutorial: http://davidwalsh.name/hosting-website-amazon-s3. Here's information from AWS, too.

2. Bit Balloon

Here's a video explanation thanks to General Assembly on getting a site up on Bit Balloon.

3. Neocities

It was tough finding a video tutorial, but here is an article about the service. And this post shows you how to get going.

Additional Github Learning Materials:

Here are some online courses that cover topics mentioned above, so you can learn more.

Conclusion

There you have it: an easy eight step process to getting your site live on Github Pages.

Whether you're a more experienced web designer/developer or brand new, I encourage you to give Github Pages a try.

And then report back here, in the comments section below, with what you think.

UPDATE: February 27, 2015

After receiving some questions via email, I wanted to clarify a few things and add some additional resources.

This tutorial demonstrates setting up Github Pages on a Mac Computer.

I wish I had a Windows computer I could access (with screencast equipment) so I could do another demo.

However, based on research that I did, I believe the above steps *should* work.

Anyways, here are some helpful resources if you are a Windows user:

1) Setting up Git on Windows (official Github documentation)

2) Github for Windows (official Github Client for Windows)

3) “How to Setup Github Pages – Website on Github – Complete Beginner Tutorial” (video on YouTube where a Windows computer is being used in demonstration)

“If my repository is public, can people edit my files?”

This is another question I received.

There's a lot that goes into this. And if you learn more about Github by taking a course or simply by experimenting, it'll make more sense.

But, basically: no. A random person cannot edit your files so that they will appear differently in your repository, and hence on your username.github.io site.

But, when you make your files public on Github, anyone can view them. (Even without a Github Account.) And other Github users can “fork” your public repositories. Which is like a copy and paste.

People typically fork repositories if they want to either (a) build off your files for their own project or (b) to suggest changes.

I feel like I am guilty of “forking and forgetting”. Meaning I fork a repository, plan on building off of it or something…and then never do because I get distracted.

Anyways—point is: DO NOT PUT ANYTHING UP ON GITHUB IN A PUBLIC REPOSITORY THAT YOU DO NOT WANT OTHERS TO SEE.

Sorry to yell. But the last thing I want is someone coming back to me because they put ____ in their repository and didn't want anyone seeing…

Examples of this include but are not limited to:

  • Sensitive information (addresses, passwords, credit card numbers)
  • Images (that you do not want anyone seeing)
  • Some idea you are working on (that you don't want anyone to see)
  • And so on…

“What can I use Github Pages for?”

AKA—what kinds of sites.

With Github pages, you can only serve static assets (HTML, CSS, JS and images). You cannot setup a WordPress site, a RoR application, a Meteor.js app, and so forth.

But you can use Github's Jekyll (static site / blog generator), which a lot of people use and love.

For more on Github Pages uses, etc.—look to the comment thread below.

And if you have any more questions, or thoughts, on using Github Pages, I'd love to hear them. Leave a comment below!


  • I’ve been meaning to get used to using and learning how to use Github for a while now so I really appreciate this post. I do have a question, would this be a good way to test websites before actually launching them? And a further question, could you do this with WordPress?

    The reason I ask is that the company I work for and the way I’ve been taught to do sites recently is to have a subdomain that would be test.example.com and I’d build the site there and then move it over. But if I could do this, and not have to use up server space, it just makes me wonder if this would actually be easier to do.

    -Marisa | http://marisahendrickson.com/

    • Hi Marisa,

      As far as testing websites before launching, I think that is a perfect use case for Github Pages.

      However, a big catch: it depends on the type of site you are running. If you are just doing static assets (HTML, CSS, Images and JS) — then you can run on Github Pages.

      However, you cannot host a WP site, RoR application or similar on Github Pages. (But you can use Github’s http://jekyllrb.com/ — which is kind of like CMS .. but it’s built with Ruby. I’ve only used Jekyll a few times so I can’t offer much thoughts on it.)

      Another issue with Github Pages that I should mention is … well, it’s free! Meaning you only get so much server speed, etc. And if you have a site getting tons of traffic and it’s hosted on Github pages — I’d imagine it’d be quite slow.

      I’ve only ever used a subdomain once when building a new site in the way you mentioned. By problem subdomains is that someone could stumble across the test site (unless it’s PW protected, which is easy) and also it can make Google Analytics funky. (It starts to log traffic twice and messes up some of the metrics.) There’s a way to add a filer to block the subdomain .. but I never figured it out. (Admittedly, didn’t spend all that much time trying to!)

      You could also set up a test site, or “staging url”, that is unattached from the main url? So develop locally, push changes to the staging url and then once it’s ok’ed over to the live site. Just an idea.

      … This has become a much longer response than I thought haha but I hope some of this helped!

      • That actually helped a ton, thank you! I would like to really start developing static websites as well so I’m glad to know that I can use Github Pages for that.

        The reason I don’t develop the WP sites locally is because I have to have a marketing director or my boss give me feedback on the site and they’re usually remote. I make sure that the site isn’t indexed by the Google bots so I’m sure that helps somewhat but I’ll admit that it’s not an ideal way of doing things. One day I’m sure I’ll find a better way.

        • Okay, cool!

          If you’re building on WP, I have used this password plugin before: https://wordpress.org/plugins/password-protected/

          It’s really easy to use. Visitors to the site must enter a password before seeing anything. (Once entered, they don’t have to enter it again for a few days it seems.)

          You can even set up certain passwords for certain people. Or just one for everyone.

  • Been putting it off for sometime and probably still will! When I’m ready, I’ll look this post up Lawrence! Nice one :-)

  • Dave

    Lots of great info. Thanks!

  • Anna

    After many attempts and trials and errors, I managed to create a theme that I really like and I want to use it as my personal website.

    What I haven’t figured out yet, is if there is any possible way, I can move the content of my homepage with the recent posts in another page and substitute it with an ‘about me’ page.

    The source code of my theme can be found here: https://github.com/sunbliss/sunbliss.github.io.git and it is jekyll-made.

    Thank you for any kind of help.

  • ian cikal

    thank’s @laurencebradford3:disqus , i got new experience from here.. :-) anyway, feel comfort reading here, simple style but not simpler.. thank’s.. :-)