Host Your Own Content For Free At Github

Most people consider Github just a repository for code and a place where developers can collaborate on projects and visitors can download cool new open-source applications. It’s definitely that, but there’s much more available to you at a Github user if you know how to take advantage of it.

Here’s how you can use Github to host your web app and make it accessible to visitors, as a good-looking website that lists your projects, or even a personal nameplate site you can direct people to.

It’s not one of Github’s most popular features, but Github Pages allows you to publish a web app or any other content to the web inside one of your repositories so anyone can see it. All you have to do is create the repository and name it accordingly. The pages support normal HTML, JavaScript, and just about any other common web scripting or display language, meaning you can design and develop the look and feel of the page to your heart’s content. Here’s how to get started.

What You’ll Need

• A Github account.
• Some, but not much, web design know-how
• A web app, project or collection of projects hosted at Github that you want to pimp to the world

The real key will be building out the project page to look and behave the way you’d like it to. You can go crazy with this, but how crazy will depend on your web design skills. If you’re more of a developer than a designer, don’t worry, Github Pages has a built-in project page generator that will set it up for you.

How to Get Started

Once you have your tools, now you can pick the Github subdomain that visitors can use to get to your project. For example, if I want my web app to be live at “alanhenry.github.com”, all I’d have to do is create a repo in my github account called “alanhenry.github.com”, and while its directory would really be github.com/alanhenry/alanhenry.github.com, it would be accessible to anyone on the web at the shorter and easier-to-remember URL. Here’s how you do it:

• 
  Create a new repository. Give it the name of whatever github subdomain you’d like to use.
• Add a description and make the repo public.
• Push a master branch to the project, and populate it with the projects and other elements you want visible on your project page.
• Add an “index.html” file to your project, and build out the page in HTML and JavaScript as you’d like it to display.
• Commit your changes and wait about 10 minutes.

After you’ve committed your changes, it’ll take a few minutes for your new page to be visible at the URL you’ve chosen. If you’re not comfortable doing it manually, you can use Github’s automatic project page generator to do it. It’s in the admin panel of your repo, and while the page it generates won’t have the style and substance of a custom-built one, it does the trick if you’d rather spend your time working on the projects you want to show off. If you’re a fan of Jekyll, an open-source site generator also available at Github, you can use that to generate your pages as well.

What You Can Do With Your New Github Page

I suggested creating a simple index.html page, but depending on your skill level you can go as crazy here as you want. If you have a web app that you’d like to run, just add its resources — AJAX, Rails, CSS, anything you need to run — to your repo, plug the web app into your page, and then tell everyone that your shiny new web app is available at the URL you’ve chosen. If your project is open-source, your hosting is free, your repo is free, and everyone can enjoy the app you’ve created.

There are other ways to go about this as well. The folks behind Twitter are proud of the open-source software that powers their social network, and they make all of their projects available at their Github page. You can do the same and build a front-end for all of your other Github projects. You could build a personal or professional nameplate site using the tools we’ve given you, or using any other CSS or HTML you choose. You can even build slideshows about your projects, web apps, or just about yourself using the previously mentioned Deck.js or Impress.js. Sravan Reddy’s post at his blog has a number of other possibilities for your new Github project page, if none of these meet your fancy.

As long as your projects are open-source (which makes your account free and gives you unlimited space for your projects and repos), you effectively have a web host for all of your web apps, websites and projects, complete with a short, custom URL that you can set. If you have your own domain, Github even lets you get around the Github subdomain and point your own URL at your project page, for free.

The folks at Github don’t mean for their service to essentially become a free web host — the goal is for you to have a place to host your projects and, if you choose, showcase those projects so the world can see what you’re capable of. Even if you’re not strictly a developer, the ability to build and host a web app, personal site, or just a list of design or development projects at Github for everyone to see and try out is a useful tool that’d difficult to find anywhere else.

Do you use Github pages for your projects? Do you have a web app hosted at Github that’s public and active? Share your project pages — and how you built them — in the comments below.