Well, here we are, earlier than 2020 (repeated joke, read yesterday’s post) and I’m actually putting up my “How To Host Your Pages On GitHub” post! …yaaaay…wooo…

In a nutshell, GitHub has a feature called “Pages” whereby you can host flat content on the site – HTML, CSS, JavaScript and the like. It’s been around for a while and it’s quite handy for setting up a portfolio, or a simple couple of pages website. It’s easy to set up and you can have content up fairly quickly if you use an established boilerplate like Bootstrap.

There’s plenty of guides around but, in a nutshell, all you need to do is:

  • Log in to GitHub (obviously create an account if you don’t already have one)
  • Set up a new repository and call it [yourusername].github.io (obviously replacing [yourusername] with… your… username…)
  • Clone the blank repository down to your dev environment and chuck in your site content. This could be as barebones or fully fledged as you want but  you can only run HTML, CSS and JS – sure you can include PHP and other stuff, but there’s no parsers for server side scripts on GitHub.
  • Commit your pages, push up to GitHub and visit [yourusername].github.io to see your site (again, replace… oh you get the idea)

It’s a really neat thing and there’s a bunch of stuff you can do with it like custom 404 pages, domain mapping and other bits – you can find out more on the official GitHub Pages site here.

A couple of other things to note are:

  • You’re not just limited to creating pages for your username – if you’ve set up an organisation on GitHub you can also create pages for that organisation in a separate repo
  • You can also do this on BitBucket which has the added bonus of being able to create private repositories without the need for a “Pro” account – I’ve done this in the past for work to be able to distribute documents and information without exposing things to the general public.

So yes, I’ll be chucking stuff up to my GitHub page at abeeken.github.io, code examples and CSS/JS tricks and the like. Check it out, fire up in the comments if you want to chat more about this or take it social on Twitter @abeeken!