Skip to main content

How to use github pages for optimized static website or game



Last week I have read post by Andrzej Mazur about hosting games on github pages and as this post covers things that were new to me I have recently found some nice tricks that can help with while working on these pages more effectively.

Source: http://enclavegames.com/blog/2014/02/02/host-your-html5-games-on-github-pages/

Now, what I mean?

To use github pages you must create new branch on github called gh-pages so you have to options:


  1. delete master and use only gh-pages
  2. push to gh-pages from time to time but work on master
Both have it's strong and weak points.
1: Working on gh-pages alone is easier but you will struggle to add any build process so you have to use unoptimized resources in your game.
2: You maintain some kind of optimized version of a site or game in gh-pages branch and use master branch as src. Downside of this approach is that you need two folders cloned from the same repository on disk and force build script to know about external directory structure. 

So are there any alternatives?

I think there is and it can be really easy to use :)

Idea is to use git subtree and have dist and src folders in master repository. The trick is to make dist folder point to gh-pages branch :)

I don't know who came up with this idea first but when I figured it out myself it was already solved by Yeoman community. 


To make dist folder point to gh-pages use:


git add dist && git commit -m "Initial dist subtree commit"

And to deploy:

git subtree push --prefix dist origin gh-pages


Remember that dist folder will be part of master branch as well so you can't have it in .gitignore file. When using any build tool like branch that generates .min.* files you need to commit them to master branch and push to gh-pages branch. Sometimes it may not be the best option, and it feels like committing binaries but in my opinion it is useful enough to still use it.

I you are using Bitbucket there is something similar there as well: https://confluence.atlassian.com/display/BITBUCKET/Publishing+a+Website+on+Bitbucket but there are some quirks so you must decide on your own.


Comments

Popular posts from this blog

How to simulate slow connection (developer proxy in Node.js)

Update: If you use Chrome then you can use "Throttling" so simulate slow network for all your assets. This should be easier than proxy.


Toggle device modeChoose Network type.Refresh the page




https://developer.chrome.com/devtools/docs/device-mode 



Proxy:



For some time I wanted to use some proxy for development and testing of eg. slow internet connection, but it was hard to find something useful and free. I know there is Charles but buy it to use it at most one in a month is not for me.

I started thinking about Node.js, maybe I can write proxy for me? But fortunately I found one.

https://github.com/nodejitsu/node-http-proxy

With this module I can write really short code to create slow server:


var http = require('http'), httpProxy = require('http-proxy'); httpProxy.createServer(function (req, res, proxy) { var buffer = httpProxy.buffer(req); setTimeout(function () { proxy.proxyRequest(req, res, { host: 'localhost', port: 8080, …

How to use NPM packages from private repositories on bitbucket

Using Node.js you want to use NPM packages for reusable parts of the apps you create, that is a common sense. At the same time not everything makes sense as a public module unfortunately. Right now we are using Bitbucket at work for private repositories but there is a problem. How to use them as NPM modules? We do not want to publish them to the public npmjs.org but still want to have an ability to install them easily.

After googling and experimenting I have found simple solution.
First create new user in your organization with obscure password and give it read access to the repo. It is best to assign really obscure password but do not fool yourself. This is convenient but you must sacrifice security a bit. You should always consider how in your context that would be important.

Change example from below to:
user - username
PASS - password of the user
organization - owner of the project (you can find it in bitbucket url to your project)
project - your project name

"dependencies&…