Quickly create github.io pages for your Elm projects

I’ve been learning Elm recently and writing a few small web app to learn it. The code is on github but its nice to publish the actual page for people to play with. This is pretty easy to do with github pages and elm-make.

Just go to your repository, type the following commands and you should get a github.io page such as http://jasonneylon.github.io/stamp-duty-calculator/

git checkout --orphan gh-pages
elm-make Main.elm --output=index.html
git add index.html
git commit -m "Creating github page"
git push --set-upstream origin gh-pages

If you are interacting with JavaScript code via ports you can create your own index.html page (copying a generated index.html file is a quick way to do this), run elm-make to build the elm.js file and then reference the generated elm.js script from your index.html file.

git checkout --orphan gh-pages
git add index.html
elm-make Main.elm # this will output elm.js
git add elm.js
git commit -m "Creating github page"
git push --set-upstream origin gh-pages

I followed this approach to create the github.io page for http://jasonneylon.github.io/scream-into-the-void/.

Opening github in your browser from the terminal

Here is my first ever bash function! When you run it from the terminal it opens the github page in your browser for the git repository you are currently in. In keeping with bash best practices it has a short simple name: gh. I find myself doing this quite a lot as I prefer the github log and history views to the gitx or command line views.

# Opens the github page for the current git repository in your browser
# git@github.com:jasonneylon/dotfiles.git
# https://github.com/jasonneylon/dotfiles/
function gh() {
  giturl=$(git config --get remote.origin.url)
  if [ "$giturl" == "" ]
     echo "Not a git repository or no remote.origin.url set"
     exit 1;

  branch="$(git symbolic-ref HEAD 2>/dev/null)" ||
  branch="(unnamed branch)"     # detached HEAD
  open $giturl

Just type gh:
Opening github from the terminal

Boom! github!
The github page for the repository

How it works

It grabs the remote url via the git config command: git@github.com:jasonneylon/dotfiles.git. Next it does some simple string replacements to get a github http url: https://github.com/jasonneylon/dotfiles/. Finally it open the github url in the default browser using the MacOS open command. As it uses the open command I imagine it only works on MacOSs.